Source: src/component/FeatureRenderer.js

  1. /* Copyright (c) 2015-2017 The Open Source Geospatial Foundation
  2.  *
  3.  * This program is free software: you can redistribute it and/or modify
  4.  * it under the terms of the GNU General Public License as published by
  5.  * the Free Software Foundation, either version 3 of the License, or
  6.  * (at your option) any later version.
  7.  *
  8.  * This program is distributed in the hope that it will be useful,
  9.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  10.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11.  * GNU General Public License for more details.
  12.  *
  13.  * You should have received a copy of the GNU General Public License
  14.  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  15.  */
  16. /**
  17.  * A component that renders a `ol.style.Style` with an optional `ol.Feature`.
  18.  *
  19.  *     @example preview
  20.  *     var poly = Ext.create('GeoExt.component.FeatureRenderer', {
  21.  *         symbolizers: new ol.style.Style({
  22.  *             fill: new ol.style.Fill({color: 'red'})
  23.  *         })
  24.  *     });
  25.  *     var line = Ext.create('GeoExt.component.FeatureRenderer', {
  26.  *         symbolizers: new ol.style.Style({
  27.  *             stroke: new ol.style.Stroke({color: 'orange', width: 3}),
  28.  *         }),
  29.  *         symbolType: 'Line'
  30.  *     });
  31.  *     var point = Ext.create('GeoExt.component.FeatureRenderer', {
  32.  *         symbolizers: new ol.style.Style({
  33.  *             image: new ol.style.Circle({
  34.  *                 radius: 7,
  35.  *                 fill: new ol.style.Fill({color: 'gray'}),
  36.  *                 stroke: new ol.style.Stroke({color: 'black', width: 3}),
  37.  *             })
  38.  *         }),
  39.  *         symbolType: 'Point'
  40.  *     });
  41.  *     var star = Ext.create('GeoExt.component.FeatureRenderer', {
  42.  *         symbolizers: new ol.style.Style({
  43.  *             image: new ol.style.RegularShape({
  44.  *                 fill: new ol.style.Fill({color: 'blue'}),
  45.  *                 stroke: new ol.style.Stroke({color: 'green', width: 3}),
  46.  *                 points: 7,
  47.  *                 radius: 15,
  48.  *                 radius2: 7,
  49.  *                 angle: 0
  50.  *             })
  51.  *         }),
  52.  *         minWidth: 40,
  53.  *         minHeight: 40,
  54.  *         symbolType: 'Point'
  55.  *     });
  56.  *     Ext.create('Ext.panel.Panel', {
  57.  *         title: 'Rendering of ol.Features in a panel',
  58.  *         items: [poly, line, point, star],
  59.  *         border: false,
  60.  *         renderTo: Ext.getBody()
  61.  *     });
  62.  *
  63.  * @class GeoExt.component.FeatureRenderer
  64.  */
  65. Ext.define('GeoExt.component.FeatureRenderer', {
  66.   extend: 'Ext.Component',
  67.   alias: 'widget.gx_renderer',
  68.   requires: ['GeoExt.util.Version'],
  69.   mixins: ['GeoExt.mixin.SymbolCheck'],
  71.   // <debug>
  72.   symbols: [
  73.     'ol.extent.getCenter',
  74.     'ol.extent.getWidth',
  75.     'ol.extent.getHeight',
  76.     'ol.Feature',
  77.     'ol.Feature#getGeometry',
  78.     'ol.Feature#setStyle',
  79.     'ol.geom.Geometry#getExtent',
  80.     'ol.geom.Point',
  81.     'ol.geom.LineString',
  82.     'ol.geom.Polygon',
  83.     'ol.layer.Vector',
  84.     'ol.layer.Vector#getSource',
  85.     'ol.Map#getSize',
  86.     'ol.Map#getView',
  87.     'ol.Map#setView',
  88.     'ol.Map#updateSize',
  89.     'ol.proj.Projection',
  90.     'ol.source.Vector',
  91.     'ol.source.Vector#addFeature',
  92.     'ol.View',
  93.     'ol.View#fit',
  94.   ],
  95.   // </debug>
  97.   /**
  98.    * Fires when the feature is clicked on.
  99.    *
  100.    * @event click
  101.    * @param {GeoExt.component.FeatureRenderer} renderer The feature renderer.
  102.    */
  104.   config: {
  105.     /**
  106.      * Optional class to set on the feature renderer div.
  107.      *
  108.      * @cfg {string}
  109.      */
  110.     imgCls: '',
  112.     /**
  113.      * The minimum width.
  114.      *
  115.      * @cfg {number}
  116.      */
  117.     minWidth: 20,
  119.     /**
  120.      * The minimum height.
  121.      *
  122.      * @cfg {number}
  123.      */
  124.     minHeight: 20,
  126.     /**
  127.      * The resolution for the renderer.
  128.      *
  129.      * @cfg {number}
  130.      */
  131.     resolution: 1,
  133.     /**
  134.      * Optional vector to be drawn.
  135.      *
  136.      * @cfg {ol.Feature}
  137.      */
  138.     feature: undefined,
  140.     /**
  141.      * Feature to use for point swatches. Optional.
  142.      *
  143.      * @cfg {ol.Feature}
  144.      */
  145.     pointFeature: undefined,
  147.     /**
  148.      * Feature to use for line swatches. Optional.
  149.      *
  150.      * @cfg {ol.Feature}
  151.      */
  152.     lineFeature: undefined,
  154.     /**
  155.      * Feature to use for polygon swatches. Optional.
  156.      *
  157.      * @cfg {ol.Feature}
  158.      */
  159.     polygonFeature: undefined,
  161.     /**
  162.      * Feature to use for text label swatches. Optional.
  163.      *
  164.      * @cfg {ol.Feature}
  165.      */
  166.     textFeature: undefined,
  168.     /**
  169.      * An `ol.style.Style` instance or an array of `ol.style.Style`
  170.      * instances for rendering a  feature.  If no symbolizers are
  171.      * provided, the default style from OpenLayers will be used.
  172.      *
  173.      * @cfg {Array<ol.style.Style> | ol.style.Style}
  174.      */
  175.     symbolizers: undefined,
  177.     /**
  178.      * One of `"Point"`, `"Line"`, `"Polygon"` or `"Text"`.  Only relevant
  179.      * if `feature` is not provided.
  180.      *
  181.      * @cfg {string}
  182.      */
  183.     symbolType: 'Polygon',
  184.   },
  186.   inheritableStatics: {
  187.     /**
  188.      * Determines the style for the given feature record.
  189.      *
  190.      * @param {GeoExt.data.model.Feature} record A feature record to get the
  191.      *     styler for.
  192.      * @return {Array<ol.style.Style> | ol.style.Style} The style(s) applied to the
  193.      *     given feature record.
  194.      */
  195.     determineStyle: function (record) {
  196.       const feature = record.getFeature();
  197.       return (
  198.         feature.getStyle() ||
  199.         feature.getStyleFunction() ||
  200.         (record.store ? record.store.layer.getStyle() : null)
  201.       );
  202.     },
  203.   },
  205.   /**
  206.    * Initialize the GeoExt.component.FeatureRenderer.
  207.    */
  208.   initComponent: function () {
  209.     const me = this;
  210.     const id = me.getId();
  211.     me.autoEl = {
  212.       id: id,
  213.       tag: 'div',
  214.       class: this.getImgCls(),
  215.     };
  216.     if (!me.getLineFeature()) {
  217.       me.setLineFeature(
  218.         new ol.Feature({
  219.           geometry: new ol.geom.LineString([
  220.             [-8, -3],
  221.             [-3, 3],
  222.             [3, -3],
  223.             [8, 3],
  224.           ]),
  225.         }),
  226.       );
  227.     }
  228.     if (!me.getPointFeature()) {
  229.       me.setPointFeature(
  230.         new ol.Feature({
  231.           geometry: new ol.geom.Point([0, 0]),
  232.         }),
  233.       );
  234.     }
  235.     if (!me.getPolygonFeature()) {
  236.       me.setPolygonFeature(
  237.         new ol.Feature({
  238.           geometry: new ol.geom.Polygon([
  239.             [
  240.               [-8, -4],
  241.               [-6, -6],
  242.               [6, -6],
  243.               [8, -4],
  244.               [8, 4],
  245.               [6, 6],
  246.               [-6, 6],
  247.               [-8, 4],
  248.             ],
  249.           ]),
  250.         }),
  251.       );
  252.     }
  253.     if (!me.getTextFeature()) {
  254.       me.setTextFeature(
  255.         new ol.Feature({
  256.           geometry: new ol.geom.Point([0, 0]),
  257.         }),
  258.       );
  259.     }
  260.     me.map = new ol.Map({
  261.       controls: [],
  262.       interactions: [],
  263.       layers: [
  264.         new ol.layer.Vector({
  265.           source: new ol.source.Vector(),
  266.         }),
  267.       ],
  268.     });
  269.     const feature = me.getFeature();
  270.     if (!feature) {
  271.       me.setFeature(me['get' + me.getSymbolType() + 'Feature']());
  272.     } else {
  273.       me.applyFeature(feature);
  274.     }
  275.     me.callParent();
  276.   },
  277.   /**
  278.    * Draw the feature when we are rendered.
  279.    *
  280.    * @private
  281.    */
  282.   onRender: function () {
  283.     this.callParent(arguments);
  284.     this.drawFeature();
  285.   },
  286.   /**
  287.    * After rendering we setup our own custom events using #initCustomEvents.
  288.    *
  289.    * @private
  290.    */
  291.   afterRender: function () {
  292.     this.callParent(arguments);
  293.     this.initCustomEvents();
  294.   },
  295.   /**
  296.    * (Re-)Initializes our custom event listeners, mainly #onClick.
  297.    *
  298.    * @private
  299.    */
  300.   initCustomEvents: function () {
  301.     const me = this;
  302.     me.clearCustomEvents();
  303.     me.el.on('click', me.onClick, me);
  304.   },
  305.   /**
  306.    * Unbinds previously bound listeners on #el.
  307.    *
  308.    * @private
  309.    */
  310.   clearCustomEvents: function () {
  311.     const el = this.el;
  312.     if (el && el.clearListeners) {
  313.       el.clearListeners();
  314.     }
  315.   },
  316.   /**
  317.    * Bound to the click event on the #el, this fires the click event.
  318.    *
  319.    * @private
  320.    */
  321.   onClick: function () {
  322.     this.fireEvent('click', this);
  323.   },
  324.   /**
  325.    * Private method called during the destroy sequence.
  326.    *
  327.    * @private
  328.    */
  329.   beforeDestroy: function () {
  330.     const me = this;
  331.     me.clearCustomEvents();
  332.     if (me.map) {
  333.       me.map.setTarget(null);
  334.     }
  335.   },
  336.   /**
  337.    * When resizing has happened, we might need to re-set the renderer's
  338.    * dimensions via #setRendererDimensions.
  339.    *
  340.    * @private
  341.    */
  342.   onResize: function () {
  343.     this.setRendererDimensions();
  344.     this.callParent(arguments);
  345.   },
  346.   /**
  347.    * Draw the feature in the map.
  348.    *
  349.    * @private
  350.    */
  351.   drawFeature: function () {
  352.     const me = this;
  353.     me.map.setTarget(me.el.id); // TODO why not me.el?
  354.     me.setRendererDimensions();
  355.   },
  356.   /**
  357.    * Set the dimension of our renderer, i.e. map and view.
  358.    *
  359.    * @private
  360.    */
  361.   setRendererDimensions: function () {
  362.     const me = this;
  363.     const gb = me.feature.getGeometry().getExtent();
  364.     const gw = ol.extent.getWidth(gb);
  365.     const gh = ol.extent.getHeight(gb);
  366.     /*
  367.      * Determine resolution based on the following rules:
  368.      * 1) always use value specified in config
  369.      * 2) if not specified, use max res based on width or height of element
  370.      * 3) if no width or height, assume a resolution of 1
  371.      */
  372.     let resolution = me.initialConfig.resolution;
  373.     if (!resolution) {
  374.       resolution = Math.max(gw / me.width || 0, gh / me.height || 0) || 1;
  375.     }
  376.     me.map.setView(
  377.       new ol.View({
  378.         minResolution: resolution,
  379.         maxResolution: resolution,
  380.         projection: new ol.proj.Projection({
  381.           code: '',
  382.           units: 'pixels',
  383.         }),
  384.       }),
  385.     );
  386.     // determine height and width of element
  387.     const width = Math.max(me.width || me.getMinWidth(), gw / resolution);
  388.     const height = Math.max(me.height || me.getMinHeight(), gh / resolution);
  389.     // determine bounds of renderer
  390.     const center = ol.extent.getCenter(gb);
  391.     const bhalfw = (width * resolution) / 2;
  392.     const bhalfh = (height * resolution) / 2;
  393.     const bounds = [
  394.       center[0] - bhalfw,
  395.       center[1] - bhalfh,
  396.       center[0] + bhalfw,
  397.       center[1] + bhalfh,
  398.     ];
  399.     me.el.setSize(Math.round(width), Math.round(height));
  400.     me.map.updateSize();
  401.     // Check for backwards compatibility
  402.     if (GeoExt.util.Version.isOl3()) {
  403.       me.map.getView().fit(bounds, me.map.getSize());
  404.     } else {
  405.       me.map.getView().fit(bounds);
  406.     }
  407.   },
  408.   /**
  409.    * We're setting the symbolizers on the feature.
  410.    *
  411.    * @param {Array<ol.style.Style> | ol.style.Style} symbolizers The style (or
  412.    *     array of styles) that have been set.
  413.    * @return {Array<ol.style.Style> | ol.style.Style} The style (or
  414.    *     array of styles) that have been set.
  415.    * @private
  416.    */
  417.   applySymbolizers: function (symbolizers) {
  418.     const feature = this.getFeature();
  419.     if (feature && symbolizers) {
  420.       feature.setStyle(symbolizers);
  421.     }
  422.     return symbolizers;
  423.   },
  425.   /**
  426.    * We're setting the feature and add it to the source.
  427.    *
  428.    * @param {ol.Feature} feature The feature that has been set.
  429.    * @return {ol.Feature} feature The feature that has been set.
  430.    * @private
  431.    */
  432.   applyFeature: function (feature) {
  433.     const symbolizers = this.getSymbolizers();
  434.     if (feature && symbolizers) {
  435.       feature.setStyle(symbolizers);
  436.     }
  437.     if (this.map) {
  438.       const source = this.map.getLayers().item(0).getSource();
  439.       source.clear();
  440.       source.addFeature(feature);
  441.     }
  442.     return feature;
  443.   },
  445.   /**
  446.    * Update the `feature` or `symbolizers` and redraw the feature.
  447.    *
  448.    * Valid options:
  449.    *
  450.    * @param {Object} options Object with properties to be updated.
  451.    * @param {ol.Feature} options.feature The new or updated feature.
  452.    * @param {Array<ol.style.Style> | ol.style.Style} options.symbolizers The
  453.    *     symbolizers.
  454.    */
  455.   update: function (options) {
  456.     if (options.feature) {
  457.       this.setFeature(options.feature);
  458.     }
  459.     if (options.symbolizers) {
  460.       this.setSymbolizers(options.symbolizers);
  461.     }
  462.   },
  463. });