hilight.js

  1. 'use strict';
  3. // TODO hilight layer would be a good candidate for a custom class which internally proxies to ESRI's GraphicsLayer.
  5. const defaultSymbols = require('./defaultHilightSymbols.json');
  7. // contains functions to support the hilight layer.
  9. function cloneBuilder(esriBundle) {
  10.     /**
  11.     * Clone a graphic from a map-bound layer.
  12.     * @method cloneLayerGraphic
  13.     * @param {Graphic} graphic an ESRI graphic that resides in a map layer.
  14.     * @return {Object} an unbound copy of the graphic
  15.     */
  16.     return graphic => {
  17.         const clone = new esriBundle.Graphic({
  18.                 geometry: graphic.geometry
  19.             });
  20.         clone.symbol = graphic.getLayer().renderer.getSymbol(graphic);
  21.         return clone;
  22.     };
  23. }
  25. function graphicBuilder(esriBundle) {
  26.     /**
  27.     * Generating a graphic from server geometry.
  28.     * @method geomToGraphic
  29.     * @param {Object} geometry feature geometry conforming to ESRI Geometry standard
  30.     * @param {Object} symbol esri symbol in server format
  31.     * @return {Object} an ESRI GraphicsLayer
  32.     */
  33.     return (geometry, symbol) => {
  34.         const graphic = new esriBundle.Graphic({
  35.                 geometry
  36.             });
  37.         graphic.symbol = esriBundle.symbolJsonUtils.fromJson(symbol);
  38.         return graphic;
  39.     };
  40. }
  42. function getGraphicsBuilder(esriBundle, geoApi) {
  43.     // TODO once document sites are up and running, figure out a way to hyperlink the graphicBundles parameter to the class documentation page in the viewer site
  44.     /**
  45.     * Generating a graphic from server geometry.
  46.     * @method getUnboundGraphics
  47.     * @param {Array} graphicBundles set of graphic bundles with properties .graphic, .source, .layer, .featureIdx.
  48.     * @param {Object} spatialReference the projection the unbound graphics should be in
  49.     * @return {Array} a set of promises that resolve with an unbound graphic, one for each graphic bundle provided
  50.     */
  51.     return (graphicBundles, spatialReference) => {
  53.         // generate detached graphics to give to the hilight layer.
  54.         // promises because server layers renderer is inside a promise
  55.         return graphicBundles.map(bundle => {
  56.             if (bundle.source === 'server') {
  57.                 let geom = bundle.graphic.geometry;
  59.                 // check projection
  60.                 if (!geoApi.proj.isSpatialRefEqual(geom.spatialReference, spatialReference)) {
  61.                     geom = geoApi.proj.localProjectGeometry(spatialReference, geom);
  62.                 }
  64.                 // determine symbol for this server graphic
  65.                 const attribs = bundle.layer.attributeBundle;
  66.                 return attribs[bundle.featureIdx].layerData.then(layerData => {
  67.                     const symb = geoApi.symbology.getGraphicSymbol(bundle.graphic.attributes, layerData.renderer);
  68.                     return geoApi.hilight.geomToGraphic(geom, symb);
  69.                 });
  71.             } else {
  72.                 // local graphic. clone and hilight
  73.                 return Promise.resolve(geoApi.hilight.cloneLayerGraphic(bundle.graphic));
  74.             }
  75.         });
  76.     };
  77. }
  79. function hilightBuilder(esriBundle) {
  80.     /**
  81.     * Generate a graphic layer to handle feature hilighting.
  82.     * @method makeHilightLayer
  83.     * @param {Object} options optional settings for the hilight layer
  84.     *                         layerId - id to use for the hilight layer. defaults to rv_hilight
  85.     *                         pinSymbol - esri symbol in server json format to symbolize the click marker. defaults to a red pin
  86.     *                         hazeOpacity -  how opaque the haze sheet behind the hilight is. 0 to 255, 0 being transparent. defaults to 127
  87.     * @return {Object} an ESRI GraphicsLayer
  88.     */
  89.     return options => {
  90.         // set options
  91.         let id = 'rv_hilight';
  92.         let hazeOpac = 127;
  93.         let pinSymbol = defaultSymbols.pinSymbol;
  95.         if (options) {
  96.             if (options.layerId) {
  97.                 id = options.layerId;
  98.             }
  99.             if (options.pinSymbol) {
  100.                 pinSymbol = options.pinSymbol;
  101.             }
  102.             if (options.hazeOpacity) {
  103.                 hazeOpac = options.hazeOpacity;
  104.             }
  105.         }
  107.         const hgl = new esriBundle.GraphicsLayer({ id, visible: true });
  109.         // ensure highlight is top-most graphic layer
  110.         function moveHilightToTop() {
  111.             hgl._map.reorderLayer(hgl, hgl._map.graphicsLayerIds.length);
  112.         }
  114.         /**
  115.         * Add a graphic to indicate where user clicked.
  116.         * @method addPin
  117.         * @param {Point} point an ESRI point object to use as the graphic location
  118.         */
  119.         hgl.addPin = point => {
  121.             const pin = new esriBundle.Graphic({ symbol: pinSymbol });
  122.             pin.setGeometry(point);
  124.             hgl.add(pin);
  125.             moveHilightToTop();
  126.         };
  128.         /**
  129.         * Add a graphic or array of graphics to the highlight layer. Remove any previous graphics.
  130.         * @method addHilight
  131.         * @param {Graphic|Array} graphic an ESRI graphic, or array of ESRI graphics. Should be in map spatialReference, and not bound to a layer
  132.         */
  133.         hgl.addHilight = graphic => {
  135.             const graphics = Array.isArray(graphic) ? graphic : [graphic];
  137.             if (hgl._hilightGraphics) {
  138.                 // if active hilight graphics, remove them
  139.                 hgl._hilightGraphics.forEach(g => hgl.remove(g));
  140.             } else {
  141.                 // first application of hilight. add haze background by creating a partially opaque layer for
  142.                 // the whole map extent with some buffer. This will go under the highlighted graphic to make it stand out.
  143.                 const hazeJson = {
  144.                     symbol: defaultSymbols.hazeSymbol
  145.                 };
  146.                 hazeJson.symbol.color[3] = hazeOpac;
  147.                 const hazeGraphic = new esriBundle.Graphic(hazeJson);
  148.                 hazeGraphic.setGeometry(hgl._map.extent.expand(1.5)); // expand to avoid edges on quick pan
  149.                 hazeGraphic.haze = true;  // notifies layer to put this under any hilight graphics
  150.                 hgl.add(hazeGraphic);
  151.             }
  153.             // add new hilight graphics
  154.             hgl._hilightGraphics = graphics;
  155.             graphics.forEach(g => hgl.add(g));
  156.             moveHilightToTop();
  157.         };
  159.         /**
  160.         * Remove hilight from map
  161.         * @method clearHilight
  162.         */
  163.         hgl.clearHilight = () => {
  164.             // clear tracking vars, wipe the layer
  165.             hgl._hilightGraphics = null;
  166.             hgl.clear();
  167.         };
  169.         hgl.on('graphic-node-add', e => {
  170.             // figure out if graphic needs to be at top or bottom of hilight layer
  171.             // haze polygon goes to bottom, everything else to top
  172.             const g = e.graphic;
  173.             const dojoShape = g.getShape();
  175.             if (g.haze) {
  176.                 dojoShape.moveToBack();
  177.             } else {
  178.                 dojoShape.moveToFront();
  179.             }
  180.         });
  182.         return hgl;
  183.     };
  184. }
  186. module.exports = (esriBundle, geoApi) => ({
  187.     makeHilightLayer: hilightBuilder(esriBundle),
  188.     geomToGraphic: graphicBuilder(esriBundle),
  189.     cloneLayerGraphic: cloneBuilder(esriBundle),
  190.     getUnboundGraphics: getGraphicsBuilder(esriBundle, geoApi)
  191. });