[fix]ICL-1410 review by qiw

Author: luoxiao-supermap

src/leaflet/overlay/EChartsLayer.js

@@ -73,7 +73,6 @@ export const EchartsLayer = L.Layer.extend({
         this._ec = echarts.init(this._echartsContainer);
         this._ec.leafletMap= map;
         const me = this;
-
         map.on("zoomstart", function () {
             me._disableEchartsContainer();
         });
@@ -114,15 +113,12 @@ export const EchartsLayer = L.Layer.extend({
                 const coordSys = LeafletMapModel.coordinateSystem;
 
                 const ecLayers = api.getZr().painter.getLayers();
-
+                _setCanvasPosition(me._map, viewportRoot);
                 const moveHandler = function () {
                     if (rendering) {
                         return;
                     }
-                    const offset = me._map.containerPointToLayerPoint([0, 0]);
-                    const mapOffset = [offset.x || 0, offset.y || 0];
-                    viewportRoot.style.left = mapOffset[0] + 'px';
-                    viewportRoot.style.top = mapOffset[1] + 'px';
+                    const mapOffset = _setCanvasPosition(me._map, viewportRoot);
 
                     if (!me.options.loadWhileAnimating) {
                         for (let item in ecLayers) {
@@ -209,7 +205,6 @@ export const EchartsLayer = L.Layer.extend({
         _div.style.width = size.x + 'px';
         _div.style.zIndex = 10;
         this._echartsContainer = _div;
-
         this.getPane().appendChild(this._echartsContainer);
         const me = this;
 
@@ -235,7 +230,7 @@ export const EchartsLayer = L.Layer.extend({
 export function LeafletMapCoordSys(leafletMap) {
     this._LeafletMap = leafletMap;
     this.dimensions = ['lng', 'lat'];
-    this._mapOffset = [0, 0];
+    this._mapOffset = _getMapOffset(leafletMap);
 }
 
 LeafletMapCoordSys.prototype.dimensions = ['lng', 'lat'];
@@ -330,7 +325,7 @@ LeafletMapCoordSys.create = function (ecModel) {
             coordSys = new LeafletMapCoordSys(leafletMap);
         }
         leafletMapModel.coordinateSystem = coordSys;
-        leafletMapModel.coordinateSystem.setMapOffset(leafletMapModel.__mapOffset || [0, 0]);
+        leafletMapModel.coordinateSystem.setMapOffset(leafletMapModel.__mapOffset || _getMapOffset(leafletMap));
     });
     ecModel.eachSeries(function (seriesModel) {
         if (!seriesModel.get('coordinateSystem') || seriesModel.get('coordinateSystem') === 'leaflet') {
@@ -342,6 +337,19 @@ LeafletMapCoordSys.create = function (ecModel) {
         }
     })
 };
+
+function _getMapOffset(map) {
+  const offset = map.containerPointToLayerPoint([0, 0]);
+  const mapOffset = [offset.x || 0, offset.y || 0];
+  return mapOffset;
+}
+
+function _setCanvasPosition(map, viewportRoot) {
+  const mapOffset = _getMapOffset(map);
+  viewportRoot.style.left = mapOffset[0] + 'px';
+  viewportRoot.style.top = mapOffset[1] + 'px';
+  return mapOffset;
+}
 export const echartsLayer = function (echartsOptions, options) {
     return new EchartsLayer(echartsOptions, options);
 };

test/leaflet/overlay/EchartsLayerSpec.js

@@ -337,4 +337,38 @@ describe('leaflet_EChartsLayer', () => {
             };
         }, 0)
     });
+
+    it('canvas top left', (done) => {
+      debugger;
+      var data = [
+        {
+          value: [104.006244, 30.677465]
+        },
+        {
+          value: [104.041946, 30.689538]
+        },
+        {
+          value: [104.002589, 30.64683]
+        }
+      ];
+      var option = {
+        series: [
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'leaflet',
+            data: data,
+            symbolSize: 30
+          }
+        ]
+      };
+      var echartsMapLayer = echartsLayer(option).addTo(map);
+      const layer = document.getElementsByClassName('echarts-layer')[0];
+      const panel = document.getElementsByClassName('leaflet-map-pane')[0];
+      expect(echartsMapLayer).not.toBeNull();
+      expect(layer.style.left).toBe('0px');
+      expect(layer.style.top).toBe('0px');
+      expect(panel.style.transform).toBe('translate3d(0px, 0px, 0px)');
+      debugger;
+      done();
+    });
 });