【fix】overlaymanager 原型链; ISVJ-8261

xiongjiaojiao · xiongjiaojiao · commit 24fb1b3a1968 · 2024-05-23T18:15:59.000+08:00
diff --git a/src/mapboxgl/core/MapExtend.js b/src/mapboxgl/core/MapExtend.js
@@ -22,7 +22,9 @@ export var MapExtend = (function () {
       this.beforeLoadBak(id, options);
     };
   }
-  mapboxgl.Map.prototype.overlayLayersManager = {};
+  mapboxgl.Map = class Map extends mapboxgl.Map {
+    overlayLayersManager = {};
+  }
   if (mapboxgl.Map.prototype.addLayerBak === undefined) {
     mapboxgl.Map.prototype.addLayerBak = mapboxgl.Map.prototype.addLayer;
     mapboxgl.Map.prototype.addLayer = function (layer, before) {
@@ -89,13 +91,22 @@ export var MapExtend = (function () {
 
   mapboxgl.Map.prototype.removeLayer = function (id) {
     if (this.overlayLayersManager[id]) {
+     const layer = this.overlayLayersManager[id];
       delete this.overlayLayersManager[id];
+      if (layer.type !== 'custom') {
+       removeLayer(layer);
+       return this;
+     }
     }
     this.style.removeLayer(id);
     this._update(true);
     return this;
   };
 
+  function removeLayer(layer) {
+    layer.removeFromMap && layer.removeFromMap();
+  }
+
   //目前扩展的overlayer，只支持显示或隐藏图层操作
   mapboxgl.Map.prototype.setLayoutProperty = function (layerID, name, value) {
     if (this.overlayLayersManager[layerID]) {
diff --git a/src/maplibregl/core/MapExtend.js b/src/maplibregl/core/MapExtend.js
@@ -9,7 +9,9 @@ import maplibregl from 'maplibre-gl';
   * @private
   */
  export var MapExtend = (function () {
-   maplibregl.Map.prototype.overlayLayersManager = {};
+   maplibregl.Map = class Map extends maplibregl.Map {
+     overlayLayersManager = {};
+   }
    if (maplibregl.Map.prototype.addLayerBak === undefined) {
      maplibregl.Map.prototype.addLayerBak = maplibregl.Map.prototype.addLayer;
      maplibregl.Map.prototype.addLayer = function (layer, before) {
@@ -76,12 +78,21 @@ import maplibregl from 'maplibre-gl';
  
    maplibregl.Map.prototype.removeLayer = function (id) {
      if (this.overlayLayersManager[id]) {
+      const layer = this.overlayLayersManager[id];
        delete this.overlayLayersManager[id];
+       if (layer.type !== 'custom') {
+        removeLayer(layer);
+        return this;
+      }
      }
      this.style.removeLayer(id);
      this._update(true);
      return this;
    };
+
+   function removeLayer(layer) {
+      layer.removeFromMap && layer.removeFromMap();
+   }
  
    //目前扩展的overlayer，只支持显示或隐藏图层操作
    maplibregl.Map.prototype.setLayoutProperty = function (layerID, name, value) {
diff --git a/test/mapboxgl/core/MapExtendSpec.js b/test/mapboxgl/core/MapExtendSpec.js
@@ -6,7 +6,7 @@ import { MapExtend } from '../../../src/mapboxgl/core/MapExtend';
 import { decryptSources } from '../../../src/mapboxgl/core/decryptSource';
 import { EncryptRequest } from '../../../src/common/util/EncryptRequest';
 
-describe('getServiceKey', () => {
+describe('MapExtend mapboxgl', () => {
   let originalTimeout, testDiv;
   const url = 'http:/fake:8090/iserver/iserver/services/map-China107/rest/maps/A';
   beforeAll(() => {
@@ -240,4 +240,74 @@ describe('getServiceKey', () => {
       expect(error).toEqual(new Error('mapbox-gl cannot support plane coordinate system.'));
     }
   });
+  
+  it('overlayLayersManager', (done) => {
+    const map1 = new mapboxgl.Map({
+      container: 'map',
+      style: {
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tiles: ['https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark'],
+            tileSize: 256
+          }
+        },
+        layers: [
+          {
+            id: 'simple-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            minzoom: 0,
+            maxzoom: 22
+          }
+        ]
+      },
+      center: [116.4, 39.79],
+      zoom: 3
+    });
+    expect(map1.overlayLayersManager).toEqual({});
+    map1.overlayLayersManager = { l7_layer_1: { id: 'l7_layer_1', type: 'custom' }, heatmap_1: { id: 'heatmap_1', removeFromMap: function() {} } };
+    spyOn(map1.overlayLayersManager.heatmap_1, 'removeFromMap').and.callThrough();
+    spyOn(map1.style, 'removeLayer').and.callThrough();
+    const removeFromMap = map1.overlayLayersManager.heatmap_1.removeFromMap;
+    const testDiv2 = window.document.createElement('div');
+    testDiv2.setAttribute('id', 'map2');
+    window.document.body.appendChild(testDiv2);
+    const map2 = new mapboxgl.Map({
+      container: 'map2',
+      style: {
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tiles: ['https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark'],
+            tileSize: 256
+          }
+        },
+        layers: [
+          {
+            id: 'simple-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            minzoom: 0,
+            maxzoom: 22
+          }
+        ]
+      },
+      center: [116.4, 39.79],
+      zoom: 3
+    });
+    expect(map2.overlayLayersManager).toEqual({});
+    map1.on('load', () => {
+      map1.removeLayer('heatmap_1')
+      expect(removeFromMap.calls.count()).toEqual(1);
+      map1.removeLayer('l7_layer_1');
+      expect(map1.style.removeLayer.calls.count()).toEqual(1);
+      map1.remove();
+      map2.remove();
+      document.body.removeChild(testDiv2);
+      done();
+    })
+  });
 });
diff --git a/test/maplibregl/core/MapExtendSpec.js b/test/maplibregl/core/MapExtendSpec.js
@@ -107,6 +107,11 @@ describe('maplibregl MapExtend', () => {
       }
     });
   });
+
+  afterEach(() => {
+    map.overlayLayersManager = {};
+  })
+
   afterAll(() => {
     window.document.body.removeChild(testDiv);
     map && map.remove();
@@ -121,4 +126,49 @@ describe('maplibregl MapExtend', () => {
     expect(layers).toEqual(['raster', 'fill-1', 'circle-1', 'l7_layer_1', 'heatmap_1']);
     done();
   });
+  
+  it('overlayLayersManager', (done) => {
+    expect(map.overlayLayersManager).toEqual({});
+    map.overlayLayersManager = { l7_layer_1: { id: 'l7_layer_1', type: 'custom' }, heatmap_1: { id: 'heatmap_1', removeFromMap: function() {} } };
+    spyOn(map.overlayLayersManager.heatmap_1, 'removeFromMap').and.callThrough();
+    spyOn(map.style, 'removeLayer').and.callThrough();
+    const removeFromMap = map.overlayLayersManager.heatmap_1.removeFromMap;
+    const testDiv2 = window.document.createElement('div');
+    testDiv2.setAttribute('id', 'map2');
+    window.document.body.appendChild(testDiv2);
+    const map2 = new maplibregl.Map({
+      container: 'map2',
+      style: {
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tiles: ['https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark'],
+            tileSize: 256
+          }
+        },
+        layers: [
+          {
+            id: 'simple-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            minzoom: 0,
+            maxzoom: 22
+          }
+        ]
+      },
+      center: [116.4, 39.79],
+      zoom: 3
+    });
+    expect(map2.overlayLayersManager).toEqual({});
+    map.on('load', () => {
+      map.removeLayer('heatmap_1')
+      expect(removeFromMap.calls.count()).toEqual(1);
+      map.removeLayer('l7_layer_1');
+      expect(map.style.removeLayer.calls.count()).toEqual(1);
+      map2.remove();
+      document.body.removeChild(testDiv2);
+      done();
+    })
+  });
 });
