[fix]mapbox经纬网加id review by songym

luoxiao-supermap · luoxiao-supermap · commit 083533aba7e9 · 2020-12-24T21:40:22.000+08:00
diff --git a/src/mapboxgl/overlay/GraticuleLayer.js b/src/mapboxgl/overlay/GraticuleLayer.js
@@ -9,14 +9,15 @@
  * thanks dereklieu, cloudybay
  */
 
-import { getWrapNum, conversionDegree } from '@supermap/iclient-common';
+import { getWrapNum, conversionDegree, CommonUtil } from '@supermap/iclient-common';
 import mapboxgl from 'mapbox-gl';
 /**
  * @class mapboxgl.supermap.GraticuleLayer
  * @category Visualization GraticuleLayer
  * @classdesc 经纬网。
  * @version 10.1.1
  * @param {Object} options -经纬网参数。
+ * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("graticuleLayer_") 创建图层 ID。
  * @param {boolean} [options.visible=true] - 是否显示经纬网。
  * @param {boolean} [options.showLabel=true] - 是否显示标签。
  * @param {number} [options.opacity=1] - 画布透明度。
@@ -82,9 +83,10 @@ const defaultOptions = {
     latLabelStyle: defaultTextStyle
 };
 export class GraticuleLayer {
-    constructor(options, sourceId = 'sm-graticule-layer') {
-        this.canvasId = 'sm-graticule-canvasid';
-        this.sourceId = sourceId;
+    constructor(options) {
+        this.id = options.layerID ? options.layerID : CommonUtil.createUniqueID('graticuleLayer_');
+        this.sourceId = this.id;
+        this.canvasId = this.id;
         this.options = options;
         this.resetEvent = this._reset.bind(this);
         this.styleDataEevent = this._setLayerTop.bind(this);
@@ -118,7 +120,7 @@ export class GraticuleLayer {
      * @param {boolean} visible - 是否可见。
      */
     setVisibility(visible) {
-        const zoom = this.map.getZoom();
+        const zoom = this.map && this.map.getZoom();
         this.options.visible = typeof visible === 'boolean' ? visible : this.options.visible;
         this.visible =
             typeof visible === 'boolean'
@@ -178,6 +180,9 @@ export class GraticuleLayer {
      * @param {mapboxgl.supermap.GraticuleLayer.StrokeStyle} strokeStyle - 经纬线样式。
      */
     setStrokeStyle(strokeStyle) {
+        if (!this.map || !this.map.getLayer(this.sourceId)) {
+            return;
+        }
         this.options.strokeStyle = strokeStyle;
         const { layout, paint } = this._transformStrokeStyle(strokeStyle);
         for (let key in layout) {
@@ -251,6 +256,7 @@ export class GraticuleLayer {
         this.oldExtent = this.options.extent;
         this._calcInterval();
         this.isRotate = false;
+        this.visible = true;
         this.features = this._getGraticuleFeatures();
     }
 
@@ -831,6 +837,7 @@ export class GraticuleLayer {
             return { paint: { 'line-color': strokeStyle || 'rgba(0,0,0,0.2)' } };
         }
         const layout = {
+            visibility: this.visible ? 'visible' : 'none',
             'line-join': strokeStyle.lineJoin || 'round',
             'line-cap': strokeStyle.lineCap || 'round'
         };
