[fix]ol 高效率点击图层 review by songym

luoxiao-supermap · luoxiao-supermap · commit 6fc23f73c204 · 2023-01-06T14:58:48.000+08:00
diff --git a/src/openlayers/overlay/Graphic.js b/src/openlayers/overlay/Graphic.js
@@ -84,29 +84,38 @@ export class Graphic extends ImageCanvasSource {
 
         if (options.onClick) {
             me.map.on('click', function(e) {
-                if (me.renderer instanceof GraphicWebGLRenderer) {
-                    return;
-                }
-                const features = me.map.getFeaturesAtPixel(e.pixel) || [];
-                for (let index = 0; index < features.length; index++) {
-                    const graphic = features[index];
-                    if (me.graphics.indexOf(graphic) > -1) {
-                        options.onClick(graphic, e);
-                        if (me.isHighLight) {
-                            me._highLight(
-                                graphic.getGeometry().getCoordinates(),
-                                new Style({
-                                    image: graphic.getStyle()
-                                }).getImage(),
-                                graphic,
-                                e.pixel
-                            );
-                        }
-                        break;
-                    }
-                }
+              if (me.isDeckGLRender) {
+                const params = me.renderer.deckGL.pickObject({ x: e.pixel[0], y: e.pixel[1] });
+                options.onClick(params);
+                return;
+              }
+              const graphic = me.findGraphicByPixel(e, me);
+              if (graphic) {
+                  options.onClick(graphic, e);
+                  if (me.isHighLight) {
+                    me._highLight(
+                        graphic.getGeometry().getCoordinates(),
+                        new Style({
+                            image: graphic.getStyle()
+                        }).getImage(),
+                        graphic,
+                        e.pixel
+                    );
+                  }
+                
+              }
             });
         }
+       
+        me.map.on('pointermove', function(e) {
+          if (me.isDeckGLRender) {
+            const params = me.renderer.deckGL.pickObject({ x: e.pixel[0], y: e.pixel[1] });
+            if (options.onHover) {
+                options.onHover(params);
+            }
+          }
+        });
+        
         //eslint-disable-next-line no-unused-vars
         function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) {
             var mapWidth = size[0] / pixelRatio;
@@ -124,6 +133,13 @@ export class Graphic extends ImageCanvasSource {
             me.renderer._clearBuffer();
             me.renderer.selected = this.selected;
             me.renderer.drawGraphics(graphics);
+            me.isDeckGLRender = me.renderer instanceof GraphicWebGLRenderer;
+            if(me.isDeckGLRender){
+              if (!me.context) {
+                me.context = Util.createCanvasContext2D(mapWidth, mapHeight);
+              }
+              return me.context.canvas;
+            }
             return me.renderer.getCanvas();
         }
 
@@ -179,7 +195,7 @@ export class Graphic extends ImageCanvasSource {
             for (let i = graphics.length - 1; i >= 0; i--) {
                 let style = graphics[i].getStyle();
                 if (!style) {
-                    return;
+                  return;
                 }
                 //已经被高亮的graphics 不被选选中
                 if (style instanceof HitCloverShape) {
@@ -239,6 +255,17 @@ export class Graphic extends ImageCanvasSource {
         }
     }
 
+    findGraphicByPixel(e, me) {
+      const features = me.map.getFeaturesAtPixel(e.pixel) || [];
+      for (let index = 0; index < features.length; index++) {
+          const graphic = features[index];
+          if (me.graphics.indexOf(graphic) > -1) {
+            return graphic;
+          }
+      }
+      return undefined;
+    }
+
     /**
      * @function Graphic.prototype.setGraphics
      * @description 设置绘制的点要素，会覆盖之前的所有要素。
diff --git a/test/openlayers/overlay/GraphicSpec.js b/test/openlayers/overlay/GraphicSpec.js
@@ -649,5 +649,80 @@ describe('openlayers_GraphicLayer', () => {
               done();
             }
         });
+   });
+   it('onCLick', (done) => {
+    map = new Map({
+      target: 'map',
+      view: new View({
+        center: [0, 0],
+        zoom: 2,
+        projection: 'EPSG:4326'
+      }),
+      renderer: ['canvas']
     });
+    var graphics = [new GraphicObj(new Point([0, 0]))];
+    var graphicStyle = {
+      color: [0, 255, 128, 255],
+      highlightColor: [255, 0, 0, 255],
+      radius: 20
+    };
+    graphicLayer = new ImageLayer({
+      source: new GraphicSource({
+        render: 'webgl',
+        graphics: graphics,
+        color: graphicStyle.color,
+        highlightColor: graphicStyle.highlightColor,
+        radius: graphicStyle.radius,
+        map: map,
+        onClick: function (graphic) {
+          if (graphic) {
+            graphic.lngLat;
+          }
+        },
+        onHover: function (graphic) {
+          if (graphic) {
+            graphic.lngLat;
+          }
+        }
+      })
+    });
+    map.addLayer(graphicLayer);
+    const viewport = map.getViewport();
+    const key = graphicLayer.on('postrender', function () {
+      const source = graphicLayer.getSource();
+      if (source.renderer) {
+        unByKey(key);
+        source.isDeckGLRender = true;
+        source._forEachFeatureAtCoordinate([0, 0], 1, (result) => {
+          expect(result).not.toBeNull();
+        });
+        const res = source.findGraphicByPixel({ pixel: [0, 0] }, source);
+        expect(res).toBeUndefined();
+
+        spyOn(map, 'getFeaturesAtPixel').and.callFake(() => graphics);
+        const res1 = source.findGraphicByPixel({ pixel: [0, 0] }, source);
+        expect(res1).not.toBeUndefined();
+
+        let pixel = map.getPixelFromCoordinate([0, 0]);
+        map.forEachFeatureAtPixel(pixel, (graphic, layer) => {
+          expect(graphic).toBe(graphics[0]);
+          expect(layer).toBe(graphicLayer);
+        });
+        source.renderer = { _clearBuffer: () => {}, deckGL: { pickObject: () => ({}) } };
+        viewport.dispatchEvent(new Event('pointermove'));
+
+        const event = new Event('click');
+        event.pixel = [0, 0];
+        // ol内部对target属性赋值了， 但是原生Event不能被赋值
+        Object.defineProperty(event, "target", {
+          value : null,
+          writable : true,
+          enumerable : true,
+          configurable : true
+        });
+        map.dispatchEvent(event);
+        done();
+      }
+    });
+  });
 });
