fix 修改webmap3.0多投影代码位置，处理传入map的情况 review by xiongjj

chenxianhuii · chenxianhuii · commit fe819a8d9d14 · 2024-05-16T10:14:39.000+08:00
diff --git a/src/mapboxgl/mapping/webmap/v3/WebMap.js b/src/mapboxgl/mapping/webmap/v3/WebMap.js
@@ -112,6 +112,10 @@ export class WebMap extends mapboxgl.Evented {
   initializeMap(mapInfo, map) {
     mapInfo = this._handleUnSupportedLayers(mapInfo);
     this._mapInfo = mapInfo;
+    const proj = this._setBaseProjection();
+    if(!proj) {
+      return;
+    }
     if (map) {
       this._appendLayers = true;
       this.map = map;
@@ -145,7 +149,6 @@ export class WebMap extends mapboxgl.Evented {
   _createMap() {
     let {
       name = '',
-      crs,
       center = new mapboxgl.LngLat(0, 0),
       zoom = 0,
       bearing = 0,
@@ -154,18 +157,6 @@ export class WebMap extends mapboxgl.Evented {
       maxzoom,
       sprite = ''
     } = this._mapInfo;
-    let baseProjection = crs;
-    if (typeof crs === 'object') {
-      baseProjection = crs.name;
-      if (!mapboxgl.CRS) {
-        const error = `The EPSG code ${baseProjection} needs to include mapbox-gl-enhance.js. Refer to the example: https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile_2362`;
-        this.fire('getmapinfofailed', { error: error });
-        console.error(error);
-        return;
-      }
-      this._setCRS(crs);
-    }
-    this._baseProjection = baseProjection;
     center = this.mapOptions.center || center;
     zoom = this.mapOptions.zoom || zoom;
     bearing = this.mapOptions.bearing || bearing;
@@ -199,6 +190,23 @@ export class WebMap extends mapboxgl.Evented {
     });
   }
 
+  _setBaseProjection() { 
+    let crs = this._mapInfo.crs;
+    let baseProjection = crs;
+    if (typeof crs === 'object') {
+      baseProjection = crs.name;
+      if (!mapboxgl.CRS) {
+        const error = `The EPSG code ${baseProjection} needs to include mapbox-gl-enhance.js. Refer to the example: https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile_2362`;
+        this.fire('getmapinfofailed', { error: error });
+        console.error(error);
+        return;
+      }
+      this._setCRS(crs);
+    }
+    this._baseProjection = baseProjection;
+    return this._baseProjection;
+   }
+
   _setCRS({ name, wkt, extent }) {
     const crs = new mapboxgl.CRS(name, wkt, extent, extent[2] > 180 ? 'meter' : 'degree');
     mapboxgl.CRS.set(crs);
diff --git a/test/mapboxgl/mapping/WebMapV3Spec.js b/test/mapboxgl/mapping/WebMapV3Spec.js
@@ -5,6 +5,7 @@ import '../../resources/WebMapV3.js';
 import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
 import * as L7 from '../../../src/mapboxgl/overlay/L7/l7-render';
 import * as mockL7 from '../../tool/mock_l7';
+import mbglmap from '../../tool/mock_mapboxgl_map';
 
 describe('mapboxgl-webmap3.0', () => {
   var originalTimeout, testDiv;
@@ -229,6 +230,82 @@ describe('mapboxgl-webmap3.0', () => {
     });
   });
 
+  it('projection is 4490 and with map', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      return Promise.resolve();
+    });
+    spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
+    var testDiv = window.document.createElement("div");
+    testDiv.setAttribute("id", "map");
+    testDiv.style.styleFloat = "left";
+    testDiv.style.marginLeft = "8px";
+    testDiv.style.marginTop = "50px";
+    testDiv.style.width = "1000px";
+    testDiv.style.height = "500px";
+    window.document.body.appendChild(testDiv);
+    const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    const nextMapInfo = {
+      ...mapInfo,
+      crs: {
+        name: 'EPSG:4490',
+        extent: [-180, -270, 180, 90],
+        wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
+      }
+    };
+    mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
+      expect(epsgCode).toBe(nextMapInfo.crs.name);
+      expect(wkt).toBe(nextMapInfo.crs.wkt);
+      expect(bounds).toEqual(nextMapInfo.crs.extent);
+      expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
+    };
+    mapboxgl.CRS.set = function () {};
+    mapstudioWebmap = new WebMapV3(nextMapInfo, {
+      server: server,
+      target: 'map'
+    });
+    const map = new mapboxgl.Map({
+      container: testDiv,
+      style: {
+          "version": 8,
+          "sources": {
+              "raster-tiles": {
+                  "type": "raster",
+                  "tiles": [],
+                  "tileSize": 256
+              }
+          },
+          "layers": [{
+              "id": "simple-tiles",
+              "type": "raster",
+              "source": "raster-tiles",
+              "minzoom": 0,
+              "maxzoom": 22
+          }]
+      },
+      crs: 'EPSG:4490',
+      center: [116.640545, 40.531714],
+      zoom: 7
+    });
+    map.getCRS = function () { return {epsgCode:'EPSG:4490'}};
+    map.on('load', function () {
+      mapstudioWebmap.initializeMap(nextMapInfo, map);
+    });
+    mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
+      expect(mapstudioWebmap._appendLayers).toBe(true);
+      expect(map).not.toBeUndefined();
+      expect(mapstudioWebmap.map).toEqual(map);
+      const style = map.getStyle();
+      expect(style.layers.length).toBe(nextMapInfo.layers.length + 1);
+      const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
+      expect(appreciableLayers.length).toBeGreaterThanOrEqual(nextMapInfo.layers.length);
+      delete mapboxgl.CRS;
+      done();
+    });
+  });
+
   it('overlayLayersManager', (done) => {
     spyOn(FetchRequest, 'get').and.callFake((url) => {
       if (url.indexOf('/sprite') > -1) {
diff --git a/test/tool/mock_mapboxgl_map.js b/test/tool/mock_mapboxgl_map.js
@@ -130,7 +130,7 @@ const Map = function (options) {
 
   this.getSource = function (name) {
     this._sources[name];
-    if (this._sources[name].type === 'video') {
+    if (this._sources[name]?.type === 'video') {
       return {
         play: function () {}
       };
