【feature】经纬网的webmap 加载完成标识优化，setLayoutProperty 优化；

Author: xiongjiaojiao

src/common/mapping/WebMapV2.js

@@ -213,6 +213,9 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         }
         this.expectLayerLen += overLayers.length;
       }
+      if (mapInfo.grid && mapInfo.grid.graticule) {
+        this.expectLayerLen++;
+      }
     }
 
     _shouldLoadBaseLayer(mapInfo, layerFilter) {
@@ -506,6 +509,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         parentLayerId: graticuleLayer.id,
         subRenderLayers: [{ layerId: graticuleLayer.id }, { layerId: graticuleLayer.sourceId }]
       });
+      this._addLayerSucceeded();
     }
 
     _createGraticuleOptions(graticuleInfo) {

src/common/util/MapExtend.js

@@ -95,6 +95,9 @@ export function createMapExtendExtending(product) {
         if (overlayLayer.setLayoutProperty) {
           overlayLayer.setLayoutProperty(name, value);
           this.style.fire('data', { dataType: 'style' });
+        } else if (name === 'visibility' && overlayLayer.setVisibility) {
+          overlayLayer.setVisibility(value === 'visible');
+          this.style.fire('data', { dataType: 'style' });
         }
         return this;
       }

test/mapboxgl/mapping/WebMapV2Spec.js

@@ -507,6 +507,7 @@ describe('mapboxgl_WebMapV2', () => {
       };
       datavizWebmap.map.fire('zoomend');
       expect(data).not.toBeUndefined();
+      expect(data.layers.slice(-1)[0].id).toContain('graticuleLayer_');
       done();
     };
     datavizWebmap = new WebMap(id, { ...commonOption });

test/mapboxgl/overlay/GraticuleLayerSpec.js

@@ -82,6 +82,20 @@ describe('mapboxgl_GraticuleLayer', () => {
     expect(visible).toBe('visible');
   });
 
+  it('setLayoutProperty', () => {
+    let visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+    expect(visible).toBe('visible');
+    expect(graticuleLayer.visible).toBeTruthy();
+    map.setLayoutProperty(graticuleLayer.id, 'visibility', 'none');
+    visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+    expect(visible).toBe('none');
+    expect(graticuleLayer.visible).toBeFalsy();
+    map.setLayoutProperty(graticuleLayer.id, 'visibility', 'visible');
+    visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+    expect(visible).toBe('visible');
+    expect(graticuleLayer.visible).toBeTruthy();
+  });
+
   it('setMinZoom', () => {
     graticuleLayer.setMinZoom(0);
     expect(graticuleLayer.options.minZoom).toEqual(0);

test/maplibregl/mapping/WebMapV2Spec.js

@@ -508,6 +508,7 @@ describe('maplibregl_WebMapV2', () => {
       };
       datavizWebmap.map.fire('zoomend');
       expect(data).not.toBeUndefined();
+      expect(data.layers.slice(-1)[0].id).toContain('graticuleLayer_');
       done();
     };
     datavizWebmap = new WebMap(id, { ...commonOption });

test/maplibregl/overlay/GraticuleLayerSpec.js

@@ -84,6 +84,20 @@ describe('maplibregl_GraticuleLayer', () => {
         expect(visible).toBe('visible');
     });
 
+    it('setLayoutProperty', () => {
+        let visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+        expect(visible).toBe('visible');
+        expect(graticuleLayer.visible).toBeTruthy();
+        map.setLayoutProperty(graticuleLayer.id, 'visibility', 'none');
+        visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+        expect(visible).toBe('none');
+        expect(graticuleLayer.visible).toBeFalsy();
+        map.setLayoutProperty(graticuleLayer.id, 'visibility', 'visible');
+        visible = map.getLayoutProperty('graticuleLayer_1_line', 'visibility');
+        expect(visible).toBe('visible');
+        expect(graticuleLayer.visible).toBeTruthy();
+    });
+
     it('getDefaultExtent must return degree', () => {
       map.getCRS = () => {
         return {