Skip to content

Commit caedb8f

Browse files
Yuki-ZhaoYuki-Zhao
committed
2 parents 7569cd7 + b6554e2 commit caedb8f

File tree

4 files changed

+375
-270
lines changed

4 files changed

+375
-270
lines changed

‎src/leaflet/overlay/GraphicLayer.js

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const defaultProps = {
4141
* @param {Function} [options.onHover] - 图层鼠标悬停响应事件（只有 webgl 渲染时有用）。
4242
*/
4343
export var GraphicLayer = L.Path.extend({
44-
initialize: function(graphics, options) {
44+
initialize: function (graphics, options) {
4545
this.graphics = [].concat(graphics);
4646
let opt = options || {};
4747
// 由于是canvas实现所以不能更改pane
@@ -53,7 +53,9 @@ export var GraphicLayer = L.Path.extend({
5353
if (!Detector.supportWebGL2()) {
5454
this.options.render = Renderer[0];
5555
}
56-
this.on('click mousemove dblclick mousedown mouseup mouseout contextmenu', this._handleClick, this);
56+
if (this.options.interactive) {
57+
this.on('click mousemove dblclick mousedown mouseup mouseout contextmenu', this._handleClick, this);
58+
}
5759
},
5860

5961
/**
@@ -62,7 +64,7 @@ export var GraphicLayer = L.Path.extend({
6264
* @description 获取事件。
6365
* @returns {Object} 返回该图层支持的事件对象。
6466
*/
65-
getEvents: function() {
67+
getEvents: function () {
6668
const events = {
6769
resize: this._resize.bind(this),
6870
moveend: this._moveEnd.bind(this)
@@ -75,12 +77,12 @@ export var GraphicLayer = L.Path.extend({
7577
* @function L.supermap.graphicLayer.prototype.onAdd
7678
* @description 添加图形。
7779
*/
78-
onAdd: function(map) {
80+
onAdd: function (map) {
7981
this._map = map;
8082
this.defaultStyle = this._getDefaultStyle(this.options);
8183
this._renderer = this._createRenderer();
8284
this._container = this._renderer._container;
83-
this.addInteractiveTarget(this._container);
85+
// this.addInteractiveTarget(this._container);
8486
L.Path.prototype.onAdd.call(this);
8587
},
8688

@@ -90,7 +92,7 @@ export var GraphicLayer = L.Path.extend({
9092
* @function L.supermap.graphicLayer.prototype.onRemove
9193
* @description 移除图层。
9294
*/
93-
onRemove: function() {
95+
onRemove: function () {
9496
this.off('click mousemove dblclick mousedown mouseup contextmenu', this._handleClick, this);
9597
this._renderer._removePath(this);
9698
},
@@ -100,7 +102,7 @@ export var GraphicLayer = L.Path.extend({
100102
* @description 设置绘制的点要素数据，会覆盖之前的所有要素。
101103
* @param {Array.<L.supermap.graphic>} graphics - 点要素对象数组。
102104
*/
103-
setGraphics: function(graphics) {
105+
setGraphics: function (graphics) {
104106
this.graphics = this.graphics || [];
105107
this.graphics.length = 0;
106108
let sGraphics = !L.Util.isArray(graphics) ? [graphics] : [].concat(graphics);
@@ -113,7 +115,7 @@ export var GraphicLayer = L.Path.extend({
113115
* @description 追加点要素，不会覆盖之前的要素。
114116
* @param {Array.<L.supermap.graphic>} graphics - 点要素对象数组。
115117
*/
116-
addGraphics: function(graphics) {
118+
addGraphics: function (graphics) {
117119
this.graphics = this.graphics || [];
118120
let sGraphics = !L.Util.isArray(graphics) ? [graphics] : [].concat(graphics);
119121
this.graphics = this.graphics.concat(sGraphics);
@@ -216,7 +218,7 @@ export var GraphicLayer = L.Path.extend({
216218
* @param {number} [styleOptions.strokeWidth=1] - 边框大小。
217219
* @param {boolean} [styleOptions.outline=false] - 是否显示边框。
218220
*/
219-
setStyle: function(styleOptions) {
221+
setStyle: function (styleOptions) {
220222
let _opt = this.options;
221223
let styleOpt = {
222224
color: _opt.color,
@@ -238,15 +240,15 @@ export var GraphicLayer = L.Path.extend({
238240
* @function L.supermap.graphicLayer.prototype.update
239241
* @description 更新图层，数据或者样式改变后调用。
240242
*/
241-
update: function() {
243+
update: function () {
242244
this._layerRenderer.update(this.graphics);
243245
},
244246

245247
/**
246248
* @function L.supermap.graphicLayer.prototype.clear
247249
* @description 释放图层资源。
248250
*/
249-
clear: function() {
251+
clear: function () {
250252
this.removeGraphics();
251253
},
252254

@@ -255,7 +257,7 @@ export var GraphicLayer = L.Path.extend({
255257
* @description 获取渲染器。
256258
* @returns {Object} 内部渲染器。
257259
*/
258-
getRenderer: function() {
260+
getRenderer: function () {
259261
return this._renderer;
260262
},
261263

@@ -264,7 +266,7 @@ export var GraphicLayer = L.Path.extend({
264266
* @description 获取当前地图及图层状态。
265267
* @returns {Object} 地图及图层状态，包含地图状态信息和本图层相关状态。
266268
*/
267-
getState: function() {
269+
getState: function () {
268270
let map = this._map;
269271
let width = map.getSize().x;
270272
let height = map.getSize().y;
@@ -302,7 +304,7 @@ export var GraphicLayer = L.Path.extend({
302304
return state;
303305
},
304306

305-
_resize: function() {
307+
_resize: function () {
306308
let size = this._map.getSize();
307309
this._container.width = size.x;
308310
this._container.height = size.y;
@@ -313,13 +315,13 @@ export var GraphicLayer = L.Path.extend({
313315
L.DomUtil.setPosition(this._container, mapOffset);
314316
this._update();
315317
},
316-
_moveEnd: function() {
318+
_moveEnd: function () {
317319
if (this._layerRenderer instanceof GraphicWebGLRenderer) {
318320
this._update();
319321
}
320322
},
321323
//使用canvas渲染或webgl渲染
322-
_createRenderer: function() {
324+
_createRenderer: function () {
323325
let map = this._map;
324326
let width = map.getSize().x;
325327
let height = map.getSize().y;
@@ -354,7 +356,7 @@ export var GraphicLayer = L.Path.extend({
354356
* @private
355357
* @override
356358
*/
357-
_update: function() {
359+
_update: function () {
358360
if (this._map) {
359361
this._updatePath();
360362
}
@@ -364,7 +366,7 @@ export var GraphicLayer = L.Path.extend({
364366
* @private
365367
* @override
366368
*/
367-
_updatePath: function() {
369+
_updatePath: function () {
368370
let graphics = this._getGraphicsInBounds();
369371
this._renderer.drawGraphics(graphics, this.defaultStyle);
370372
},
@@ -373,9 +375,9 @@ export var GraphicLayer = L.Path.extend({
373375
* @private
374376
* @override
375377
*/
376-
_project: function() {
378+
_project: function () {
377379
let me = this;
378-
me._getGraphicsInBounds().map(function(graphic) {
380+
me._getGraphicsInBounds().map(function (graphic) {
379381
let point = me._map.latLngToLayerPoint(graphic.getLatLng());
380382
let w = me._clickTolerance();
381383
let p = [graphic._anchor + w, graphic._anchor + w];
@@ -384,7 +386,7 @@ export var GraphicLayer = L.Path.extend({
384386
});
385387
me._pxBounds = L.bounds(L.point(0, 0), L.point(this._container.width, this._container.height));
386388
},
387-
_getDefaultStyle: function(options) {
389+
_getDefaultStyle: function (options) {
388390
const target = {};
389391
if (options.color) {
390392
target.fill = true;
@@ -410,11 +412,11 @@ export var GraphicLayer = L.Path.extend({
410412
toRGBA(colorArray) {
411413
return `rgba(${colorArray[0]},${colorArray[1]},${colorArray[2]},${(colorArray[3] || 255) / 255})`;
412414
},
413-
_getGraphicsInBounds: function() {
415+
_getGraphicsInBounds: function () {
414416
let me = this;
415417
let graphicsInBounds = [];
416418
let viewBounds = me._map.getBounds();
417-
this.graphics.map(function(graphic) {
419+
this.graphics.map(function (graphic) {
418420
if (viewBounds.contains(graphic.getLatLng())) {
419421
graphicsInBounds.push(graphic);
420422
}
@@ -423,7 +425,7 @@ export var GraphicLayer = L.Path.extend({
423425
return graphicsInBounds;
424426
},
425427

426-
_handleClick: function(evt) {
428+
_handleClick: function (evt) {
427429
this._layerRenderer._handleClick(evt);
428430
},
429431
/**
@@ -436,10 +438,12 @@ export var GraphicLayer = L.Path.extend({
436438
* @private
437439
* @override
438440
*/
439-
_containsPoint: L.Util.falseFn
441+
_containsPoint: function (p) {
442+
return this._layerRenderer.containsPoint(p);
443+
}
440444
});
441445

442-
export let graphicLayer = function(graphics, options) {
446+
export let graphicLayer = function (graphics, options) {
443447
return new GraphicLayer(graphics, options);
444448
};
445449

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

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import L from 'leaflet';
55

66
const emptyFunc = L.Util.falseFn;
77
export var GraphicCanvasRenderer = L.Class.extend({
8-
initialize: function(layer, options) {
8+
initialize: function (layer, options) {
99
this.layer = layer;
1010
options = options || {};
1111
L.Util.setOptions(this, options);
@@ -17,7 +17,7 @@ export var GraphicCanvasRenderer = L.Class.extend({
1717
* @description 返回渲染器给图层，提供图层后续的数据增删改。
1818
* @returns {L.Canvas}
1919
*/
20-
getRenderer: function() {
20+
getRenderer: function () {
2121
return this.options.renderer;
2222
},
2323

@@ -26,18 +26,15 @@ export var GraphicCanvasRenderer = L.Class.extend({
2626
* @function GraphicCanvasRenderer.prototype.update
2727
* @description 更新图层，数据或者样式改变后调用。
2828
*/
29-
update: function() {
30-
this.getRenderer()._clear();
29+
update: function () {
30+
this.getRenderer()._clear();
3131
this.getRenderer()._draw();
3232
},
33-
34-
_handleClick: function(evt) {
35-
let me = this,
36-
layer = me.layer,
37-
map = layer._map;
33+
_getGraphicAtPoint: function (p) {
34+
const layer = this.layer;
35+
const map = layer._map;
3836

3937
let graphics = layer._getGraphicsInBounds();
40-
evt.target = null;
4138
for (let i = graphics.length - 1; i >= 0; i--) {
4239
let p1, p2, bounds;
4340
const center = map.latLngToLayerPoint(graphics[i].getLatLng());
@@ -60,30 +57,43 @@ export var GraphicCanvasRenderer = L.Class.extend({
6057
p2 = L.point(center.x + style.width / 2, center.y + style.height / 2);
6158
}
6259
bounds = L.bounds(p1, p2);
63-
if (bounds.contains(map.latLngToLayerPoint(evt.latlng))) {
64-
this.layer._renderer._ctx.canvas.style.cursor = 'pointer';
65-
evt.target = graphics[i];
66-
if (evt.type === 'click' && layer.options.onClick) {
67-
layer.options.onClick.call(layer, graphics[i], evt);
68-
}
69-
return;
60+
if (bounds.contains(p)) {
61+
return graphics[i];
7062
}
71-
this.layer._renderer._ctx.canvas.style.cursor = 'auto';
7263
}
64+
return null;
65+
},
66+
containsPoint: function (p) {
67+
return !!this._getGraphicAtPoint(p);
68+
},
69+
_handleClick: function (evt) {
70+
evt.target = null;
71+
const layer = this.layer;
72+
const map = layer._map;
73+
const graphic = this._getGraphicAtPoint(map.latLngToLayerPoint(evt.latlng));
74+
if (graphic) {
75+
this.layer._renderer._ctx.canvas.style.cursor = 'pointer';
76+
evt.target = graphic;
77+
if (evt.type === 'click' && layer.options.onClick) {
78+
layer.options.onClick.call(layer, graphic, evt);
79+
}
80+
return;
81+
}
82+
this.layer._renderer._ctx.canvas.style.cursor = 'auto';
7383
},
7484

7585
//跟GraphicWebGLRenderer保持一致
7686
_clearBuffer: emptyFunc
7787
});
7888

7989
L.Canvas.include({
80-
drawGraphics: function(graphics, defaultStyle) {
90+
drawGraphics: function (graphics, defaultStyle) {
8191
var me = this;
8292
if (!me._drawing) {
8393
return;
8494
}
8595
//this._ctx.clearRect(0, 0, this._ctx.canvas.width, me._ctx.canvas.height);
86-
graphics.forEach(function(graphic) {
96+
graphics.forEach(function (graphic) {
8797
var style = graphic.getStyle();
8898
if (!style && defaultStyle) {
8999
style = defaultStyle;
@@ -98,7 +108,7 @@ L.Canvas.include({
98108
});
99109
},
100110

101-
_drawCanvas: function(ctx, style, latLng) {
111+
_drawCanvas: function (ctx, style, latLng) {
102112
var canvas = style;
103113
var pt = this._map.latLngToLayerPoint(latLng);
104114
var p0 = pt.x - canvas.width / 2;
@@ -109,7 +119,7 @@ L.Canvas.include({
109119
ctx.drawImage(canvas, p0, p1, width, height);
110120
},
111121

112-
_drawImage: function(ctx, style, latLng) {
122+
_drawImage: function (ctx, style, latLng) {
113123
//设置图片的大小
114124
var width, height;
115125
if (style.size) {
@@ -132,7 +142,7 @@ L.Canvas.include({
132142
ctx.drawImage(style.img, point[0], point[1], width, height);
133143
},
134144

135-
_coordinateToPoint: function(coordinate) {
145+
_coordinateToPoint: function (coordinate) {
136146
if (!this._map) {
137147
return coordinate;
138148
}

‎src/leaflet/overlay/graphic/WebGLRenderer.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,7 @@ export var GraphicWebGLRenderer = L.Class.extend({
303303
return this;
304304
},
305305
_initPath: emptyFunc,
306-
_addPath: emptyFunc
306+
_addPath: emptyFunc,
307+
containsPoint: emptyFunc
307308

308309
});

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy