【fix】修复leaflet 高性能点图层webgl渲染时地图为WGS84时偏移的问题 review by luoxiao

Author: songyumeng

src/leaflet/overlay/GraphicLayer.js

@@ -79,6 +79,7 @@ export var GraphicLayer = L.Path.extend({
      */
     onAdd: function (map) {
         this._map = map;
+        this._crs = map.options.crs;
         this.defaultStyle = this._getDefaultStyle(this.options);
         this._renderer = this._createRenderer();
         this._container = this._renderer._container;
@@ -274,8 +275,9 @@ export var GraphicLayer = L.Path.extend({
         let center = map.getCenter();
         let longitude = center.lng;
         let latitude = center.lat;
-        let zoom = map.getZoom();
-        let maxZoom = map.getMaxZoom();
+        const zoomOffset = this._crs.code === "EPSG:4326"?1:0;
+        let zoom = map.getZoom()+zoomOffset;
+        let maxZoom = map.getMaxZoom()+zoomOffset;
 
         let mapViewport = {
             longitude: longitude,

src/leaflet/overlay/graphic/WebGLRenderer.js

@@ -169,6 +169,8 @@ export var GraphicWebGLRenderer = L.Class.extend({
             radiusMinPixels: radiusMinPixels,
             radiusMaxPixels: radiusMaxPixels,
             strokeWidth: strokeWidth,
+            coordinateSystem:this._isWGS84()?window.DeckGL.COORDINATE_SYSTEM.LNGLAT_OFFSETS:window.DeckGL.COORDINATE_SYSTEM.LNGLAT,
+            isGeographicCoordinateSystem: this._isWGS84(),
             outline: outline,
             getPosition: function (point) {
                 if (!point) {
@@ -258,6 +260,8 @@ export var GraphicWebGLRenderer = L.Class.extend({
         deckOptions.canvas = this._container;
         deckOptions.onBeforeRender = this._onBeforeRender.bind(this);
         deckOptions.onAfterRender = this._onAfterRender.bind(this);
+        deckOptions.coordinateSystem = this._isWGS84()? window.DeckGL.COORDINATE_SYSTEM.LNGLAT_OFFSETS:window.DeckGL.COORDINATE_SYSTEM.LNGLAT;
+        deckOptions.isGeographicCoordinateSystem = this._isWGS84();
         if (!this.deckGL) {
             this.deckGL = new window.DeckGL.experimental.DeckGLJS(deckOptions);
         } else {
@@ -304,6 +308,9 @@ export var GraphicWebGLRenderer = L.Class.extend({
     },
     _initPath: emptyFunc,
     _addPath: emptyFunc,
-    containsPoint: emptyFunc
+    containsPoint: emptyFunc,
+    _isWGS84(){
+        return this.layer._map.options.crs.code === "EPSG:4326";
+    }
 
 });

test/leaflet/overlay/GraphicLayerSpec.js

@@ -329,5 +329,22 @@ describe('leaflet_GraphicLayer', () => {
             map.remove();
             window.document.body.removeChild(testDiv);
         });
+        it('CRS_4326_ICL_1042', (done) => {
+            let { map, testDiv } = createMap();
+            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);
+        });
     });
 });