Source: map/layer/Layer/Layer.js

  1. import { EventObject } from "../../../events/EventObject.js";
  2. import { generateUniqueId } from "../../../utils/utils.js";
  3. import { resolveComplexTemplate } from "../../../utils/template/resolveComplexTemplate.js";
  4. import { enhanceHTML } from "../../../utils/template/enhanceHTML.js";
  5. import { LayerProxy } from "./Layer.proxy.js";
  6. import { NETWORK_LOADING_ERROR } from "../../utils/messageTemplates.js";
  7. import LayerMetadata from "./Layer.metadata.md?raw";
  8. import { LayerSchema } from "./Layer.schema.js";
  10. export { Layer }
  12. /**
  13.  * Abstract Layer class
  14.  * 
  15.  * @author rhess <robin.hess@awi.de>
  16.  * @memberof vef.map.layer
  17.  */
  18. class Layer extends EventObject {
  20.     /**
  21.      * Set all properties for the layer based on the options object.
  22.      * 
  23.      * @param {object} config 
  24.      * @param {object} cache 
  25.      * @param {string} id 
  26.      */
  27.     constructor(config, cache, id) {
  28.         super({
  29.             "layer_select": [],
  30.             "layer_deselect": [],
  31.             "layer_update": [],
  32.             "layer_request_remove": [],
  33.             "layer_loading": [],
  34.             "layer_loaded": [],
  35.             "layer_message": [],
  36.             "layer_click": [],
  37.             "layer_mouseover": [],
  38.             "layer_mouseout": []
  39.         });
  41.         this.uniqueId = id || generateUniqueId();
  43.         // layer metadata containers
  44.         this.config = Object.assign({}, config || {});
  45.         this.cache = Object.assign({}, cache || {});
  46.         this.defaults = {};
  47.         this.schema = {};
  49.         // initialize the default properties
  50.         this.setSchema_(LayerSchema.getSchema());
  52.         // apply the catalogId to the config, if it is only defined in the cache
  53.         if ("catalogId" in this.cache) {
  54.             this.config.catalogId = this.cache.catalogId;
  55.         }
  57.         // internal properties
  58.         this.messages_ = [];
  59.         this.popupEvents_ = [];
  60.         this.projectionMatches_ = true;
  61.         this.filterMatches_ = true;
  63.         // active map layer state
  64.         this.crs_ = (this.availableCrs.length > 0) ? this.availableCrs[0] : "";
  65.         this.mapLayers_ = {};
  66.         this.activeLayer_ = new LayerProxy();
  68.         // framework specific map implementations
  69.         this.layerProxies_ = {};
  70.     }
  72.     get deactivated() {
  73.         return (!this.projectionMatches_ || !this.filterMatches_);
  74.     }
  76.     set deactivated(val) {
  77.         console.log("not implemented, only the calculated getter is relevant");
  78.     }
  79.     
  80.     /**
  81.      * Helper method to get a property from the config, cache or default container
  82.      * 
  83.      * @param {string} name 
  84.      * @private
  85.      * @returns {any} property
  86.      */
  87.     getProperty_(name) {
  88.         if (name in this.config) return this.config[name];
  89.         if (name in this.cache) return this.cache[name];
  90.         if (name in this.defaults) return this.defaults[name];
  91.         return undefined;
  92.     }
  94.     /**
  95.      * Register the getter and setter for a property and add default
  96.      * values for properties based on the JSON Schema
  97.      * @param {object} schema json schema
  98.      * @private
  99.      */
  100.     setSchema_(schema) {
  101.         this.schema = schema;
  102.         for (let name in schema.properties) {
  103.             if (name in this) delete this[name];
  104.             this.defaults[name] = schema.properties[name].default;
  105.             Object.defineProperty(this, name, {
  106.                 get() { return this.getProperty_(name); },
  107.                 set(val) { this.config[name] = val; },
  108.                 configurable: true
  109.             });
  110.         }
  112.         // set layer type based on default for all content objects
  113.         const type = this.defaults.type;
  114.         this.config.type = type;
  115.         this.cache.type = type;
  116.     }
  118.     /**
  119.      * Register the getter and setter for a property and add default values for properties
  120.      * in the exported config object. Existing values are not overwritten
  121.      * 
  122.      * @private
  123.      * @param {object} config 
  124.      */
  125.     addConfig_(config) {
  126.         for (let name in config) {
  127.             if (name in this) delete this[name];
  128.             if (!(name in this.config)) this.config[name] = config[name];
  129.             Object.defineProperty(this, name, {
  130.                 get() { return this.config[name]; },
  131.                 set(val) { this.config[name] = val; },
  132.                 configurable: true
  133.             });
  134.         }
  135.     }
  137.     getConfig_(container) {
  138.         container = JSON.parse(JSON.stringify(container));
  140.         for (let key in container) {
  141.             if (
  142.                 (container[key] === null) ||
  143.                 (((typeof container[key] == "string") || Array.isArray(container[key])) && (container[key].length == 0)) ||
  144.                 ((typeof container[key] == "object") && (Object.keys(container[key]).length == 0))
  146.             ) delete container[key];
  147.         }
  149.         // remove deprecated keys
  150.         if ("settings" in container) delete container.settings;
  151.         if ("filter" in container) delete container.filter;
  152.         // remove default keys
  153.         if (container.active === false) delete container.active;
  154.         if (container.expanded === false) delete container.expanded;
  156.         return container;
  157.     }
  159.     /**
  160.      * create a map layer based on the service options
  161.      * 
  162.      * @param {string} type e.g. "leaflet"
  163.      * @private
  164.      */
  165.     createMapLayer_(type, options) {
  166.         if (type in this.layerProxies_) {
  167.             const proxy = new this.layerProxies_[type](options || {});
  169.             let error = false;
  170.             proxy.on("layerproxy_loading", () => {
  171.                 error = false;
  172.                 this.fire("layer_loading");
  173.             });
  174.             proxy.on("layerproxy_loaded", () => {
  175.                 this.fire("layer_loaded");
  176.                 if (!error) this.removeMessage(NETWORK_LOADING_ERROR);
  177.             });
  178.             proxy.on('layerproxy_error', () => {
  179.                 error = true;
  180.                 this.addMessage(NETWORK_LOADING_ERROR);
  181.             });
  182.             this.mapLayers_[type] = proxy;
  184.             return proxy;
  185.         } else {
  186.             return null;
  187.         }
  188.     }
  190.     /**
  191.      * Helper method to update the mapLayer according to
  192.      * the current state. Might be necessary after switching the map type
  193.      * 
  194.      * @private
  195.      */
  196.     updateMapLayer_() { }
  198.     getConfig() {
  199.         const config = this.getConfig_(this.config);
  200.         if (("catalogId" in config) && ("type" in config)) delete config.type;
  201.         return config;
  202.     }
  204.     getCache() {
  205.         return this.getConfig_(this.cache);
  206.     }
  208.     /**
  209.      * Print the Metadata from this layer as html.
  210.      */
  211.     printMetadata(layer) {
  212.         const container = resolveComplexTemplate(LayerMetadata, {
  213.             layer: layer || this,
  214.             datasetDescription: this?.dataFrame?.description || {},
  215.             sensorMetadata: this?.sensorMetadata || {},
  216.         }, {
  217.             markdown: true,
  218.             postProcess: true
  219.         });
  220.         enhanceHTML(container, {});
  221.         return container;
  222.     }
  224.     /**
  225.      * get the events that can be triggered by buttons in a popup
  226.      */
  227.     getPopupEvents() {
  228.         return this.popupEvents_.slice();
  229.     }
  231.     /**
  232.      * add an event for the buttons in the popup
  233.      */
  234.     addPopupEvent(title, callback) {
  235.         if ((typeof title == "string") && (typeof callback == "function")) {
  236.             this.popupEvents_.push({
  237.                 title: title,
  238.                 callback: callback
  239.             });
  240.         }
  241.     }
  243.     /**
  244.      * returns the map layer proxy for the
  245.      * specific map implementation
  246.      * 
  247.      * @param {string} type 
  248.      * @returns {object} map layer for framework
  249.      */
  250.     getLayerProxy(type) {
  251.         return (type in this.mapLayers_)
  252.             ? this.mapLayers_[type]
  253.             : this.createMapLayer_(type);
  254.     }
  256.     /**
  257.      * enables the map layer for the
  258.      * specific map implementation
  259.      * 
  260.      * @param {string} type 
  261.      */
  262.     enable(type) {
  263.         if (type in this.mapLayers_) {
  264.             this.active = true;
  265.             this.activeLayer_ = this.mapLayers_[type];
  266.             this.updateMapLayer_(type);
  267.             return true;
  268.         }
  270.         return false;
  271.     }
  273.     /**
  274.      * Unset the active state of the layer
  275.      */
  276.     disable() {
  277.         this.active = false;
  278.     }
  280.     /**
  281.      * Returns the Legend Graphic for this layer.
  282.      * May depend on current color scale.
  283.      * 
  284.      * @returns html <img>-tag (null or undefined if there is no legend graphic)
  285.      */
  286.     getLegendGraphic() { }
  288.     /**
  289.      * Set Filter without applying it
  290.      *  
  291.      * @param {object} config generic filter config 
  292.      */
  293.     setFilter(config) {
  294.         this.filter = config;
  295.     }
  297.     /**
  298.      * Apply the defined filter. Uses generic
  299.      * filter syntax and transforms it internally
  300.      */
  301.     applyFilter() { }
  303.     /**
  304.      * Set the style of the layer.
  305.      * 
  306.      * @param {string} styleName style name
  307.      * @returns {boolean} returns true if successful
  308.      */
  309.     setStyle(styleName) { }
  311.     /**
  312.      * Get the active style of the layer.
  313.      */
  314.     getStyle() { }
  316.     /**
  317.      * Get the active colorscale for the layer
  318.      */
  319.     getColorScale() { }
  321.     /**
  322.      * Set the colorscale for the layer
  323.      * 
  324.      * @param colorScale 
  325.      */
  326.     setColorScale(colorScale) { }
  328.     /**
  329.      * Dispose the Layer
  330.      */
  331.     dispose() { }
  333.     /**
  334.      * Get the transparency value
  335.      * 
  336.      * @returns {number} number between 0 and 1
  337.      */
  338.     getOpacity() {
  339.         return this.opacity;
  340.     }
  342.     /**
  343.      * Set the transparency between 0 and 1
  344.      * @param {number} opacity style name
  345.      */
  346.     setOpacity(opacity) {
  347.         this.opacity = opacity;
  348.         this.activeLayer_.setOpacity(opacity);
  349.     }
  351.     /**
  352.      * Reload the Layer on the map
  353.      */
  354.     reload() {
  355.         this.activeLayer_.reload();
  356.     }
  358.     /**
  359.      * Switch the projection for the visualization
  360.      * of the layer. CRS hast to be included in availableCRS.
  361.      * 
  362.      * @param {string} crs target crs code
  363.      */
  364.     setProjection(crs) {
  365.         crs = crs.toUpperCase();
  366.         if (this.availableCrs.includes(crs)) {
  367.             this.crs_ = crs;
  368.             this.activeLayer_.setProjection(crs);
  369.             this.projectionMatches_ = true;
  370.         } else {
  371.             this.projectionMatches_ = false;
  372.         }
  373.         return this.projectionMatches_;
  374.     }
  376.     /**
  377.      * Get the bounding box as an object
  378.      * 
  379.      * @returns {object} { min: {x, y}, max: {x, y}, crs: "CRS:84" }
  380.      */
  381.     getBounds() {
  382.         return {
  383.             min: { y: -90, x: -180 },
  384.             max: { y: 90, x: 180 },
  385.             crs: "CRS:84"
  386.         }
  387.     }
  389.     /**
  390.      * Get all active messages
  391.      * 
  392.      * @returns {object[]} messages
  393.      */
  394.     getMessages() {
  395.         // implementation of layer-specific messages needs to be done in child classes
  396.         return [...this.messages_];
  397.     }
  399.     /**
  400.      * Add a message to the layer
  401.      * @param {object} message 
  402.      */
  403.     addMessage(message) {
  404.         if (this.messages_.indexOf(message) > -1) return;
  405.         this.messages_.push(message);
  406.         this.fire("layer_message", this.getMessages());
  407.     }
  409.     /**
  410.      * Remove a message from the layer
  411.      * @param {object} message 
  412.      */
  413.     removeMessage(message) {
  414.         const index = this.messages_.indexOf(message);
  415.         if (index > -1) {
  416.             this.messages_.splice(index, 1);
  417.             this.fire("layer_message", this.getMessages());
  418.         }
  419.     }
  421.     /**
  422.      * @param {string} attributeField 
  423.      * @returns {string[]} array of unique values
  424.      */
  425.     async getUniqueValues(attributeField) {
  426.         return [];
  427.     }
  429.     /**
  430.      * @returns {string[]} array of attribute names
  431.      */
  432.     getAttributeNames() {
  433.         return Object.keys(this.attributeFields);
  434.     }
  436. }