@nextgis/ngw-map 1.5.1 → 1.8.1

package/lib/ngw-map.esm-browser.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-map; version: 1.5.1; author: NextGIS */
+/** Bundle of @nextgis/ngw-map; version: 1.8.1; author: NextGIS */
 var events = {exports: {}};
 
 var R = typeof Reflect === 'object' ? Reflect : null;
@@ -2197,8 +2197,10 @@ class WebMapLayers extends WebMapMain {
      */
     async fitLayer(layerDef, options) {
         const layer = this.getLayer(layerDef);
-        if (layer && layer.getExtent) {
-            const extent = await layer.getExtent();
+        // TODO: remove backward compatibility for `getExtent`
+        const getBounds = layer && (layer.getBounds || layer.getExtent);
+        if (getBounds) {
+            const extent = await getBounds.call(layer);
             if (extent) {
                 this.fitBounds(extent, options);
             }
@@ -2401,8 +2403,10 @@ class WebMapLayers extends WebMapMain {
             if (opacity !== undefined && opacity <= 1) {
                 this.setLayerOpacity(_adapter, opacity);
             }
-            if (options.fit && _adapter.getExtent) {
-                const extent = await _adapter.getExtent();
+            // TODO: remove backward compatibility for `getExtent`
+            const getBounds = layer && (_adapter.getBounds || _adapter.getExtent);
+            if (options.fit && getBounds) {
+                const extent = await getBounds.call(_adapter);
                 if (extent) {
                     await this.fitBounds(extent);
                 }
@@ -2525,10 +2529,18 @@ class WebMapLayers extends WebMapMain {
         opt.paint = opt.paint || {};
         return this.addLayer(adapter || 'GEOJSON', opt);
     }
-    /** Shortcut for {@link WebMapLayers.addGeoJsonLayer} to initialize adapter with generic types for working in typescript */
+    /** Shortcut for {@link WebMapLayers.addGeoJsonLayer} to create GeoJson adapter with generic types for working in typescript */
     addFeatureLayer(options = {}) {
         return this.addGeoJsonLayer(options);
     }
+    /** Shortcut for {@link WebMapLayers.addLayer} to create TileLayer adapter */
+    addTileLayer(url, options) {
+        return this.addLayer('TILE', { ...options, url });
+    }
+    /** Shortcut for {@link WebMapLayers.addLayer} to create TileLayer adapter */
+    addImageLayer(url, options) {
+        return this.addLayer('IMAGE', { ...options, url });
+    }
     /**
      * Show added layer on the map by it definition.
      */
@@ -2571,11 +2583,11 @@ class WebMapLayers extends WebMapMain {
                 const order = l.options.baselayer ? 0 : l.options.order;
                 // do not show baselayer if another on the map
                 if (l.options.baselayer && this._baselayers.length) {
-                    const anotherVisibleLayerBaseLayer = this._baselayers.find((x) => {
+                    const anotherVisibleBaselayers = this._baselayers.filter((x) => {
                         return x !== l.id && this.isLayerVisible(x);
                     });
-                    if (anotherVisibleLayerBaseLayer) {
-                        await this.hideLayer(anotherVisibleLayerBaseLayer);
+                    for (const bl of anotherVisibleBaselayers) {
+                        await this.hideLayer(bl);
                     }
                 }
                 if (l.showLayer) {
@@ -4402,6 +4414,17 @@ function fetchNgwLayerExtent({ resourceId, connector, cache = true, }) {
         }
     });
 }
+function fetchNgwLayerItemExtent({ resourceId, featureId, connector, cache = true, }) {
+    return connector
+        .get('feature_layer.feature.item_extent', { cache }, { id: resourceId, fid: featureId })
+        .then((resp) => {
+        if (resp) {
+            const { maxLat, maxLon, minLat, minLon } = resp.extent;
+            const extentArray = [minLon, minLat, maxLon, maxLat];
+            return extentArray;
+        }
+    });
+}
 function fetchNgwResourceExtent(item, connector) {
     if (item.webmap) {
         return CancelablePromise.resolve(getNgwWebmapExtent(item.webmap));
@@ -4750,14 +4773,18 @@ async function createGeoJsonAdapter(props) {
             }
             return layer;
         }
+        /** @deprecated use {@link NgwGeoJsonAdapter.getBounds} instead */
         getExtent() {
+            return this.getBounds();
+        }
+        async getBounds() {
             const hasData = this.getLayers && this.getLayers().length;
             if (this.options.strategy === 'BBOX' || hasData) {
                 return fetchNgwResourceExtent(item, connector);
             }
             else {
-                if (super.getExtent) {
-                    return super.getExtent();
+                if (super.getBounds) {
+                    return super.getBounds();
                 }
             }
         }
@@ -4891,10 +4918,10 @@ async function createGeoJsonAdapter(props) {
     return NgwGeoJsonAdapter;
 }
 
-function getLayerAdapterOptions(options, webMap, baseUrl) {
+function ngwApiToAdapterOptions({ options, webMap, baseUrl, }) {
     let adapter = options.adapter || 'IMAGE';
     let url;
-    const layerAdapters = webMap.getLayerAdapters();
+    const layerAdapters = webMap && webMap.getLayerAdapters();
     const isImageAllowed = layerAdapters ? layerAdapters.IMAGE : true;
     const resourceId = options.resource;
     const nd = options.tileNoData ? options.tileNoData : 200;
@@ -4984,10 +5011,10 @@ async function createRasterAdapter({ layerOptions, webMap, connector, item, }) {
             adapter = 'TILE';
         }
     }
-    const adapterClass = webMap.mapAdapter.layerAdapters[adapter];
-    if (adapterClass) {
+    const AdapterClass = webMap.mapAdapter.layerAdapters[adapter];
+    if (AdapterClass) {
         const resourceId = await resourceIdFromLayerOptions(layerOptions, connector);
-        return class Adapter extends adapterClass {
+        return class RasterAdapter extends AdapterClass {
             constructor(map, _options) {
                 var _a;
                 super(map, _options);
@@ -4995,7 +5022,11 @@ async function createRasterAdapter({ layerOptions, webMap, connector, item, }) {
                 // options = {};
                 this.item = item;
                 this.resourceId = resourceId;
-                const opt = getLayerAdapterOptions(layerOptions, webMap, connector.options.baseUrl || '');
+                const opt = ngwApiToAdapterOptions({
+                    options: layerOptions,
+                    webMap,
+                    baseUrl: connector.options.baseUrl || '',
+                });
                 if (opt) {
                     const layerAdapterOptions = {
                         ...opt,
@@ -5238,6 +5269,9 @@ class BaseProperty {
     getParent() {
         return this.item.tree.getParent();
     }
+    getChildren() {
+        return this.item.tree.getChildren();
+    }
     isGroup() {
         const children = this.item.tree.getDescendants();
         return children.length;
@@ -5352,6 +5386,24 @@ class CheckProperty extends BaseProperty {
                 return property && property.get();
             }));
     }
+    block(options) {
+        this._blocked = true;
+        this._block(options);
+    }
+    unBlock(options) {
+        this._blocked = false;
+        if (this.getValue()) {
+            this._unBlock(options);
+        }
+    }
+    blockChild(options) {
+        this.item.tree
+            .getDescendants()
+            .forEach((x) => this._blockChild(x, options));
+    }
+    unblockChild(options) {
+        this.item.tree.getChildren().forEach((x) => this._unBlockChild(x, options));
+    }
     _prepareValue(value) {
         return value;
     }
@@ -5373,30 +5425,12 @@ class CheckProperty extends BaseProperty {
             this.unblockChild(options);
         }
     }
-    block(options) {
-        this._blocked = true;
-        this._block(options);
-    }
     _block(options) {
         this._turnOff(options);
     }
-    unBlock(options) {
-        this._blocked = false;
-        if (this.getValue()) {
-            this._unBlock(options);
-        }
-    }
     _unBlock(options) {
         this._turnOn(options);
     }
-    blockChild(options) {
-        this.item.tree
-            .getDescendants()
-            .forEach((x) => this._blockChild(x, options));
-    }
-    unblockChild(options) {
-        this.item.tree.getChildren().forEach((x) => this._unBlockChild(x, options));
-    }
     _blockChild(item, options) {
         const prop = item.properties &&
             item.properties.property(this.name);
@@ -5454,22 +5488,22 @@ class ItemProperties {
     }
     _setPropertyHandler(propOpt) {
         const handlers = ItemProperties.handlers;
-        let handler = propOpt.handler;
-        if (!handler && propOpt.type) {
+        let Handler = propOpt.handler;
+        if (!Handler && propOpt.type) {
             switch (propOpt.type) {
                 case 'boolean':
-                    handler = handlers.CheckProperty;
+                    Handler = handlers.CheckProperty;
                     break;
                 case 'string':
-                    handler = handlers.BaseProperty;
+                    Handler = handlers.BaseProperty;
                     break;
                 default:
-                    handler = handlers.BaseProperty;
+                    Handler = handlers.BaseProperty;
             }
         }
-        if (handler && propOpt.name) {
+        if (Handler && propOpt.name) {
             const options = { ...(propOpt || {}) };
-            this._properties[propOpt.name] = new handler(propOpt.name, this.item, options);
+            this._properties[propOpt.name] = new Handler(propOpt.name, this.item, options);
             this._propertiesList.push(propOpt.name);
         }
     }
@@ -5525,6 +5559,55 @@ class Item {
     }
 }
 
+class WebmapLayerOpacityPropertyHandler extends BaseProperty {
+    getProperty() {
+        const layer = this.item.layer;
+        if (layer) {
+            return layer && layer.options && layer.options.opacity !== undefined
+                ? layer.options.opacity
+                : 1;
+        }
+        return 1;
+    }
+    update(value, options) {
+        options = options || {};
+        if (this.isGroup()) {
+            this._value = this._prepareValue(value, options);
+            const children = this.getChildren();
+            for (const child of children) {
+                const property = child.properties.property(this.name);
+                if (property) {
+                    if (options.propagation) {
+                        property.set(value, options);
+                    }
+                    else {
+                        property.update(property.get(), options);
+                    }
+                }
+            }
+        }
+        const layer = this.item.layer;
+        if (layer) {
+            const parents = this.getParents();
+            const coef = parents.reduce((s, x) => {
+                const prop = x.properties.property(this.name);
+                const multiplier = prop ? prop.getValue() : 1;
+                return s * multiplier;
+            }, 1);
+            const val = value * coef;
+            this.item.webMap.setLayerOpacity(layer, this._prepareValue(val));
+        }
+    }
+    _prepareValue(value, options) {
+        if (options && options.propagation && this.isGroup()) {
+            return 1;
+        }
+        // value = Number(value);
+        // return value < 0.1 ? 0.1 : value;
+        return Number(value);
+    }
+}
+
 class NgwWebmapItem extends Item {
     constructor(webMap, item, options, connector, parent, noInit) {
         super({ ...NgwWebmapItem.options, ...options });
@@ -5606,6 +5689,9 @@ class NgwWebmapItem extends Item {
     fit() {
         if (this.item.item_type === 'layer') ;
     }
+    getLayer() {
+        return this.layer;
+    }
     getItemOptions(item) {
         const transparency = item.item_type === 'layer' && item.layer_transparency;
         const opacity = typeof transparency === 'number' ? (100 - transparency) / 100 : undefined;
@@ -5707,6 +5793,10 @@ NgwWebmapItem.options = {
                 }
             },
         },
+        {
+            name: 'opacity',
+            handler: WebmapLayerOpacityPropertyHandler,
+        },
     ],
 };
 
@@ -5893,17 +5983,26 @@ class NgwWebmapLayerAdapter {
         delete this.response;
         delete this._webmapLayersIds;
     }
-    showLayer() {
+    async showLayer() {
+        if (this.layer && this.layer.properties) {
+            return this.layer.properties.property('visibility').set(true);
+        }
+    }
+    async hideLayer() {
         if (this.layer && this.layer.properties) {
-            this.layer.properties.property('visibility').set(true);
+            return this.layer.properties.property('visibility').set(false);
         }
     }
-    hideLayer() {
+    async setOpacity(val) {
         if (this.layer && this.layer.properties) {
-            this.layer.properties.property('visibility').set(false);
+            return this.layer.properties.property('opacity').set(val);
         }
     }
+    /** @deprecated use {@link NgwWebmapLayerAdapter.getBounds} instead */
     getExtent() {
+        return this.getBounds();
+    }
+    getBounds() {
         const webmap = this.response && this.response.webmap;
         if (webmap) {
             return getNgwWebmapExtent(webmap);
@@ -6064,10 +6163,14 @@ class NgwWebmapLayerAdapter {
                 item.resourceId = resourceId;
                 item.updateWmsParams = (params) => updateImageParams(params, resourceId);
                 const adapter = item.layer_adapter.toUpperCase();
-                const layerAdapterOptions = getLayerAdapterOptions({
-                    adapter,
-                    resource: resourceId,
-                }, webMap, this.options.connector.options.baseUrl || '');
+                const layerAdapterOptions = ngwApiToAdapterOptions({
+                    options: {
+                        adapter,
+                        resource: resourceId,
+                    },
+                    webMap,
+                    baseUrl: this.options.connector.options.baseUrl || '',
+                });
                 item = {
                     ...item,
                     ...layerAdapterOptions,
@@ -6117,12 +6220,16 @@ async function createWebMapAdapter({ layerOptions: options, webMap, connector, }
 }
 
 class NgwResource {
+    /** @deprecated use {@link NgwResource.getBounds} instead */
     async getExtent() {
+        return this.getBounds();
+    }
+    async getBounds() {
         if (this._extent) {
             return this._extent;
         }
         if (this.item) {
-            this._extent = await fetchNgwResourceExtent(this.item, this.connector).then();
+            this._extent = await fetchNgwResourceExtent(this.item, this.connector);
             return this._extent;
         }
     }
@@ -6442,7 +6549,7 @@ const vectorLayerGeomToPaintTypeAlias = {
     MULTILINESTRINGZ: 'line',
     MULTIPOLYGONZ: 'polygon',
 };
-function addNgwLayer(options, webMap, connector) {
+function createNgwLayerAdapter(options, webMap, connector) {
     const headers = connector.getAuthorizationHeaders();
     if (headers) {
         options.headers = headers;
@@ -6558,11 +6665,11 @@ class IdentifyItem {
     constructor(options) {
         const f = options.feature;
         this.id = f.id;
+        this.geom = f.geom;
         this.label = f.label;
-        this.layerId = f.layerId;
         this.parent = f.parent;
         this.fields = f.fields;
-        this.geom = f.geom;
+        this.layerId = f.layerId;
         this.connector = options.connector;
     }
     identify(options = {}) {
@@ -6592,6 +6699,16 @@ class IdentifyItem {
             return this._resource.feature_layer;
         });
     }
+    getBounds() {
+        if (this._extent) {
+            return CancelablePromise.resolve(this._extent);
+        }
+        return fetchNgwLayerItemExtent({
+            connector: this.connector,
+            featureId: this.id,
+            resourceId: this.layerId,
+        });
+    }
     geojson() {
         if (this._geojson) {
             return CancelablePromise.resolve(this._geojson);
@@ -7037,7 +7154,7 @@ class NgwMap extends WebMap {
                         options.adapterOptions.setViewDelay = this.options.setViewDelay;
                     }
                 }
-                const adapter = addNgwLayer(options, this, this.connector);
+                const adapter = createNgwLayerAdapter(options, this, this.connector);
                 const adapterOpts = {
                     visibility: true,
                     // TODO: do not merge options, use only `adapterOptions`
@@ -7184,10 +7301,10 @@ class NgwMap extends WebMap {
         }
         const ngwLayer = id && this._ngwLayers[id];
         if (ngwLayer) {
-            if (ngwLayer.layer.getExtent) {
-                const extent = await ngwLayer.layer.getExtent();
-                if (extent) {
-                    this.fitBounds(extent, options);
+            if (ngwLayer.layer.getBounds) {
+                const bounds = await ngwLayer.layer.getBounds();
+                if (bounds) {
+                    this.fitBounds(bounds, options);
                 }
             }
             else {