fix icl-1516 EchartsLayer和RangeThemeLaye叠加，默认加载顺序不正确 review by luox

xilanhuaweidapao · xilanhuaweidapao · commit a03a6b3c99d0 · 2023-12-01T15:04:01.000+08:00
diff --git a/src/leaflet/overlay/EChartsLayer.js b/src/leaflet/overlay/EChartsLayer.js
@@ -208,7 +208,7 @@ export const EchartsLayer = L.Layer.extend({
         _div.style.position = 'absolute';
         _div.style.height = size.y + 'px';
         _div.style.width = size.x + 'px';
-        _div.style.zIndex = 10;
+        _div.style.zIndex = 200;
         this._echartsContainer = _div;
         this.getPane().appendChild(this._echartsContainer);
         const me = this;
diff --git a/src/leaflet/overlay/MapVLayer.js b/src/leaflet/overlay/MapVLayer.js
@@ -208,7 +208,7 @@ export var MapVLayer = L.Layer.extend({
         canvas.style.top = 0 + "px";
         canvas.style.left = 0 + "px";
         canvas.style.pointerEvents = "none";
-        canvas.style.zIndex = this.options.zIndex || 600;
+        canvas.style.zIndex = this.options.zIndex || 200;
         var global$2 = typeof window === 'undefined' ? {} : window;
         var devicePixelRatio = this.devicePixelRatio = global$2.devicePixelRatio || 1;
         if (!this.mapVOptions.context || this.mapVOptions.context === '2d') {
diff --git a/test/leaflet/overlay/EchartsLayerSpec.js b/test/leaflet/overlay/EchartsLayerSpec.js
@@ -1,4 +1,5 @@
 import { echartsLayer, LeafletMapCoordSys } from '../../../src/leaflet/overlay/EChartsLayer';
+import { RangeThemeLayer } from '../../../src/leaflet/overlay/RangeThemeLayer';
 import { tiledMapLayer } from '../../../src/leaflet/mapping/TiledMapLayer';
 
 var url = GlobeParameter.imageURL;
@@ -393,4 +394,43 @@ describe('leaflet_EChartsLayer', () => {
       LeafletMapCoordSys.create(mockECModel1)
       done();
     });
+
+    it('layer index fix', (done) => {
+      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 themeLayer = new RangeThemeLayer("ThemeLayer", {
+        isHoverAble:false,
+        opacity: 0.8,
+        alwaysMapCRS: true
+      });
+      themeLayer.addTo(map);
+      var echartsMapLayer = echartsLayer(option).addTo(map);
+      const layer = document.getElementsByClassName('echarts-layer')[0];
+      const themeLayerElement = document.getElementsByClassName('themeLayer')[0];
+      const panel = document.getElementsByClassName('leaflet-map-pane')[0];
+      expect(+layer.parentNode.style.zIndex).toEqual(+themeLayerElement.style.zIndex);
+      expect(themeLayerElement.nextSibling.children[0].classList.contains('echarts-layer')).toBeTruthy();
+      expect(layer.style.left).toBe('0px');
+      expect(layer.style.top).toBe('0px');
+      done();
+    });
 });
diff --git a/test/leaflet/overlay/MapVLayerSpec.js b/test/leaflet/overlay/MapVLayerSpec.js
@@ -1,5 +1,6 @@
 import {mapVLayer} from '../../../src/leaflet/overlay/MapVLayer';
 import {tiledMapLayer} from '../../../src/leaflet/mapping/TiledMapLayer';
+import {RangeThemeLayer} from '../../../src/leaflet/overlay/RangeThemeLayer';
 import {utilCityCenter, DataSet} from 'mapv';
 
 var url = GlobeParameter.ChinaURL;
@@ -188,4 +189,18 @@ describe('leaflet_MapVLayer', () => {
         expect(topLeft.lng).toEqual(87.01171875);
         expect(topLeft.lat).toEqual(48.63290858589535);
     });
+
+    it('layer index fix', () => {
+      var canvas = layer.getCanvas();
+      expect(canvas).not.toBeNull();
+      var themeLayer = new RangeThemeLayer("ThemeLayer", {
+        isHoverAble:false,
+        opacity: 0.8,
+        alwaysMapCRS: true
+      });
+      themeLayer.addTo(map);
+      const themeLayerElement = document.getElementsByClassName('themeLayer')[0];
+      expect(+canvas.style.zIndex).toEqual(+themeLayerElement.style.zIndex);
+      expect(canvas.parentNode.nextSibling.classList.contains('themeLayer')).toBeTruthy();
+  });
 });
