[update]mapbox经纬网新增set方法 review by songym

luoxiao-supermap · luoxiao-supermap · commit 71516ab12c1c · 2020-12-22T10:18:45.000+08:00
diff --git a/build/jsdocs/template/config.json b/build/jsdocs/template/config.json
@@ -327,7 +327,7 @@
         "name": "Three"
       },
       "GraticuleLayer": {
-        "name": "GraticuleLayer"
+        "name": "经纬网"
       }
     }
   },
diff --git a/src/common/util/MapCalculateUtil.js b/src/common/util/MapCalculateUtil.js
@@ -20,7 +20,7 @@ export var getMeterPerMapUnit = function(mapUnit) {
     return meterPerMapUnit;
 };
 
-export function getWrapNum(x, range = [-180, 180], includeMax = true, includeMin) {
+export function getWrapNum(x, includeMax = true, includeMin = true, range = [-180, 180]) {
     var max = range[1],
         min = range[0],
         d = max - min;
@@ -38,10 +38,10 @@ export function getWrapNum(x, range = [-180, 180], includeMax = true, includeMin
 }
 
 export function conversionDegree(degrees) {
-  const degree = parseInt(degrees);
-  let fraction = parseInt((degrees - degree) * 60);
-  let second = parseInt(((degrees - degree) * 60 - fraction) * 60);
-  fraction = parseInt(fraction / 10) === 0 ? `0${fraction}` : fraction;
-  second = parseInt(second / 10) === 0 ? `0${second}` : second;
-  return `${degree}°${fraction}'${second}`;
+    const degree = parseInt(degrees);
+    let fraction = parseInt((degrees - degree) * 60);
+    let second = parseInt(((degrees - degree) * 60 - fraction) * 60);
+    fraction = parseInt(fraction / 10) === 0 ? `0${fraction}` : fraction;
+    second = parseInt(second / 10) === 0 ? `0${second}` : second;
+    return `${degree}°${fraction}'${second}`;
 }
diff --git a/src/mapboxgl/overlay/GraticuleLayer.js b/src/mapboxgl/overlay/GraticuleLayer.js
@@ -15,14 +15,15 @@ import mapboxgl from 'mapbox-gl';
  * @class mapboxgl.supermap.GraticuleLayer
  * @category Visualization GraticuleLayer
  * @classdesc 经纬网。
+ * @version 10.1.1
  * @param {mapboxgl.Map} map - mapboxgl 地图对象,将在下个版本弃用，请用 map.addLayer() 方法添加图层。
  * @param {Object} options -经纬网参数。
  * @param {boolean} [options.visible=true] - 是否显示经纬网。
  * @param {boolean} [options.showLabel=true] - 是否显示标签。
  * @param {number} [options.opacity=1] - 画布透明度。
  * @param {number|Function} [options.interval = 10] - 经纬度的间隔（以度为单位），可以是数字，也可以是函数，参数是map。
  * @param {mapboxgl.LngLatBounds} [options.extent] - 经纬网渲染的边界范围（[minx, miny, maxx, maxy]），不传为整个地图范围。
- * @param {number} [options.minZoom] - 	最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。。
+ * @param {number} [options.minZoom] - 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。
  * @param {number} [options.maxZoom] - 该图层可见的最大视图缩放级别（含）。
  * @param {Function} [options.lngLabelFormatter = null] - 经度标签转换函数。
  * @param {Function} [options.latLabelFormatter = null] - 纬度标签转换函数。
@@ -46,8 +47,8 @@ import mapboxgl from 'mapbox-gl';
  * @property {string} [lineColor = 'red'] - 线颜色。
  * @property {string} [lineCap = 'round'] - 线端点风格：butt, round, square。
  * @property {string} [lineJoin = round] - 线连接样式：bevel, round, miter。
- * @property {Array.<number>|Function} [lindDasharray = [0.5,4]] - 虚线样式。可以是数组，也可以是函数，参数是map。
- * @property {number|Function} [lineWidth = 1] - 线宽：可以是数字，也可以是函数，参数是map。
+ * @property {Array.<number>} [lindDasharray = [0.5,4]] - 虚线样式。
+ * @property {number} [lineWidth = 1] - 线宽。
  */
 
 const defaultTextStyle = {
@@ -115,6 +116,7 @@ export class GraticuleLayer {
     /**
      * @function mapboxgl.supermap.GraticuleLayer.prototype.setVisibility
      * @description 设置是否可见。
+     * @param {boolean} visible - 是否可见。
      */
     setVisibility(visible) {
         const zoom = this.map.getZoom();
@@ -129,6 +131,97 @@ export class GraticuleLayer {
         this._drawLabel();
     }
 
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setMinZoom
+     * @description 设置最小视图缩放级别。
+     * @param {number} minZoom - 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。
+     */
+    setMinZoom(minZoom) {
+        this.options.minZoom = minZoom;
+        this.setVisibility();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setMaxZoom
+     * @description 该图层可见的最大视图缩放级别。
+     * @param {number} maxZoom - 该图层可见的最大视图缩放级别（含）。
+     */
+    setMaxZoom(maxZoom) {
+        this.options.maxZoom = maxZoom;
+        this.setVisibility();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setShowLabel
+     * @description 设置显示标签。
+     * @param {boolean} showLabel - 是否显示标签。
+     */
+    setShowLabel(showLabel) {
+        this.options.showLabel = showLabel;
+        this._drawLabel();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setExtent
+     * @description 设置经纬网渲染的边界范围。
+     * @param {mapboxgl.LngLatBounds} extent - 经纬网渲染的边界范围。
+     */
+    setExtent(extent) {
+        this.options.extent = this._getDefaultExtent(extent, this.map);
+        this.features = this._getGraticuleFeatures();
+        this._updateGraticuleLayer();
+        this._drawLabel();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setStrokeStyle
+     * @description 设置经纬线样式。
+     * @param {mapboxgl.supermap.GraticuleLayer.StrokeStyle} strokeStyle - 经纬线样式。
+     */
+    setStrokeStyle(strokeStyle) {
+        this.options.strokeStyle = strokeStyle;
+        const { layout, paint } = this._transformStrokeStyle(strokeStyle);
+        for (let key in layout) {
+            this.map.setLayoutProperty(this.sourceId, key, layout[key]);
+        }
+        for (let key in paint) {
+            this.map.setPaintProperty(this.sourceId, key, paint[key]);
+        }
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setLngLabelStyle
+     * @description 设置经度标签样式。
+     * @param {mapboxgl.supermap.GraticuleLayer.LabelStyle} labelStyle - 标签样式。
+     */
+    setLngLabelStyle(labelStyle) {
+        this.options.lngLabelStyle = labelStyle;
+        this._drawLabel();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setLatLabelStyle
+     * @description 设置纬度标签样式。
+     * @param {mapboxgl.supermap.GraticuleLayer.LabelStyle} labelStyle - 标签样式。
+     */
+    setLatLabelStyle(labelStyle) {
+        this.options.latLabelStyle = labelStyle;
+        this._drawLabel();
+    }
+
+    /**
+     * @function mapboxgl.supermap.GraticuleLayer.prototype.setIntervals
+     * @description 设置经纬度的间隔（以度为单位)
+     * @param {number|Function} interval - 经纬度的间隔（以度为单位），可以是数字，也可以是函数，参数是map。
+     */
+    setIntervals(interval) {
+        this.options.interval = interval;
+        this._calcInterval();
+        this.features = this._getGraticuleFeatures();
+        this._updateGraticuleLayer();
+        this._drawLabel();
+    }
+
     _bindEvent() {
         this.map.on('move', this.resetEvent);
         this.map.on('moveend', this.resetEvent);
@@ -241,10 +334,8 @@ export class GraticuleLayer {
     }
 
     _updateRotate() {
-        const canvas = this.canvas;
-        const sw = this.map.unproject([0, canvas.height]);
-        const ne = this.map.unproject([canvas.width, 0]);
-        this.isRotate = sw.lng > ne.lng;
+        const bearing = this.map.getBearing();
+        this.isRotate = (bearing > -180 && bearing <= -90) || (bearing >= 90 && bearing < 180);
     }
 
     _updateExtent() {
@@ -372,9 +463,7 @@ export class GraticuleLayer {
 
         features.forEach(feature => {
             const lat = feature.geometry.coordinates[0][1];
-
-            const isLatFeature = feature.geometry.coordinates[1][1];
-
+            const isLatFeature = feature.geometry.coordinates[1][1] === lat;
             if (isLatFeature) {
                 let lng = typeof lastLng === 'number' ? lastLng : lngRange[1];
                 if (this.isRotate) {
@@ -402,7 +491,7 @@ export class GraticuleLayer {
 
         features.forEach(feature => {
             let lng = feature.geometry.coordinates[0][0];
-            const isLngFeature = feature.geometry.coordinates[1][0];
+            const isLngFeature = feature.geometry.coordinates[1][0] === lng;
             if (isLngFeature) {
                 points.push([lng, lat]);
                 if (this.options.wrapX) {
@@ -420,20 +509,13 @@ export class GraticuleLayer {
         const lastLng = extent.length > 2 ? extent[2] : extent[1];
         while (lng >= _sw.lng) {
             const wrapNum = getWrapNum(lng, lastLng === 180, extent[0] === -180);
-            // if (wrapNum === -180 && lastLng === 180 && extent[0] !== -180) {
-            //     wrapNum = 180;
-            // }
             if (!extent || (wrapNum >= extent[0] && wrapNum <= lastLng)) {
                 points.push([lng, lat]);
             }
             lng -= 360;
         }
         while (lng <= _ne.lng) {
             const wrapNum = getWrapNum(lng, lastLng === 180, extent[0] === -180);
-            // let wrapNum = getWrapNum(lng);
-            // if (wrapNum === 180 && lastLng !== 180 && extent[0] === -180) {
-            //     wrapNum = -180;
-            // }
             if (!extent || (wrapNum >= extent[0] && wrapNum <= lastLng)) {
                 points.push([lng, lat]);
             }
@@ -584,9 +666,21 @@ export class GraticuleLayer {
             return points;
         }
         var tmp = intersectPoints;
+        const width = this.canvas.width;
+        const height = this.canvas.height;
         for (var i in points) {
-            if (!tmp.find(item => item[0] === points[i][index])) {
+            const edgePoint = this.map.project(points[i]);
+            const intersetIndex = tmp.findIndex(item => item[0] === points[i][index]);
+            if (intersetIndex <= -1) {
                 tmp.push(points[i]);
+            } else if (
+                edgePoint &&
+                edgePoint.x >= 0 &&
+                edgePoint.x <= width &&
+                edgePoint.y >= 0 &&
+                edgePoint.y <= height
+            ) {
+                tmp[intersetIndex] = points[i];
             }
         }
         return tmp;
@@ -621,6 +715,17 @@ export class GraticuleLayer {
         }
     }
 
+    _updateGraticuleLayer(features = this.features) {
+        if (this.map.getSource(this.sourceId)) {
+            const geoJSONData = {
+                type: 'FeatureCollection',
+                features
+            };
+            this.map.getSource(this.sourceId).setData(geoJSONData);
+        }
+        this._addGraticuleLayer();
+    }
+
     _getGraticuleFeatures() {
         const _currLngInterval = this._currLngInterval || 10;
         const _currLatInterval = this._currLatInterval || 10;
@@ -665,22 +770,23 @@ export class GraticuleLayer {
         const realExtent = {};
         if (extent[1] % this._currLatInterval !== 0) {
             realExtent.firstLat = extent[1];
-            let intNumber = parseInt(extent[1] / this._currLatInterval);
-            intNumber = extent[1] > 0 ? intNumber + 1 : intNumber - 1;
+            const intNumber = Math.ceil(extent[1] / this._currLatInterval);
             extent[1] = intNumber * this._currLatInterval;
         }
         if (extent[3] % this._currLatInterval !== 0) {
             realExtent.lastLat = extent[3];
-            extent[3] = parseInt(extent[3] / this._currLatInterval) * this._currLatInterval;
+            const intNumber = Math.floor(extent[3] / this._currLatInterval);
+            extent[3] = intNumber * this._currLatInterval;
         }
         if (extent[0] % this._currLngInterval !== 0) {
             realExtent.firstLng = extent[0];
-            let intNumbers = parseInt(extent[0] / this._currLngInterval);
-            extent[0] = intNumbers * this._currLngInterval;
+            const intNumber = Math.ceil(extent[0] / this._currLngInterval);
+            extent[0] = intNumber * this._currLngInterval;
         }
         if (extent[2] % this._currLngInterval !== 0) {
             realExtent.lastLng = extent[2];
-            extent[2] = parseInt(extent[2] / this._currLngInterval) * this._currLngInterval;
+            const intNumber = Math.floor(extent[2] / this._currLngInterval);
+            extent[2] = intNumber * this._currLngInterval;
         }
         return { latRange: [extent[1], extent[3]], lngRange: [extent[0], extent[2]], extent, ...realExtent };
     }
@@ -758,7 +864,7 @@ export class GraticuleLayer {
             ctx.fillStyle = labelStyle.textColor;
         }
         if (labelStyle.textSize) {
-            ctx.font = labelStyle.textSize + ' ' + labelStyle.textFont.join(',');
+            ctx.font = labelStyle.textSize + ' ' + (labelStyle.textFont || ['Calibri', 'sans-serif']).join(',');
         }
         if (labelStyle.textHaloColor) {
             ctx.strokeStyle = labelStyle.textHaloColor;
diff --git a/test/mapboxgl/overlay/GraticuleLayerSpec.js b/test/mapboxgl/overlay/GraticuleLayerSpec.js
@@ -82,6 +82,47 @@ describe('mapboxgl_GraticuleLayer', () => {
         expect(visible).toBe('visible');
     });
 
+    it('setMinZoom', () => {
+        graticuleLayer.setMinZoom(0);
+        expect(graticuleLayer.options.minZoom).toEqual(0);
+    });
+
+    it('setMaxZoom', () => {
+        graticuleLayer.setMaxZoom(10);
+        expect(graticuleLayer.options.maxZoom).toEqual(10);
+    });
+
+    it('setShowLabel', () => {
+        graticuleLayer.setShowLabel(false);
+        expect(graticuleLayer.options.showLabel).toEqual(false);
+    });
+
+    it('setExtent', () => {
+        graticuleLayer.setExtent([[0, 0], [50, 50]]);
+        expect(graticuleLayer.options.extent[0]).toEqual(0);
+        expect(graticuleLayer.options.extent[3]).toEqual(50);
+    });
+
+    it('setStrokeStyle', () => {
+        graticuleLayer.setStrokeStyle({ lineWidth: 3 });
+        expect(graticuleLayer.options.strokeStyle.lineWidth).toEqual(3);
+    });
+
+    it('setLngLabelStyle', () => {
+        graticuleLayer.setLngLabelStyle({ textSize: '12px' });
+        expect(graticuleLayer.options.lngLabelStyle.textSize).toEqual('12px');
+    });
+
+    it('setLatLabelStyle', () => {
+        graticuleLayer.setLatLabelStyle({ textSize: '12px' });
+        expect(graticuleLayer.options.latLabelStyle.textSize).toEqual('12px');
+    });
+
+    it('setIntervals', () => {
+        graticuleLayer.setIntervals(5);
+        expect(graticuleLayer.options.interval).toEqual(5);
+    });
+
     it('_calcInterval', () => {
         const interval = map.getZoom();
         const calcInterval = map => {

Original file line number	Diff line number	Diff line change
`@@ -327,7 +327,7 @@`
`327`	`327`	`"name": "Three"`
`328`	`328`	`},`
`329`	`329`	`"GraticuleLayer": {`
`330`		`- "name": "GraticuleLayer"`
	`330`	`+ "name": "经纬网"`
`331`	`331`	`}`
`332`	`332`	`}`
`333`	`333`	`},`