[feature] 扩展map的on、off、once事件支持symbol图层

MyShallowTime · MyShallowTime · commit 9f878607dcbc · 2023-07-13T16:30:13.000+08:00
[update] map.addLayer接口判断是否已经添加过组合图层

review by zhaoq
diff --git a/src/mapboxgl/overlay/symbol/CompositeSymbolRender.js b/src/mapboxgl/overlay/symbol/CompositeSymbolRender.js
@@ -23,7 +23,7 @@ class CompositeSymbolRender {
      */
     addLayer(layer, symbol, before) {
         symbol.forEach((style) => {
-            const id = Util.createUniqueID(`${layer.id}_`);
+            const id = Util.createUniqueID(`${layer.id}_compositeLayer_`);
             this.singleSymbol.addLayer({ ...layer, id }, style, before);
             this.addLayerId(layer.id, id);
         })
diff --git a/src/mapboxgl/overlay/symbol/MapExtendSymbol.js b/src/mapboxgl/overlay/symbol/MapExtendSymbol.js
@@ -26,8 +26,15 @@ function MapExtendSymbol(){
   if (mapboxgl.Map.prototype.addLayerBySymbolBak === undefined) {
     mapboxgl.Map.prototype.addLayerBySymbolBak = mapboxgl.Map.prototype.addLayer;
     mapboxgl.Map.prototype.addLayer = function (layer, before) {
+      const symbolHandler = getSymbolHandler(this);
+      if(symbolHandler.getLayerIds(layer.id).length > 0) {
+        this.fire('error', {
+          error: new Error('A layer with this id already exists.')
+        });
+        return;
+      }
       if (layer.symbol) {
-        getSymbolHandler(this).addLayer(layer, before);
+        symbolHandler.addLayer(layer, before);
         return this;
       }
       this.addLayerBySymbolBak(layer, before);
@@ -253,6 +260,42 @@ function MapExtendSymbol(){
     }
     return getSymbolHandler(this).getLayoutProperty(layerId, name);
   };
+  
+  if (mapboxgl.Map.prototype.onBak === undefined) {
+    mapboxgl.Map.prototype.onBak = mapboxgl.Map.prototype.on;
+    mapboxgl.Map.prototype.on = function (type, layerId, listener) {
+      if (listener === undefined || this.style.getLayer(layerId)) {
+        return this.onBak(type, layerId, listener);
+      }
+      const layerIds = getSymbolHandler(this).getLayerIds(layerId);
+      layerIds.forEach(id => this.onBak(type, id, listener));
+      return this;
+    };
+  }
+  
+  if (mapboxgl.Map.prototype.onceBak === undefined) {
+    mapboxgl.Map.prototype.onceBak = mapboxgl.Map.prototype.once;
+    mapboxgl.Map.prototype.once = function (type, layerId, listener) {
+      if (listener === undefined || this.style.getLayer(layerId)) {
+        return this.onceBak(type, layerId, listener);
+      }
+      const layerIds = getSymbolHandler(this).getLayerIds(layerId);
+      layerIds.forEach(id => this.onceBak(type, id, listener));
+      return this;
+    };
+  }
+  
+  if (mapboxgl.Map.prototype.offBak === undefined) {
+    mapboxgl.Map.prototype.offBak = mapboxgl.Map.prototype.off;
+    mapboxgl.Map.prototype.off = function (type, layerId, listener) {
+      if (listener === undefined || this.style.getLayer(layerId)) {
+        return this.offBak(type, layerId, listener);
+      }
+      const layerIds = getSymbolHandler(this).getLayerIds(layerId);
+      layerIds.forEach(id => this.offBak(type, id, listener));
+      return this;
+    };
+  }
 
   /**
    * @function WebSymbol.prototype.getSymbol
diff --git a/src/mapboxgl/overlay/symbol/SymbolHandler.js b/src/mapboxgl/overlay/symbol/SymbolHandler.js
@@ -85,6 +85,7 @@ class SymbolHandler {
         if (layer.filter) {
             filter.push(layer.filter);
         }
+        const defaultFilter = [];
         const expression = layer.symbol.slice(2);
         expression.forEach((r, index) => {
             if (index % 2 === 1) {
@@ -98,8 +99,16 @@ class SymbolHandler {
                         ]
                     ], symbol: r
                 });
+                defaultFilter.push([
+                    "!=",
+                    layer.symbol[1][1],
+                    expression[index - 1]
+                ]);
             } else if (index === expression.length - 1) {
-                layers.unshift({ ...layer, symbol: r });
+                layers.unshift({ ...layer, "filter": [
+                    ...filter,
+                    ...defaultFilter
+                ], symbol: r });
             }
         });
         return layers;
@@ -116,6 +125,7 @@ class SymbolHandler {
         if (layer.filter) {
             filter.push(layer.filter);
         }
+        const defaultFilter = [];
         const expression = layer.symbol.slice(1);
         expression.forEach((r, index) => {
             if (index % 2 === 1) {
@@ -125,8 +135,12 @@ class SymbolHandler {
                         expression[index - 1]
                     ], symbol: r
                 });
+                defaultFilter.push(['!', expression[index - 1]])
             } else if (index === expression.length - 1) {
-                layers.unshift({ ...layer, symbol: r });
+                layers.unshift({ ...layer, "filter": [
+                    ...filter,
+                    ...defaultFilter
+                ], symbol: r });
             }
         });
         return layers;
@@ -153,7 +167,7 @@ class SymbolHandler {
             });
         }
         layers.forEach((l) => {
-            l.id = Util.createUniqueID(`${layer.id}_`);
+            l.id = Util.createUniqueID(`${layer.id}_compositeLayer_`);
             this.compositeSymbolRender.addLayerId(layer.id, l.id);
             this.addLayer(l, before);
         });
diff --git a/test/mapboxgl/overlay/symbol/MapExtendSymbolSpec.js b/test/mapboxgl/overlay/symbol/MapExtendSymbolSpec.js
@@ -208,6 +208,23 @@ describe('MapExtendSymbol', () => {
         expect(layer).not.toBeNull();
     });
   
+    it('map.addLayer exists layerID', () => {
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
+        spyOn(map.symbolHandler, 'addLayer');
+        spyOn(map, 'addLayerBySymbolBak');
+        const mylayer = {
+            "id": "PopDensity_P@Population",
+            "source": "全国人口密度空间分布图",
+            "source-layer": "PopDensity_R@Population",
+            "type": "symbol",
+            "symbol": "start"
+        };
+        map.addLayer(mylayer);
+        expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
+        expect(map.symbolHandler.addLayer).not.toHaveBeenCalled();
+        expect(map.addLayerBySymbolBak).not.toHaveBeenCalled();
+    });
+  
     it('setFilter', () => {
         spyOn(map.style, 'setFilter');
         spyOn(map.style, 'getFilter')
@@ -281,4 +298,65 @@ describe('MapExtendSymbol', () => {
         expect(map.symbolHandler.getSymbol).toHaveBeenCalled();
         expect(value.paint["icon-color"]).toBe("red");
     });
+    it('map.on', () => {
+        spyOn(map, 'onBak');
+        spyOn(map.style, 'getLayer').and.returnValue({
+            id: "point"
+        });
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
+        const listnener = () => {};
+        map.on("click", "point", listnener);
+        expect(map.onBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
+    });
+    it('map.on getLayerIds', () => {
+        spyOn(map, 'onBak');
+        spyOn(map.style, 'getLayer').and.returnValue(undefined);
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
+        map.on("click", "point", () => {});
+        expect(map.onBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
+    });
+    it('map.once', () => {
+        spyOn(map, 'onceBak');
+        spyOn(map.style, 'getLayer').and.returnValue({
+            id: "point"
+        });
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
+        map.once("click", "point", () => {});
+        expect(map.onceBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
+    });
+    it('map.once getLayerIds', () => {
+        spyOn(map, 'onceBak');
+        spyOn(map.style, 'getLayer').and.returnValue(undefined);
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
+        map.once("click", "point", () => {});
+        expect(map.onceBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
+    });
+    it('map.off', () => {
+        spyOn(map, 'offBak');
+        spyOn(map.style, 'getLayer').and.returnValue({
+            id: "point"
+        });
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
+        map.off("click", "point", () => {});
+        expect(map.offBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
+    });
+    it('map.off getLayerIds', () => {
+        spyOn(map, 'offBak');
+        spyOn(map.style, 'getLayer').and.returnValue(undefined);
+        spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
+        map.off("click", "point", () => {});
+        expect(map.offBak).toHaveBeenCalled();
+        expect(map.style.getLayer).toHaveBeenCalled();
+        expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
+    });
 });
