【fix】栅格图层非4326投影bounds转换不正确导致出图空白; review by songym

Author: xiongjiaojiao

src/common/mapping/WebMapV2.js

@@ -778,24 +778,21 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
       }
     }
 
-    _createDynamicTiledLayer(layerInfo, addedCallback) {
+    async _createDynamicTiledLayer(layerInfo, addedCallback) {
       const url = layerInfo.url;
       const layerId = layerInfo.layerID || layerInfo.name;
       const { minzoom, maxzoom } = layerInfo;
-      this.getBounds(`${url}.json`, {
+      const reqOptions = {
         withoutFormatSuffix: true,
         withCredentials: this.webMapService.handleWithCredentials('', url, false)
-      }).then((res) => {
-        let bounds = null;
-        if (res && res.bounds) {
-          bounds = [
-            res.bounds.left,
-            res.bounds.bottom,
-            res.bounds.right,
-            res.bounds.top
-          ];
-          const epsgCode = res.prjCoordSys.epsgCode;
-          if (epsgCode !== 4326) {
+      };
+      let res = await this.getBounds(`${url}.json`, reqOptions)
+      let bounds = null;
+      if (res && res.bounds) {
+        bounds = this._getBoundList(res);
+        const epsgCode = res.prjCoordSys.epsgCode;
+        if (epsgCode !== 4326) {
+          if (`EPSG:${epsgCode}` === this.baseProjection || this._mapInfo.baseLayer.url === url) {
             const [left, bottom] = this._unproject(
               [res.bounds.left, res.bounds.bottom]
             );
@@ -808,19 +805,22 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
               right,
               top
             ];
+          } else {
+            res = await this.getBounds(`${url}.json?prjCoordSys=${JSON.stringify({ epsgCode: 4326 })}`, reqOptions)
+            bounds = this._getBoundList(res);
           }
         }
-        this._addBaselayer({
-          url: [url],
-          layerID: layerId,
-          visibility: layerInfo.visible,
-          minzoom,
-          maxzoom,
-          isIserver: true,
-          bounds
-        });
-        addedCallback && addedCallback();
+      }
+      this._addBaselayer({
+        url: [url],
+        layerID: layerId,
+        visibility: layerInfo.visible,
+        minzoom,
+        maxzoom,
+        isIserver: true,
+        bounds
       });
+      addedCallback && addedCallback();
     }
 
     _createWMSLayer(layerInfo, addedCallback) {
@@ -2870,6 +2870,17 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
       return this._fetchRequest(baseUrl, 'json', options);
     }
 
+    _getBoundList(res) {
+      if (res && res.bounds) {
+        return [
+          res.bounds.left,
+          res.bounds.bottom,
+          res.bounds.right,
+          res.bounds.top
+        ];
+      }
+    }
+
     _addLayer(layerInfo, parentLayerId = layerInfo.id, beforeId) {
       const { id } = layerInfo;
       if (this.map.getLayer(id)) {

test/mapboxgl/mapping/WebMapV2Spec.js

@@ -312,9 +312,9 @@ describe('mapboxgl_WebMapV2', () => {
     originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
     jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
     window.jsonsql = { query: () => [{}] };
-   spyOn(Canvg, 'from').and.callFake((ctx, url, callback) =>
-     Promise.resolve({ stop: jasmine.createSpy('stop'), start: jasmine.createSpy('start') })
-   );
+    spyOn(Canvg, 'from').and.callFake((ctx, url, callback) =>
+      Promise.resolve({ stop: jasmine.createSpy('stop'), start: jasmine.createSpy('start') })
+    );
     window.geostats = class {
       setSerie() {}
     };
@@ -2840,10 +2840,7 @@ describe('mapboxgl_WebMapV2', () => {
       expect(xyzLayer.id).toBe('2326底图');
       expect(xyzLayer.type).toBe('raster');
       expect(sources['2326底图'].bounds).toEqual([
-        113.77925526971052,
-        22.086139328930617,
-        114.53407583886273,
-        22.61831019233164
+        113.77925526971052, 22.086139328930617, 114.53407583886273, 22.61831019233164
       ]);
       done();
     });
@@ -3659,4 +3656,139 @@ describe('mapboxgl_WebMapV2', () => {
       done();
     });
   });
+
+  it('overlay is TILE, baselayer is TILE bounds', (done) => {
+    const wkt4496 = `PROJCS["GK Zone 18      (CGCS2000)",GEOGCS["GCS_China_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101,AUTHORITY["EPSG","7044"]]],PRIMEM["Greenwich",0.0,AUTHORITY["EPSG","8901"]],UNIT["DEGREE",0.017453292519943295],AUTHORITY["EPSG","4490"]],PROJECTION["Transverse_Mercator",AUTHORITY["EPSG","9807"]],PARAMETER["False_Easting",1.85E7],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",105.0],PARAMETER["Latitude_Of_Origin",0.0],PARAMETER["Scale_Factor",1.0],UNIT["METER",1.0],AUTHORITY["EPSG","4496"]]`;
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('123/map.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(dynamicProjectionMapInfo)));
+      }
+      if (url.indexOf(`test.json?prjCoordSys=${JSON.stringify({ epsgCode: 4326 })}`) > -1) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              prjCoordSys: { epsgCode: 4326 },
+              bounds: {
+                top: 2.3755571276430945,
+                left: 113.5091647206238,
+                bottom: 2.087888705520514,
+                leftBottom: {
+                  x: 113.5091647206238,
+                  y: 2.087888705520514
+                },
+                right: 113.84235808224173,
+                rightTop: {
+                  x: 113.84235808224173,
+                  y: 2.3755571276430945
+                }
+              }
+            })
+          )
+        );
+      }
+      if (url.indexOf(`test.json`) > -1) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              prjCoordSys: { epsgCode: 4496 },
+              bounds: {
+                top: 262679.13362826034,
+                left: 25493.744181281887,
+                bottom: 230878.98887457885,
+                leftBottom: {
+                  x: 25493.744181281887,
+                  y: 230878.98887457885
+                },
+                right: 62548.98751319852,
+                rightTop: {
+                  x: 62548.98751319852,
+                  y: 262679.13362826034
+                }
+              }
+            })
+          )
+        );
+      }
+      if (url.indexOf(`China_Dark.json`) > -1) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              prjCoordSys: { epsgCode: -1 },
+              bounds: {
+                top: 20037508.342789087,
+                left: -20037508.342789248,
+                bottom: -25819498.513543323,
+                leftBottom: {
+                  x: -20037508.342789248,
+                  y: -25819498.513543323
+                },
+                right: 20037508.342789244,
+                rightTop: {
+                  x: 20037508.342789244,
+                  y: 20037508.342789087
+                }
+              }
+            })
+          )
+        );
+      }
+      if (url.indexOf(`china.json`) > -1) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              prjCoordSys: { epsgCode: 3857 },
+              bounds: {
+                top: 5127400.782113583,
+                left: 10607760.850223977,
+                bottom: 2755785.4693220854,
+                leftBottom: {
+                  x: 10607760.850223977,
+                  y: 2755785.4693220854
+                },
+                right: 12979376.163015474,
+                rightTop: {
+                  x: 12979376.163015474,
+                  y: 5127400.782113583
+                }
+              }
+            })
+          )
+        );
+      }
+      if (url.indexOf('prjCoordSys.wkt')) {
+        return Promise.resolve(new Response(wkt4496));
+      }
+    });
+    datavizWebmap = new WebMap('123', {
+      target: 'map',
+      serverUrl: 'http://fake/fakeiportal',
+      withCredentials: false
+    });
+    datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
+      const style = map.getStyle();
+      expect(map.getStyle().layers.length).toBe(3);
+      const expectedBaselayerBounds = [-180.00000000000006, -88, 180.00000000000003, 85.05112877980648];
+      const actualBaselayerBounds = style.sources['中国暗色地图'].bounds;
+      expect(actualBaselayerBounds.length).toBe(expectedBaselayerBounds.length);
+      actualBaselayerBounds.forEach((val, i) => {
+        expect(val).toBeCloseTo(expectedBaselayerBounds[i], 6);
+      });
+      const expectedOverlayer1Bounds = [95.29113702040888, 24.019508369205386, 116.5957198557339, 41.77544139596302];
+      const actualOverlayer1Bounds = style.sources.china.bounds;
+      expect(actualOverlayer1Bounds.length).toBe(expectedOverlayer1Bounds.length);
+      actualOverlayer1Bounds.forEach((val, i) => {
+        expect(val).toBeCloseTo(expectedOverlayer1Bounds[i], 6);
+      });
+      const expectedOverlayer2Bounds = [113.5091647206238, 2.087888705520514, 113.84235808224173, 2.3755571276430945];
+      const actualOverlayer2Bounds = style.sources.test.bounds;
+      expect(actualOverlayer2Bounds.length).toBe(expectedOverlayer2Bounds.length);
+      actualOverlayer2Bounds.forEach((val, i) => {
+        expect(val).toBeCloseTo(expectedOverlayer2Bounds[i], 6);
+      });
+      done();
+    });
+  });
 });