Skip to content

Commit 97fcfbf

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]ICL-1425 deckgl图层onclick不生效 review by qiw
1 parent 700f42b commit 97fcfbf

File tree

3 files changed

+119
-41
lines changed

3 files changed

+119
-41
lines changed

‎src/openlayers/overlay/Graphic.js‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import * as olExtent from 'ol/extent';
1717
import Polygon from 'ol/geom/Polygon';
1818
import Point from 'ol/geom/Point';
1919
import ImageLayer from 'ol/layer/Image';
20+
import { transform } from 'ol/proj';
2021

2122
const defaultProps = {
2223
color: [0, 0, 0, 255],
@@ -79,34 +80,48 @@ export class Graphic extends ImageCanvasSource {
7980
this.isHighLight = typeof options.isHighLight === 'undefined' ? true : options.isHighLight;
8081
this.hitGraphicLayer = null;
8182
this._forEachFeatureAtCoordinate = _forEachFeatureAtCoordinate;
82-
83+
this._options = options;
8384
const me = this;
8485

8586
if (options.onClick) {
8687
me.map.on('click', function(e) {
87-
if (me.renderer instanceof GraphicWebGLRenderer) {
88-
return;
89-
}
90-
const features = me.map.getFeaturesAtPixel(e.pixel) || [];
91-
for (let index = 0; index < features.length; index++) {
92-
const graphic = features[index];
93-
if (me.graphics.indexOf(graphic) > -1) {
94-
options.onClick(graphic, e);
95-
if (me.isHighLight) {
96-
me._highLight(
97-
graphic.getGeometry().getCoordinates(),
98-
new Style({
99-
image: graphic.getStyle()
100-
}).getImage(),
101-
graphic,
102-
e.pixel
103-
);
104-
}
105-
break;
88+
const graphic = me.findGraphicByPixel(e, me);
89+
if (graphic) {
90+
if (me.isDeckGLRender) {
91+
const params = me.getDeckglArguments(me, e, graphic);
92+
options.onClick(params);
93+
} else {
94+
options.onClick(graphic, e);
95+
if (me.isHighLight) {
96+
me._highLight(
97+
graphic.getGeometry().getCoordinates(),
98+
new Style({
99+
image: graphic.getStyle()
100+
}).getImage(),
101+
graphic,
102+
e.pixel
103+
);
106104
}
105+
}
106+
107107
}
108108
});
109109
}
110+
if (options.onHover || options.highlightColor) {
111+
me.map.on('pointermove', function(e) {
112+
const graphic = me.findGraphicByPixel(e, me);
113+
if (graphic) {
114+
console.log('moveeeeeeeee')
115+
if (me.isDeckGLRender) {
116+
if (options.highlightColor) {
117+
me.renderer.deckGL.pickObject({ x: e.pixel[0], y: e.pixel[1] });
118+
}
119+
const params = me.getDeckglArguments(me, e, graphic);
120+
options.onHover && options.onHover(params);
121+
}
122+
}
123+
});
124+
}
110125
//eslint-disable-next-line no-unused-vars
111126
function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) {
112127
var mapWidth = size[0] / pixelRatio;
@@ -124,6 +139,7 @@ export class Graphic extends ImageCanvasSource {
124139
me.renderer._clearBuffer();
125140
me.renderer.selected = this.selected;
126141
me.renderer.drawGraphics(graphics);
142+
me.isDeckGLRender = me.renderer instanceof GraphicWebGLRenderer;
127143
return me.renderer.getCanvas();
128144
}
129145

@@ -175,11 +191,12 @@ export class Graphic extends ImageCanvasSource {
175191
function _forEachFeatureAtCoordinate(coordinate, resolution, callback, evtPixel, e) {
176192
let graphics = me.getGraphicsInExtent();
177193
// FIX 无法高亮元素
178-
me._highLightClose();
194+
// me._highLightClose();
195+
console.log('foreach')
179196
for (let i = graphics.length - 1; i >= 0; i--) {
180197
let style = graphics[i].getStyle();
181-
if (!style) {
182-
return;
198+
if (!me.isDeckGLRender && !style) {
199+
return;
183200
}
184201
//已经被高亮的graphics 不被选选中
185202
if (style instanceof HitCloverShape) {
@@ -214,7 +231,7 @@ export class Graphic extends ImageCanvasSource {
214231
if (geo.intersectsCoordinate(this.map.getCoordinateFromPixel(evtPixel))) {
215232
contain = true;
216233
}
217-
} else {
234+
} else if (image) {
218235
let extent = [];
219236
extent[0] = center[0] - image.getAnchor()[0] * resolution;
220237
extent[2] = center[0] + image.getAnchor()[0] * resolution;
@@ -223,6 +240,15 @@ export class Graphic extends ImageCanvasSource {
223240
if (olExtent.containsCoordinate(extent, coordinate)) {
224241
contain = true;
225242
}
243+
} else {
244+
let extent = [];
245+
extent[0] = center[0] - me._options.radius * resolution;
246+
extent[2] = center[0] + me._options.radius * resolution;
247+
extent[1] = center[1] - me._options.radius * resolution;
248+
extent[3] = center[1] + me._options.radius * resolution;
249+
if (olExtent.containsCoordinate(extent, coordinate)) {
250+
contain = true;
251+
}
226252
}
227253

228254
if (contain === true) {
@@ -239,6 +265,35 @@ export class Graphic extends ImageCanvasSource {
239265
}
240266
}
241267

268+
findGraphicByPixel(e, me) {
269+
const features = me.map.getFeaturesAtPixel(e.pixel) || [];
270+
for (let index = 0; index < features.length; index++) {
271+
const graphic = features[index];
272+
if (me.graphics.indexOf(graphic) > -1) {
273+
return graphic;
274+
}
275+
}
276+
return undefined;
277+
}
278+
279+
getDeckglArguments(me, e, graphic) {
280+
const view = me.map.getView();
281+
const projection = view.getProjection().getCode();
282+
return {
283+
object: graphic,
284+
layer: me.renderer._renderLayer,
285+
pixel: e.pixel,
286+
x: e.pixel[0],
287+
y: e.pixel[1],
288+
pixelRatio: me.renderer.pixelRatio,
289+
lngLat: transform(graphic.getGeometry().getCoordinates(), projection, 'EPSG:4326'),
290+
picked: true,
291+
index:1,
292+
color: me._options.color,
293+
devicePixel: e.devicePixel
294+
}
295+
}
296+
242297
/**
243298
* @function Graphic.prototype.setGraphics
244299
* @description 设置绘制的点要素，会覆盖之前的所有要素。
@@ -477,7 +532,7 @@ export class Graphic extends ImageCanvasSource {
477532
this.map.removeLayer(this.hitGraphicLayer);
478533
this.hitGraphicLayer = null;
479534
}
480-
this.changed();
535+
!this.isDeckGLRender && this.changed();
481536
}
482537

483538
/**

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -235,31 +235,18 @@ export class GraphicWebGLRenderer extends BaseObject {
235235
getColor(point) {
236236
let defaultStyle = me._getLayerDefaultStyle();
237237
let style = point && point.getStyle();
238-
return style && style.getColor() || defaultStyle.color
238+
return style && style.getColor && style.getColor() || defaultStyle.color
239239
},
240240
getRadius(point) {
241241
let defaultStyle = me._getLayerDefaultStyle();
242242
let style = point && point.getStyle();
243-
return style && style.getRadius() || defaultStyle.radius
243+
return style && style.getRadius && style.getRadius() || defaultStyle.radius
244244
},
245245
updateTriggers: {
246246
getColor: [color],
247247
getRadius: [radius]
248248
}
249249
};
250-
let _self = this;
251-
if (this.onClick) {
252-
innerLayerOptions.onClick = function () {
253-
_self._canvas.style.cursor = "pointer";
254-
_self.onClick.apply(_self, arguments)
255-
};
256-
}
257-
if (this.onHover) {
258-
innerLayerOptions.onHover = function () {
259-
_self._canvas.style.cursor = "pointer";
260-
_self.onHover.apply(_self, arguments)
261-
};
262-
}
263250
me._renderLayer = new window.DeckGL.ScatterplotLayer(innerLayerOptions);
264251
}
265252

‎test/openlayers/overlay/GraphicSpec.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ describe('openlayers_GraphicLayer', () => {
576576
});
577577
});
578578

579-
it('forEachFeatureAtCoordinate_ICL_1047', (done) => {
579+
it('forEachFeatureAtCoordinate_ICL_1047', (done) => {
580580
//三叶草的生成坐标
581581
var coordinate = [
582582
[50.154958667070076, -0.89592969754775]
@@ -650,4 +650,40 @@ describe('openlayers_GraphicLayer', () => {
650650
}
651651
});
652652
});
653+
it('onCLick', (done) => {
654+
map = new Map({
655+
target: 'map',
656+
view: new View({
657+
center: [0, 0],
658+
zoom: 2,
659+
projection: 'EPSG:4326'
660+
}),
661+
renderer: ['canvas']
662+
});
663+
var graphics = [new GraphicObj(new Point([0, 0]))];
664+
var graphicStyle = {
665+
color: [0, 255, 128, 255],
666+
highlightColor: [255, 0, 0, 255],
667+
radius: 20
668+
};
669+
map.once('postrender', function () {
670+
var graphicLayer = new ImageLayer({
671+
source: new GraphicSource({
672+
render: "webgl",
673+
graphics: graphics,
674+
color: graphicStyle.color,
675+
highlightColor: graphicStyle.highlightColor,
676+
radius: graphicStyle.radius,
677+
map: map,
678+
onClick: function (graphic) {
679+
if (graphic) {
680+
graphic.lngLat;
681+
}
682+
}
683+
})
684+
});
685+
map.addLayer(graphicLayer);
686+
done();
687+
})
688+
})
653689
});

0 commit comments

Comments
 (0)