【fix】修复leaflet tiandituCRS上叠加grapiclayer偏移的问题 review by luoxiao

Author: songyumeng

src/leaflet/overlay/GraphicLayer.js

@@ -19,6 +19,14 @@ const defaultProps = {
     strokeWidth: 1,
     outline: false
 };
+const BASE_RESOLUTIONS = {
+    'EPSG:4326': 360.0 / 256,
+    'EPSG:3857': (20037508.34279 * 2) / 256
+};
+const DEFAULT_ZOOM_OFFSET = {
+    'EPSG:4326': 1,
+    'EPSG:3857': 0
+};
 
 /**
  * @class L.supermap.graphicLayer
@@ -275,9 +283,12 @@ export var GraphicLayer = L.Path.extend({
         let center = map.getCenter();
         let longitude = center.lng;
         let latitude = center.lat;
-        const zoomOffset = this._crs.code === "EPSG:4326"?1:0;
-        let zoom = map.getZoom()+zoomOffset;
-        let maxZoom = map.getMaxZoom()+zoomOffset;
+        let zoomOffset = DEFAULT_ZOOM_OFFSET[this._crs.code] || 0;
+        if(BASE_RESOLUTIONS[this._crs.code] && this._crs.resolutions && this._crs.resolutions.length > 0 ){
+            zoomOffset = Math.round(Math.log2(BASE_RESOLUTIONS[this._crs.code]/this._crs.resolutions[0]))
+        }
+        let zoom = map.getZoom() + zoomOffset;
+        let maxZoom = map.getMaxZoom() + zoomOffset;
 
         let mapViewport = {
             longitude: longitude,

test/leaflet/overlay/GraphicLayerSpec.js

@@ -346,5 +346,41 @@ describe('leaflet_GraphicLayer', () => {
                 done();
             }, 4000);
         });
+        it('CRS_4326_ICL_1349', (done) => {
+            let { map, testDiv } = createMap();
+            map.options.crs = L.CRS.TianDiTu_Mercator;
+            let layer = graphicLayer(graphics, { render: 'webgl' }).addTo(map);
+            setTimeout(() => {
+                expect(layer._crs).toEqual(map.options.crs);
+                const state = layer.getState();
+                expect(state.maxZoom).toEqual(map.getMaxZoom()+1);
+                expect(state.zoom).toEqual(map.getZoom()+1);
+                const webglRenderLayer = layer._renderer._renderLayer;
+                expect(webglRenderLayer).not.toBeNull();
+                expect(webglRenderLayer.props.coordinateSystem).toEqual(window.DeckGL.COORDINATE_SYSTEM.LNGLAT);
+                expect(webglRenderLayer.props.isGeographicCoordinateSystem).toBeFalse();
+                map.remove();
+                window.document.body.removeChild(testDiv);
+                done();
+            }, 4000);
+        });
+        it('CRS_4326_ICL_1349', (done) => {
+            let { map, testDiv } = createMap();
+            map.options.crs = L.CRS.TianDiTu_WGS84;
+            let layer = graphicLayer(graphics, { render: 'webgl' }).addTo(map);
+            setTimeout(() => {
+                expect(layer._crs).toEqual(map.options.crs);
+                const state = layer.getState();
+                expect(state.maxZoom).toEqual(map.getMaxZoom()+1);
+                expect(state.zoom).toEqual(map.getZoom()+1);
+                const webglRenderLayer = layer._renderer._renderLayer;
+                expect(webglRenderLayer).not.toBeNull();
+                expect(webglRenderLayer.props.coordinateSystem).toEqual(window.DeckGL.COORDINATE_SYSTEM.LNGLAT_OFFSETS);
+                expect(webglRenderLayer.props.isGeographicCoordinateSystem).toBeTrue();
+                map.remove();
+                window.document.body.removeChild(testDiv);
+                done();
+            }, 4000);
+        });
     });
 });