【fix】mapboxgl 多个三维专题图叠加高亮报错的问题（ICL-1183） review by xiongjj

Author: songyumeng

src/mapboxgl/overlay/theme/Theme3DLayer.js

@@ -116,6 +116,7 @@ export class Theme3DLayer {
          * @default 'bottom-right'
          */
         this.legendPosition = 'bottom-right';
+        this._highlightLayerId = `${this.id}-highlightLayer`;
         this._extend(this, layerOptions);
     }
 
@@ -241,10 +242,9 @@ export class Theme3DLayer {
             this.map.removeLayer(layerId);
         }
         //移除高亮图层
-        var highlightLayerId = "highlightLayer";
-        if (this.map.getLayer(highlightLayerId)) {
+        if (this.map.getLayer(this._highlightLayerId)) {
             this._selectFeatureId = null;
-            this.map.removeLayer(highlightLayerId);
+            this.map.removeLayer(this._highlightLayerId );
         }
 
         //移除图例
@@ -349,7 +349,7 @@ export class Theme3DLayer {
         }
         var map = this.map;
         map.addLayer({
-            'id': 'highlightLayer',
+            'id': this._highlightLayerId,
             'type': 'fill-extrusion',
             'source': this.sourceId,
             'paint': this.getHighlightStyleOptions(),
@@ -379,12 +379,12 @@ export class Theme3DLayer {
             return;
         }
         me._selectFeatureId = id;
-        map.setFilter("highlightLayer", ['==', '$id', me._selectFeatureId]);
+        map.setFilter(me._highlightLayerId, ['==', '$id', me._selectFeatureId]);
     }
 
     _clearHighlight() {
         if (this.map) {
-            this.map.setFilter("highlightLayer", ["in", "$id", ""]);
+            this.map.setFilter(this._highlightLayerId, ["in", "$id", ""]);
         }
     }
 

test/mapboxgl/overlay/RangeTheme3DLayerSpec.js

@@ -111,6 +111,7 @@ describe('mapboxgl_RangeTheme3DLayer', () => {
                         expect(themeLayer.heightField).toBe("POP_DENSITY99");
                         expect(themeLayer.heightStops.length).toEqual(3);
                         expect(themeLayer.id).toBe("range3DThemeLayer");
+                        expect(themeLayer._highlightLayerId).toBe("range3DThemeLayer-highlightLayer");
                         expect(themeLayer.highlight.color).toBe("#058e94");
                         expect(themeLayer.legendTitle).toBe("人口密度");
                         var layerStyleOptions = themeLayer.getLayerStyleOptions();

test/mapboxgl/overlay/UniqueTheme3DLayerSpec.js

@@ -107,6 +107,7 @@ describe('mapboxgl_UniqueTheme3DLayer', () => {
                         expect(themeLayer.height).toEqual(6000);
                         expect(themeLayer.heightField).toBe("height");
                         expect(themeLayer.id).toBe("uniqueTheme3DLayer");
+                        expect(themeLayer._highlightLayerId).toBe("uniqueTheme3DLayer-highlightLayer");
                         expect(themeLayer.highlight.color).toBe("#ADA91E");
                         expect(themeLayer.legendTitle).toBe("土地利用类型");
                         var layerStyleOptions = themeLayer.getLayerStyleOptions();