[update] Mapboxgl。Map新增三个接口

MyShallowTime · MyShallowTime · commit 0c33df1d163a · 2023-07-05T18:41:37.000+08:00
updateSymbol、setSymbolProperty、getSymbolProperty

review by zhaoq
diff --git a/src/mapboxgl/overlay/symbol/MapExtendSymbol.js b/src/mapboxgl/overlay/symbol/MapExtendSymbol.js
@@ -156,11 +156,41 @@ function MapExtendSymbol(){
   /**
    * 删除符号
    * @param {string} id
-   * @param {object} symbol
    */
   mapboxgl.Map.prototype.removeSymbol = function (id) {
     getSymbolHandler(this).removeSymbol(id);
   };
+  
+  /**
+   * 更新符号
+   * @param {string} id
+   * @param {object} symbol
+   */
+  mapboxgl.Map.prototype.updateSymbol = function (id, symbol) {
+    getSymbolHandler(this).updateSymbol(id, symbol);
+  };
+
+  /**
+   * 设置symbol属性值
+   * @param {string} id 
+   * @param {number} index 
+   * @param {string} name 
+   * @param {any} value
+   */
+  mapboxgl.Map.prototype.setSymbolProperty = function (id, index, name, value) {
+    getSymbolHandler(this).setSymbolProperty(id, index, name, value);
+  };
+
+  /**
+   * 获取symbol的属性值
+   * @param {string} id 
+   * @param {number} index 
+   * @param {string} name 
+   * @returns {any}
+   */
+  mapboxgl.Map.prototype.getSymbolProperty = function (id, index, name) {
+    return getSymbolHandler(this).getSymbolProperty(id, index, name);
+  };
 
   mapboxgl.Map.prototype.getStyle = function () {
     if (this.style) {
@@ -175,14 +205,14 @@ function MapExtendSymbol(){
     }
     getSymbolHandler(this).setFilter(layerId, filter, options);
     return this._update(true);
-  }
+  };
 
   mapboxgl.Map.prototype.getFilter = function (layerId) {
     if (this.style.getLayer(layerId)) {
       return this.style.getFilter(layerId);
     }
     return getSymbolHandler(this).getFilter(layerId);
-  }
+  };
 
   mapboxgl.Map.prototype.setLayerZoomRange = function (layerId, minzoom, maxzoom) {
     if (this.style.getLayer(layerId)) {
@@ -191,7 +221,7 @@ function MapExtendSymbol(){
     }
     getSymbolHandler(this).setLayerZoomRange(layerId, minzoom, maxzoom);
     return this._update(true);
-  }
+  };
 
   mapboxgl.Map.prototype.setPaintProperty = function (layerId, name, value, options) {
     if (this.style.getLayer(layerId)) {
@@ -200,22 +230,21 @@ function MapExtendSymbol(){
     }
     getSymbolHandler(this).setPaintProperty(layerId, name, value, options);
     return this._update(true);
-  }
+  };
 
   mapboxgl.Map.prototype.getPaintProperty = function (layerId, name) {
     if (this.style.getLayer(layerId)) {
       return this.style.getPaintProperty(layerId, name);
     }
     return getSymbolHandler(this).getPaintProperty(layerId, name);
-  }
+  };
 
   mapboxgl.Map.prototype.getLayoutProperty = function (layerId, name) {
     if (this.style.getLayer(layerId)) {
       return this.style.getLayoutProperty(layerId, name);
     }
     return getSymbolHandler(this).getLayoutProperty(layerId, name);
-  }
-
+  };
 
   /**
    * @function WebSymbol.prototype.getSymbol
diff --git a/src/mapboxgl/overlay/symbol/SymbolHandler.js b/src/mapboxgl/overlay/symbol/SymbolHandler.js
@@ -5,7 +5,7 @@ import { Util } from "@supermap/iclient-common/commontypes/Util";
 import CompositeSymbolRender from "./CompositeSymbolRender";
 import SingleSymbolRender from "./SingleSymbolRender";
 import SymbolManager from "./SymbolManager";
-import { getImageKey, isMapboxExpression, isMultiSymbol, validateSymbol } from "./SymbolUtil";
+import { getImageKey, isMapboxExpression, isMultiSymbol, isPaintKey, validateSymbol } from "./SymbolUtil";
 
 /**
  * 符号图层管理器
@@ -385,7 +385,7 @@ class SymbolHandler {
      */
     getFilter(layerId) {
         const realLayerId = this.getFirstLayerId(layerId);
-        if(this.map.style.getLayer(realLayerId)) {
+        if (this.map.style.getLayer(realLayerId)) {
             return this.map.style.getFilter(realLayerId);
         }
     }
@@ -458,6 +458,110 @@ class SymbolHandler {
         const realLayerId = this.getFirstLayerId(layerId);
         return this.map.style.getLayoutProperty(realLayerId, name);
     }
+
+    /**
+     * 遍历this._layerSymbols， 更新使用到symbolId的图层
+     * @param {string} symbolId 
+     */
+    updateLayerSymbol(symbolId) {
+        Object.keys(this._layerSymbols).forEach(layerId => {
+            const symbol = this._layerSymbols[layerId];
+            if (symbol.includes(symbolId)) {
+                this.setSymbol(layerId, symbol);
+            }
+        })
+    }
+
+    /**
+     * 更新符号
+     * @param {string} symbolId 
+     * @param {object | array} symbol 
+     */
+    updateSymbol(symbolId, symbol) {
+        // symbol不存在
+        if (!this.symbolManager.getSymbol(symbolId)) {
+            return this.map.fire('error', {
+                error: new Error(`Symbol "${symbolId}" could not be loaded. Please make sure you have added the symbol with map.addSymbol().`)
+            });
+        }
+        if (validateSymbol(symbol)) {
+            // 更新symbol
+            this.symbolManager.addSymbol(symbolId, symbol);
+            this.updateLayerSymbol(symbolId);
+        } else {
+            return this.map.fire('error', {
+                error: new Error('Symbol is not supported expressions.')
+            });
+        }
+    }
+
+    /**
+     * 设置symbol属性值
+     * @param {string} symbolId 
+     * @param {number} symbolIndex 
+     * @param {string} name 
+     * @param {any} value
+     */
+    setSymbolProperty(symbolId, symbolIndex, name, value) {
+        const symbol = this.symbolManager.getSymbol(symbolId);
+        // symbol不存在
+        if (!symbol) {
+            return this.map.fire('error', {
+                error: new Error(`Symbol "${symbolId}" could not be loaded. Please make sure you have added the symbol with map.addSymbol().`)
+            });
+        }
+        // value不支持表达式
+        if (isMapboxExpression(value)) {
+            return this.map.fire('error', {
+                error: new Error('Symbol value is not supported expressions.')
+            });
+        }
+        const paintOrLayout = isPaintKey(name) ? 'paint' : 'layout';
+        if (symbol.length > 0) {
+            const symbolChild = symbol[symbolIndex];
+            if (!symbolChild) {
+                return this.map.fire('error', {
+                    error: new Error(`symbol[${symbolIndex}] does not exist.`)
+                });
+            }
+            if (!symbolChild[paintOrLayout]) {
+                symbolChild[paintOrLayout] = {};
+            }
+            Object.assign(symbolChild[paintOrLayout], { [name]: value });
+        } else {
+            if (!symbol[paintOrLayout]) {
+                symbol[paintOrLayout] = {};
+            }
+            Object.assign(symbol[paintOrLayout], { [name]: value });
+        }
+        // 更新symbol
+        this.symbolManager.addSymbol(symbolId, symbol);
+        this.updateLayerSymbol(symbolId);
+    }
+
+    /**
+     * 获取symbol的属性值
+     * @param {string} symbolId 
+     * @param {number} symbolIndex 
+     * @param {string} name 
+     * @returns {any}
+     */
+    getSymbolProperty(symbolId, symbolIndex, name) {
+        const symbol = this.symbolManager.getSymbol(symbolId);
+        // symbol不存在
+        if (!symbol) {
+            this.map.fire('error', {
+                error: new Error(`Symbol "${symbolId}" could not be loaded. Please make sure you have added the symbol with map.addSymbol().`)
+            });
+            return;
+        }
+        const paintOrLayout = isPaintKey(name) ? 'paint' : 'layout';
+        if (symbol.length > 0) {
+            return symbol[symbolIndex] && symbol[symbolIndex][paintOrLayout] && symbol[symbolIndex][paintOrLayout][name];
+        } else {
+            return symbol[paintOrLayout] && symbol[paintOrLayout][name];
+        }
+    }
 }
 
 export default SymbolHandler;
diff --git a/src/mapboxgl/overlay/symbol/SymbolUtil.js b/src/mapboxgl/overlay/symbol/SymbolUtil.js
@@ -173,4 +173,39 @@ export function validateSymbol(symbol) {
     return symbolInfo.every((s) => {
         return validateStyleKey(s.paint || {}) && validateStyleKey(s.layout || {});
     });
+}
+
+export const isPaintKey = (key) => {
+    return [
+        'icon-color',
+        'icon-opacity',
+        'icon-translate',
+        'line-opacity',
+        'line-blur',
+        'line-translate',
+        'line-color',
+        'line-width',
+        'line-offset',
+        'line-dasharray',
+        'line-pattern',
+        'fill-color',
+        'fill-opacity',
+        'fill-pattern',
+        'fill-outline-color',
+        'text-color',
+        'text-halo-blur',
+        'text-halo-color',
+        'text-halo-width',
+        'text-opacity',
+        'text-translate',
+        'text-translate-anchor',
+        'circle-blur',
+        'circle-color',
+        'circle-opacity',
+        'circle-translate',
+        'circle-radius',
+        'circle-stroke-color',
+        'circle-stroke-opacity',
+        'circle-stroke-width'
+    ].includes(key);
 }
diff --git a/src/mapboxgl/overlay/symbol/WebSymbol.js b/src/mapboxgl/overlay/symbol/WebSymbol.js
@@ -75,7 +75,7 @@ import MapExtendSymbol from './MapExtendSymbol';
 * 
 * 
 * ## mapboxgl.Map.prototype.hasSymbol
-* 检查是否存在特定 ID 的符号。
+* 检查是否存在指定 ID 的符号。
 * 
 * 参数名称			     |类型			 |描述  
 * :----			    |:---		    |:---	
@@ -88,7 +88,7 @@ import MapExtendSymbol from './MapExtendSymbol';
 * 
 * 
 * ## mapboxgl.Map.prototype.removeSymbol
-* 删除特定 ID 的符号。
+* 删除指定 ID 的符号。
 * 
 * 参数名称			     |类型			 |描述  
 * :----				|:---		    |:---	
@@ -100,6 +100,56 @@ import MapExtendSymbol from './MapExtendSymbol';
 * ```
 * 
 * 
+* ## mapboxgl.Map.prototype.updateSymbol
+* 更新指定 ID 的符号。
+* 
+* 参数名称			     |类型			 |描述  
+* :----				|:---		    |:---	
+* id			      |string		    |已经添加的符号ID
+* |symbol			  |object	      |由Mapbox Layers中的[paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)、[layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）组成的符号对象|||
+* |             |             |参数名称			 |类型			     |描述  |
+* |             |             |paint				|object		      |Mapbox Layers [paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)|
+* |             |             |layout			  |object	        |Mapbox Layers [layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）|
+* 
+* **Example**
+* ```
+* map.updateSymbol('point-1', symbol);
+* ```
+* 
+* 
+* ## mapboxgl.Map.prototype.setSymbolProperty
+* 设置指定ID符号的属性值。
+* 
+* 参数名称			   |类型			  |描述  
+* :----				    |:---		      |:---	
+* id			        |string		    |符号ID
+* index			      |number		    |符号数组的index， 符号不是数组的设置为null
+* name			      |string		    |属性名称
+* value			      |any		      |属性值
+* 
+* **Example**
+* ```
+* map.setSymbolProperty('point-1', null, "icon-color", "black");
+* map.setSymbolProperty('line-962529', 0, "line-width", 10);
+* ```
+* 
+* 
+* ## mapboxgl.Map.prototype.getSymbolProperty
+* 获取指定ID符号的属性值。
+* 
+* 参数名称			   |类型			  |描述  
+* :----				    |:---		      |:---	
+* id			        |string		    |符号ID
+* index			      |number		    |符号数组的index， 符号不是数组的设置为null
+* name			      |string		    |属性名称
+* 
+* **Example**
+* ```
+* map.getSymbolProperty('point-1', null, "icon-color");
+* map.getSymbolProperty('line-962529', 0, "line-width");
+* ```
+* 
+* 
 * ## 扩展 [Mapbox Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/)
 * 在[Mapbox Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) 属性的基础上新增了symbol 属性， 指定符号ID 或者 [符号表达式](#expression)。
 * 
diff --git a/test/mapboxgl/overlay/symbol/MapExtendSymbolSpec.js b/test/mapboxgl/overlay/symbol/MapExtendSymbolSpec.js
@@ -251,5 +251,24 @@ describe('MapExtendSymbol', () => {
         expect(map.style.setPaintProperty).toHaveBeenCalled();
         expect(map.style.getPaintProperty).toHaveBeenCalled();
     });
-
+    it('map.updateSymbol', () => {
+        spyOn(map.symbolHandler, 'updateSymbol');
+        map.updateSymbol("line-1", {
+            paint: {
+                "line-width": 10
+            }
+        });
+        expect(map.symbolHandler.updateSymbol).toHaveBeenCalled();
+    });
+    it('map.setSymbolProperty', () => {
+        spyOn(map.symbolHandler, 'setSymbolProperty');
+        map.setSymbolProperty("line-1", 0, "line-width", 5);
+        expect(map.symbolHandler.setSymbolProperty).toHaveBeenCalled();
+    });
+    it('map.getSymbolProperty', () => {
+        spyOn(map.symbolHandler, 'getSymbolProperty').and.returnValue(5);
+        const value = map.getSymbolProperty("line-1", 0, "line-width");
+        expect(map.symbolHandler.getSymbolProperty).toHaveBeenCalled();
+        expect(value).toBe(5);
+    });
 });
diff --git a/test/mapboxgl/overlay/symbol/SymbolHandlerSpec.js b/test/mapboxgl/overlay/symbol/SymbolHandlerSpec.js
