Skip to content

Commit 04e676d

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]经纬网设置visible失效；ol graphic旋转偏移和要素减少bug review by songym
1 parent 8c3c287 commit 04e676d

File tree

3 files changed

+38
-44
lines changed

3 files changed

+38
-44
lines changed

‎src/mapboxgl/overlay/GraticuleLayer.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import mapboxgl from 'mapbox-gl';
1616
* @category Visualization GraticuleLayer
1717
* @classdesc 经纬网。
1818
* @version 10.1.1
19-
* @param {mapboxgl.Map} map - mapboxgl 地图对象,将在下个版本弃用，请用 map.addLayer() 方法添加图层。
2019
* @param {Object} options -经纬网参数。
2120
* @param {boolean} [options.visible=true] - 是否显示经纬网。
2221
* @param {boolean} [options.showLabel=true] - 是否显示标签。
@@ -83,8 +82,7 @@ const defaultOptions = {
8382
latLabelStyle: defaultTextStyle
8483
};
8584
export class GraticuleLayer {
86-
constructor(map, options, sourceId = 'sm-graticule-layer') {
87-
this.map = map;
85+
constructor(options, sourceId = 'sm-graticule-layer') {
8886
this.canvasId = 'sm-graticule-canvasid';
8987
this.sourceId = sourceId;
9088
this.options = options;
@@ -101,6 +99,7 @@ export class GraticuleLayer {
10199
this._bindEvent();
102100
this._drawCanvas();
103101
this._addGraticuleLayer();
102+
this.setVisibility();
104103
}
105104

106105
/**

‎src/openlayers/overlay/Graphic.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ export class Graphic extends ImageCanvasSource {
8282
const me = this;
8383

8484
if (options.onClick) {
85-
me.map.on('click', function (e) {
86-
if(me.renderer instanceof GraphicWebGLRenderer){
85+
me.map.on('click', function(e) {
86+
if (me.renderer instanceof GraphicWebGLRenderer) {
8787
return;
8888
}
8989
const features = me.map.getFeaturesAtPixel(e.pixel) || [];
@@ -108,9 +108,17 @@ export class Graphic extends ImageCanvasSource {
108108
}
109109
//eslint-disable-next-line no-unused-vars
110110
function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) {
111+
var mapWidth = size[0] / pixelRatio;
112+
var mapHeight = size[1] / pixelRatio;
113+
var width = me.map.getSize()[0];
114+
var height = me.map.getSize()[1];
111115
if (!me.renderer) {
112116
me.renderer = createRenderer(size, pixelRatio);
113117
}
118+
me.renderer.mapWidth = mapWidth;
119+
me.renderer.mapHeight = mapHeight;
120+
me.renderer.pixelRatio = pixelRatio;
121+
me.renderer.offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
114122
let graphics = this.getGraphicsInExtent(extent);
115123
me.renderer._clearBuffer();
116124
me.renderer.selected = this.selected;
@@ -142,10 +150,10 @@ export class Graphic extends ImageCanvasSource {
142150
opt = CommonUtil.extend(me, opt);
143151
opt.pixelRatio = pixelRatio;
144152
opt.container = me.map.getViewport().getElementsByClassName('ol-overlaycontainer')[0];
145-
opt.onBeforeRender = function () {
153+
opt.onBeforeRender = function() {
146154
return false;
147155
};
148-
opt.onAfterRender = function () {
156+
opt.onAfterRender = function() {
149157
return false;
150158
};
151159

@@ -539,13 +547,13 @@ export class Graphic extends ImageCanvasSource {
539547
getGraphicsInExtent(extent) {
540548
var graphics = [];
541549
if (!extent) {
542-
this.graphics.map(function (graphic) {
550+
this.graphics.map(function(graphic) {
543551
graphics.push(graphic);
544552
return graphic;
545553
});
546554
return graphics;
547555
}
548-
this.graphics.map(function (graphic) {
556+
this.graphics.map(function(graphic) {
549557
if (olExtent.containsExtent(extent, graphic.getGeometry().getExtent())) {
550558
graphics.push(graphic);
551559
}

‎src/openlayers/overlay/graphic/CanvasRenderer.js‎

Lines changed: 22 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
/* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
22
* This program are made available under the terms of the Apache License, Version 2.0
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4-
import {
5-
CommonUtil
6-
} from "@supermap/iclient-common";
7-
import {
8-
Util
9-
} from '../../core/Util';
4+
import { CommonUtil } from '@supermap/iclient-common';
5+
import { Util } from '../../core/Util';
106
import olObject from 'ol/Object';
117
import * as olStyle from 'ol/style';
128
import Point from 'ol/geom/Point';
139
import * as olRender from 'ol/render';
1410

15-
//获取某像素坐标点pixelP绕中心center逆时针旋转rotation弧度后的像素点坐标。
16-
function rotate(pixelP, rotation, center) {
17-
let x = Math.cos(rotation) * (pixelP[0] - center[0]) - Math.sin(rotation) * (pixelP[1] - center[1]) + center[0];
18-
let y = Math.sin(rotation) * (pixelP[0] - center[0]) + Math.cos(rotation) * (pixelP[1] - center[1]) + center[1];
19-
return [x, y];
20-
}
21-
2211
//获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
2312
function scale(pixelP, center, scaleRatio) {
2413
let x = (pixelP[0] - center[0]) * scaleRatio + center[0];
@@ -66,8 +55,8 @@ export class GraphicCanvasRenderer extends olObject {
6655
this.context = Util.createCanvasContext2D(this.mapWidth, this.mapHeight);
6756
this.context.scale(this.pixelRatio, this.pixelRatio);
6857
this.canvas = this.context.canvas;
69-
this.canvas.style.width = this.width + "px";
70-
this.canvas.style.height = this.height + "px";
58+
this.canvas.style.width = this.width + 'px';
59+
this.canvas.style.height = this.height + 'px';
7160
this._registerEvents();
7261
}
7362

@@ -93,8 +82,8 @@ export class GraphicCanvasRenderer extends olObject {
9382

9483
this.canvas.width = this.mapWidth;
9584
this.canvas.height = this.mapHeight;
96-
this.canvas.style.width = this.width + "px";
97-
this.canvas.style.height = this.height + "px";
85+
this.canvas.style.width = this.width + 'px';
86+
this.canvas.style.height = this.height + 'px';
9887
}
9988

10089
_clearAndRedraw() {
@@ -108,7 +97,6 @@ export class GraphicCanvasRenderer extends olObject {
10897

10998
_clearBuffer() {}
11099

111-
112100
/**
113101
* @private
114102
* @function GraphicCanvasRenderer.prototype.getCanvas
@@ -126,13 +114,9 @@ export class GraphicCanvasRenderer extends olObject {
126114
*/
127115
drawGraphics(graphics) {
128116
this.graphics_ = graphics || [];
129-
130117
let mapWidth = this.mapWidth / this.pixelRatio;
131118
let mapHeight = this.mapHeight / this.pixelRatio;
132-
let width = this.width;
133-
let height = this.height;
134119

135-
let offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
136120
let vectorContext = olRender.toContext(this.context, {
137121
size: [mapWidth, mapHeight],
138122
pixelRatio: this.pixelRatio
@@ -141,7 +125,7 @@ export class GraphicCanvasRenderer extends olObject {
141125
let me = this,
142126
layer = me.layer,
143127
map = layer.map;
144-
graphics.map(function (graphic) {
128+
graphics.map(function(graphic) {
145129
let style = graphic.getStyle() || defaultStyle;
146130
if (me.selected === graphic) {
147131
let defaultHighLightStyle = style;
@@ -171,22 +155,25 @@ export class GraphicCanvasRenderer extends olObject {
171155
}
172156
style = me.highLightStyle || defaultHighLightStyle;
173157
}
174-
vectorContext.setStyle(new olStyle.Style({
175-
image: style
176-
}));
158+
vectorContext.setStyle(
159+
new olStyle.Style({
160+
image: style
161+
})
162+
);
177163
let geometry = graphic.getGeometry();
178164
let coordinate = geometry.getCoordinates();
179-
let pixelP = map.getPixelFromCoordinate(coordinate);
180-
let rotation = -map.getView().getRotation();
181-
let center = map.getPixelFromCoordinate(map.getView().getCenter());
182-
let scaledP = scale(pixelP, center, 1);
183-
let rotatedP = rotate(scaledP, rotation, center);
184-
let result = [rotatedP[0] + offset[0], rotatedP[1] + offset[1]];
165+
let center = map.getView().getCenter();
166+
let mapCenterPx = map.getPixelFromCoordinate(center);
167+
let resolution = map.getView().getResolution();
168+
let x = (coordinate[0] - center[0]) / resolution;
169+
let y = (center[1] - coordinate[1]) / resolution;
170+
let scaledP = [x + mapCenterPx[0], y + mapCenterPx[1]];
171+
scaledP = scale(scaledP, mapCenterPx, 1);
172+
//处理放大或缩小级别*/
173+
let result = [scaledP[0] + me.offset[0], scaledP[1] + me.offset[1]];
185174
let pixelGeometry = new Point(result);
186175
vectorContext.drawGeometry(pixelGeometry);
187176
return graphic;
188177
});
189178
}
190-
191-
192-
}
179+
}

0 commit comments

Comments
 (0)