【update】when mapId is JSON

Author: xiongjiaojiao

src/mapboxgl/mapping/WebMap.js

@@ -51,11 +51,6 @@ export class WebMap extends mapboxgl.Evented {
     this.options.withCredentials = options.withCredentials || false;
     this.mapOptions = mapOptions;
     this._createWebMap();
-    this.on('mapinitialized', () => {
-      this.map.on('remove', () => {
-        this._stopCanvg();
-      });
-    });
   }
   /**
    * @function WebMap.prototype.resize

src/mapboxgl/mapping/webmap/v3/WebMap.js

@@ -136,7 +136,7 @@ export class WebMap extends mapboxgl.Evented {
    */
   _createMap() {
     let {
-      name,
+      name = '',
       crs,
       center = new mapboxgl.LngLat(0, 0),
       zoom = 0,
@@ -188,6 +188,15 @@ export class WebMap extends mapboxgl.Evented {
       this.fire('projectionisnotmatch');
       return;
     }
+    if (Object.prototype.toString.call(this.mapId) === '[object Object]') {
+      this.mapParams = {
+        title: this._mapInfo.name,
+        description: ''
+      };
+      this._createMapRelatedInfo();
+      this._addLayersToMap();
+      return;
+    }
     Promise.all([this._getMapRelatedInfo(), this._getSpriteDatas()])
       .then(([relatedInfo]) => {
         this.mapParams = {
@@ -240,56 +249,21 @@ export class WebMap extends mapboxgl.Evented {
    * @description emit 图层加载成功事件。
    */
   _addLayersToMap() {
-    const { sources, layers, layerIdMapList } = this._setUniqueId(this._mapInfo);
+    const { sources, layers } = this._mapInfo;
     layers.forEach((layer) => {
       layer.source && !this.map.getSource(layer.source) && this.map.addSource(layer.source, sources[layer.source]);
       this.map.addLayer(layer);
     });
-    this._sendMapToUser(layerIdMapList);
-  }
-
-  /**
-   * @private
-   * @function WebMap.prototype._setUniqueId
-   * @description 返回唯一 id 的 sources 和 layers。
-   * @param {Object} mapInfo - map 信息。
-   */
-  _setUniqueId(mapInfo) {
-    let layersToMap = JSON.parse(JSON.stringify(mapInfo.layers));
-    const nextSources = {};
-    const layerIdToChange = {};
-    for (let sourceId in mapInfo.sources) {
-      let timestamp = this.map.getSource(sourceId) ? `_${+new Date()}` : '';
-      const nextSourceId = sourceId + timestamp;
-      nextSources[nextSourceId] = mapInfo.sources[sourceId];
-      layersToMap = layersToMap.map((layer) => {
-        let nextLayer = layer;
-        if (layer.source === sourceId) {
-          let layerId = layer.id;
-          if (this.map.getLayer(layerId)) {
-            layerId = timestamp ? layer.id + timestamp : `${layer.id}_${+new Date()}`;
-          }
-          nextLayer = Object.assign({}, layer, { id: layerId, source: nextSourceId });
-        }
-        layerIdToChange[layer.id] = nextLayer.id;
-        return nextLayer;
-      });
-    }
-    return {
-      sources: nextSources,
-      layers: layersToMap,
-      layerIdMapList: layerIdToChange
-    };
+    this._sendMapToUser();
   }
 
   /**
    * @private
    * @function WebMap.prototype._sendMapToUser
    * @description emit 图层加载成功事件。
-   * @param {Object} layerIdMapList - 图层 id 信息
    */
-  _sendMapToUser(layerIdMapList) {
-    this._appreciableLayers = this._generateLayers(layerIdMapList);
+  _sendMapToUser() {
+    this._appreciableLayers = this._generateLayers();
     this.fire('addlayerssucceeded', { map: this.map, mapparams: this.mapParams, layers: this._appreciableLayers });
   }
 
@@ -314,9 +288,11 @@ export class WebMap extends mapboxgl.Evented {
 
   clean() {
     if (this.map) {
+      this.map.remove();
       this.map = null;
       this._legendList = [];
       this.mapOptions = {};
+      this.options = {};
       this._appreciableLayers = [];
     }
   }
@@ -325,18 +301,16 @@ export class WebMap extends mapboxgl.Evented {
    * @private
    * @function WebMap.prototype._generateV2LayersStructure
    * @description emit 图层加载成功事件。
-   * @param {Array<Object>} layers - 图层信息。
    */
-  _generateLayers(layerIdMapList) {
+  _generateLayers() {
     const { catalogs = [] } = this._mapResourceInfo;
     const originLayers = this._getLayerInfosFromCatalogs(catalogs);
     const layers = originLayers.map((layer) => {
       const { title, visualization } = layer;
-      const realLayerId = layerIdMapList[layer.id];
       const layerFromMapInfo = this._mapInfo.layers.find((item) => {
         return item.id === layer.id;
       });
-      this._createLegendInfo(Object.assign({}, layerFromMapInfo, { id: realLayerId }), visualization);
+      this._createLegendInfo(Object.assign({}, layerFromMapInfo), visualization);
       let dataType = '';
       let dataId = '';
       for (const data of this._mapResourceInfo.datas) {
@@ -352,7 +326,7 @@ export class WebMap extends mapboxgl.Evented {
           serverId: dataId,
           type: dataType
         },
-        layerID: realLayerId,
+        layerID: layer.id,
         layerType: layerFromMapInfo.type === 'raster' ? 'raster' : 'vector',
         type: layerFromMapInfo.type,
         name: title

test/mapboxgl/mapping/WebMapV3Spec.js

@@ -1,4 +1,5 @@
 import { WebMap } from '../../../src/mapboxgl/mapping/WebMap';
+import { WebMap as WebMapV3 } from '../../../src/mapboxgl/mapping/webmap/v3/WebMap';
 import '../../resources/WebMapV3.js';
 import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
 
@@ -21,8 +22,8 @@ describe('mapboxgl-webmap3.0', () => {
   });
   afterEach(() => {
     if (mapstudioWebmap && mapstudioWebmap.map) {
-        const webMapV3 = mapstudioWebmap._getWebMapInstance();
-        webMapV3.clean();
+        const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;
+        webMapV3.clean && webMapV3.clean();
         mapstudioWebmap = null;
     }
     window.document.body.removeChild(testDiv);
@@ -119,4 +120,29 @@ describe('mapboxgl-webmap3.0', () => {
       done();
     });
   });
+
+  it('mapId is JSON', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      return Promise.resolve();
+    });
+    const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    mapstudioWebmap = new WebMapV3(mapInfo, {
+      server: server,
+      target: 'map'
+    });
+    mapstudioWebmap.initializeMap(mapInfo);
+
+    mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
+      expect(map).not.toBeUndefined();
+      expect(mapstudioWebmap.map).toEqual(map);
+      var style = map.getStyle();
+      expect(style.layers.length).toBe(mapInfo.layers.length);
+      expect(mapstudioWebmap.getLayers().length).toBeLessThanOrEqual(mapInfo.layers.length);
+      expect(mapstudioWebmap.getLegendInfo().length).toBe(0);
+      done();
+    });
+  });
 });