Skip to content

Commit b6554e2

Browse files
songyumengsongyumeng
committed
【fix】修复leaflet 叠加多个graphiclayer事件被阻止的问题 review by xiongjj
1 parent bdd40f4 commit b6554e2

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)