【feature】mapboxgl 重写removeSource isSourceLoaded方法

Author: xiongjiaojiao

src/mapboxgl/core/MapExtend.js

@@ -33,12 +33,37 @@ export var MapExtend = (function () {
 
     getSource(sourceId) {
       const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId);
-      if (customOverlayerLayer && customOverlayerLayer.getSource) {
-        return customOverlayerLayer.getSource();
+      if (customOverlayerLayer) {
+        if (customOverlayerLayer.getSource) {
+          return customOverlayerLayer.getSource();
+        }
+        return;
       }
       return originMapProto.getSource.call(this, sourceId);
     }
 
+    removeSource(sourceId) {
+      const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId);
+      if (customOverlayerLayer) {
+        if (customOverlayerLayer.removeSource) {
+          return customOverlayerLayer.removeSource();
+        }
+        return;
+      }
+      return originMapProto.removeSource.call(this, sourceId);
+    }
+
+    isSourceLoaded(sourceId) {
+      const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId);
+      if (customOverlayerLayer) {
+        if (customOverlayerLayer.isSourceLoaded) {
+          return customOverlayerLayer.isSourceLoaded();
+        }
+        return;
+      }
+      return originMapProto.isSourceLoaded.call(this, sourceId);
+    }
+    
     getLayer(id) {
       const overlayLayer = this.overlayLayersManager[id];
       if (overlayLayer) {

src/mapboxgl/overlay/Base.js

@@ -19,6 +19,14 @@ export class CustomOverlayLayer {
   // 获取 layer source的信息，如 id，type 等
   getSource() {}
 
+  // 删除 layer source
+  removeSource() {}
+
+  // 返回指定source 是否加载完成
+  isSourceLoaded() {
+    return true;
+  }
+
   // 返回指定样式图层中绘制属性的值
   getPaintProperty() {}
 

src/mapboxgl/overlay/L7Layer.js

@@ -212,6 +212,15 @@ export class L7Layer extends CustomOverlayLayer {
     return sourceInfo;
   }
 
+  isSourceLoaded() {
+    if (!this.l7layer) {
+      return;
+    }
+    const layerSource = this.l7layer.layerSource;
+    return !layerSource.tileset ? true : layerSource.tileset.isLoaded;
+  }
+
+
   onAdd(map) {
     this.map = map;
     if (!map.$l7scene) {

test/mapboxgl/core/MapExtendSpec.js

@@ -328,7 +328,7 @@ describe('MapExtend mapboxgl', () => {
         sources: {
           'raster-tiles': {
             type: 'raster',
-            tiles: [GlobeParameter.ChinaURL + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
+            tiles: ['base/resources/img/baiduTileTest.png'],
             tileSize: 256
           }
         },
@@ -351,6 +351,8 @@ describe('MapExtend mapboxgl', () => {
         getSource: function () {
           return {};
         },
+        removeSource: function() {},
+        isSourceLoaded: function() { return true; },
         getLayer: function () {
           return {};
         },
@@ -382,6 +384,8 @@ describe('MapExtend mapboxgl', () => {
       expect(map.getSource('l7_layer_1')).not.toBeUndefined();
       expect(map.getSource('raster-tiles')).not.toBeUndefined();
       expect(options.getSource.calls.count()).toEqual(1);
+      expect(map.isSourceLoaded('l7_layer_1')).toBeTruthy();
+      expect(map.isSourceLoaded('raster-tiles')).toBeTruthy();
       expect(map.getLayer('l7_layer_1')).not.toBeUndefined();
       expect(map.getLayer('simple-tiles')).not.toBeUndefined();
       expect(map.getLayer('heatmap_1')).toEqual(map.overlayLayersManager['heatmap_1']);
@@ -404,6 +408,10 @@ describe('MapExtend mapboxgl', () => {
       map.off('click', 'l7_layer_1', cb);
       map.off('click', cb);
       expect(options.off.calls.count()).toEqual(1);
+      map.removeSource('l7_layer_1');
+      map.removeLayer('simple-tiles');
+      map.removeSource('raster-tiles');
+      expect(options.removeSource.calls.count()).toEqual(1);
       map.remove();
       done();
     });

test/mapboxgl/mapping/utils/L7LayerUtilSpec.js

@@ -45,9 +45,9 @@ describe('L7LayerUtil', () => {
   });
 
   it('add od layer', (done) => {
-    spyOn(FetchRequest, 'get').and.callFake((url, _, options) => {
-      expect(options.withCredentials).toBe(options.withCredentials);
-      expect(options.withoutFormatSuffix).toBeTruthy();
+    spyOn(FetchRequest, 'get').and.callFake((url, _, nextOptions) => {
+      expect(nextOptions.withCredentials).toBe(options.withCredentials);
+      expect(nextOptions.withoutFormatSuffix).toBeTruthy();
       if (url.indexOf('/sprite') > -1) {
         return Promise.resolve(new Response(msSpriteInfo));
       }
@@ -143,6 +143,8 @@ describe('L7LayerUtil', () => {
     const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
     addL7Layers(nextOptions).then(() => {
       expect(nextOptions.map.addLayer.calls.count()).toEqual(2);
+      expect(layerMaplist['国内航班数据_100']).toBeTruthy();
+      expect(layerMaplist['ms_composite_国内航班数据_100']).toBeTruthy();
       spy.calls.reset();
       done();
     });

test/mapboxgl/overlay/L7LayerSpec.js

@@ -116,6 +116,7 @@ describe('mapboxgl L7Layer', () => {
       map.$l7scene = null;
       done();
     });
+    expect(layer.isSourceLoaded()).toBeTruthy();
   });
 
   it('PointLayer', (done) => {
@@ -420,6 +421,7 @@ describe('mapboxgl L7Layer', () => {
       .shape('circle')
       .color('#4cfd47');
     map.addLayer(layer);
+    expect(layer.isSourceLoaded()).toBeFalsy();
 
     map.overlayLayersManager = { [layer.id]: layer };
     l7Layer.rawConfig.name = 'empty-test';

test/tool/mock_l7.js

@@ -83,7 +83,8 @@ class Layer {
                   }
                 }
               ]
-            ])
+            ]),
+        isLoaded: false
       };
     }
     return this;