[fix]经纬网设置visible失效；ol graphic旋转偏移和要素减少bug review by songym

luoxiao-supermap · luoxiao-supermap · commit 04e676d907cc · 2020-12-23T14:12:02.000+08:00
diff --git a/src/mapboxgl/overlay/GraticuleLayer.js b/src/mapboxgl/overlay/GraticuleLayer.js
@@ -16,7 +16,6 @@ import mapboxgl from 'mapbox-gl';
  * @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] - 是否显示标签。
@@ -83,8 +82,7 @@ const defaultOptions = {
     latLabelStyle: defaultTextStyle
 };
 export class GraticuleLayer {
-    constructor(map, options, sourceId = 'sm-graticule-layer') {
-        this.map = map;
+    constructor(options, sourceId = 'sm-graticule-layer') {
         this.canvasId = 'sm-graticule-canvasid';
         this.sourceId = sourceId;
         this.options = options;
@@ -101,6 +99,7 @@ export class GraticuleLayer {
         this._bindEvent();
         this._drawCanvas();
         this._addGraticuleLayer();
+        this.setVisibility();
     }
 
     /**
diff --git a/src/openlayers/overlay/Graphic.js b/src/openlayers/overlay/Graphic.js
@@ -82,8 +82,8 @@ export class Graphic extends ImageCanvasSource {
         const me = this;
 
         if (options.onClick) {
-            me.map.on('click', function (e) {
-                if(me.renderer instanceof GraphicWebGLRenderer){
+            me.map.on('click', function(e) {
+                if (me.renderer instanceof GraphicWebGLRenderer) {
                     return;
                 }
                 const features = me.map.getFeaturesAtPixel(e.pixel) || [];
@@ -108,9 +108,17 @@ export class Graphic extends ImageCanvasSource {
         }
         //eslint-disable-next-line no-unused-vars
         function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) {
+            var mapWidth = size[0] / pixelRatio;
+            var mapHeight = size[1] / pixelRatio;
+            var width = me.map.getSize()[0];
+            var height = me.map.getSize()[1];
             if (!me.renderer) {
                 me.renderer = createRenderer(size, pixelRatio);
             }
+            me.renderer.mapWidth = mapWidth;
+            me.renderer.mapHeight = mapHeight;
+            me.renderer.pixelRatio = pixelRatio;
+            me.renderer.offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
             let graphics = this.getGraphicsInExtent(extent);
             me.renderer._clearBuffer();
             me.renderer.selected = this.selected;
@@ -142,10 +150,10 @@ export class Graphic extends ImageCanvasSource {
                 opt = CommonUtil.extend(me, opt);
                 opt.pixelRatio = pixelRatio;
                 opt.container = me.map.getViewport().getElementsByClassName('ol-overlaycontainer')[0];
-                opt.onBeforeRender = function () {
+                opt.onBeforeRender = function() {
                     return false;
                 };
-                opt.onAfterRender = function () {
+                opt.onAfterRender = function() {
                     return false;
                 };
 
@@ -539,13 +547,13 @@ export class Graphic extends ImageCanvasSource {
     getGraphicsInExtent(extent) {
         var graphics = [];
         if (!extent) {
-            this.graphics.map(function (graphic) {
+            this.graphics.map(function(graphic) {
                 graphics.push(graphic);
                 return graphic;
             });
             return graphics;
         }
-        this.graphics.map(function (graphic) {
+        this.graphics.map(function(graphic) {
             if (olExtent.containsExtent(extent, graphic.getGeometry().getExtent())) {
                 graphics.push(graphic);
             }
diff --git a/src/openlayers/overlay/graphic/CanvasRenderer.js b/src/openlayers/overlay/graphic/CanvasRenderer.js
@@ -1,24 +1,13 @@
 /* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
  * This program are made available under the terms of the Apache License, Version 2.0
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
-import {
-    CommonUtil
-} from "@supermap/iclient-common";
-import {
-    Util
-} from '../../core/Util';
+import { CommonUtil } from '@supermap/iclient-common';
+import { Util } from '../../core/Util';
 import olObject from 'ol/Object';
 import * as olStyle from 'ol/style';
 import Point from 'ol/geom/Point';
 import * as olRender from 'ol/render';
 
-//获取某像素坐标点pixelP绕中心center逆时针旋转rotation弧度后的像素点坐标。
-function rotate(pixelP, rotation, center) {
-    let x = Math.cos(rotation) * (pixelP[0] - center[0]) - Math.sin(rotation) * (pixelP[1] - center[1]) + center[0];
-    let y = Math.sin(rotation) * (pixelP[0] - center[0]) + Math.cos(rotation) * (pixelP[1] - center[1]) + center[1];
-    return [x, y];
-}
-
 //获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
 function scale(pixelP, center, scaleRatio) {
     let x = (pixelP[0] - center[0]) * scaleRatio + center[0];
@@ -66,8 +55,8 @@ export class GraphicCanvasRenderer extends olObject {
         this.context = Util.createCanvasContext2D(this.mapWidth, this.mapHeight);
         this.context.scale(this.pixelRatio, this.pixelRatio);
         this.canvas = this.context.canvas;
-        this.canvas.style.width = this.width + "px";
-        this.canvas.style.height = this.height + "px";
+        this.canvas.style.width = this.width + 'px';
+        this.canvas.style.height = this.height + 'px';
         this._registerEvents();
     }
 
@@ -93,8 +82,8 @@ export class GraphicCanvasRenderer extends olObject {
 
         this.canvas.width = this.mapWidth;
         this.canvas.height = this.mapHeight;
-        this.canvas.style.width = this.width + "px";
-        this.canvas.style.height = this.height + "px";
+        this.canvas.style.width = this.width + 'px';
+        this.canvas.style.height = this.height + 'px';
     }
 
     _clearAndRedraw() {
@@ -108,7 +97,6 @@ export class GraphicCanvasRenderer extends olObject {
 
     _clearBuffer() {}
 
-
     /**
      * @private
      * @function  GraphicCanvasRenderer.prototype.getCanvas
@@ -126,13 +114,9 @@ export class GraphicCanvasRenderer extends olObject {
      */
     drawGraphics(graphics) {
         this.graphics_ = graphics || [];
-
         let mapWidth = this.mapWidth / this.pixelRatio;
         let mapHeight = this.mapHeight / this.pixelRatio;
-        let width = this.width;
-        let height = this.height;
 
-        let offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
         let vectorContext = olRender.toContext(this.context, {
             size: [mapWidth, mapHeight],
             pixelRatio: this.pixelRatio
@@ -141,7 +125,7 @@ export class GraphicCanvasRenderer extends olObject {
         let me = this,
             layer = me.layer,
             map = layer.map;
-        graphics.map(function (graphic) {
+        graphics.map(function(graphic) {
             let style = graphic.getStyle() || defaultStyle;
             if (me.selected === graphic) {
                 let defaultHighLightStyle = style;
@@ -171,22 +155,25 @@ export class GraphicCanvasRenderer extends olObject {
                 }
                 style = me.highLightStyle || defaultHighLightStyle;
             }
-            vectorContext.setStyle(new olStyle.Style({
-                image: style
-            }));
+            vectorContext.setStyle(
+                new olStyle.Style({
+                    image: style
+                })
+            );
             let geometry = graphic.getGeometry();
             let coordinate = geometry.getCoordinates();
-            let pixelP = map.getPixelFromCoordinate(coordinate);
-            let rotation = -map.getView().getRotation();
-            let center = map.getPixelFromCoordinate(map.getView().getCenter());
-            let scaledP = scale(pixelP, center, 1);
-            let rotatedP = rotate(scaledP, rotation, center);
-            let result = [rotatedP[0] + offset[0], rotatedP[1] + offset[1]];
+            let center = map.getView().getCenter();
+            let mapCenterPx = map.getPixelFromCoordinate(center);
+            let resolution = map.getView().getResolution();
+            let x = (coordinate[0] - center[0]) / resolution;
+            let y = (center[1] - coordinate[1]) / resolution;
+            let scaledP = [x + mapCenterPx[0], y + mapCenterPx[1]];
+            scaledP = scale(scaledP, mapCenterPx, 1);
+            //处理放大或缩小级别*/
+            let result = [scaledP[0] + me.offset[0], scaledP[1] + me.offset[1]];
             let pixelGeometry = new Point(result);
             vectorContext.drawGeometry(pixelGeometry);
             return graphic;
         });
     }
-
-
-}
+}
