[fix]deckgl高效率点击图层缩放渲染两次，点击事件卡顿 review by songym

luoxiao-supermap · luoxiao-supermap · commit 5cee6e0ac346 · 2023-01-04T17:25:52.000+08:00
diff --git a/src/openlayers/overlay/Graphic.js b/src/openlayers/overlay/Graphic.js
@@ -17,7 +17,6 @@ import * as olExtent from 'ol/extent';
 import Polygon from 'ol/geom/Polygon';
 import Point from 'ol/geom/Point';
 import ImageLayer from 'ol/layer/Image';
-import { transform } from 'ol/proj';
 
 const defaultProps = {
     color: [0, 0, 0, 255],
@@ -85,42 +84,38 @@ export class Graphic extends ImageCanvasSource {
 
         if (options.onClick) {
             me.map.on('click', function(e) {
-                const graphic = me.findGraphicByPixel(e, me);
-                if (graphic) {
-                  if (me.isDeckGLRender) {
-                    const params = me.getDeckglArguments(me, e, graphic);
-                    options.onClick(params);
-                  } else {
-                    options.onClick(graphic, e);
-                    if (me.isHighLight) {
-                      me._highLight(
-                          graphic.getGeometry().getCoordinates(),
-                          new Style({
-                              image: graphic.getStyle()
-                          }).getImage(),
-                          graphic,
-                          e.pixel
-                      );
-                    }
+              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
+                    );
                   }
-                  
-                }
+                
+              }
             });
         }
-        if (options.onHover || options.highlightColor) {
+       
           me.map.on('pointermove', function(e) {
-              const graphic = me.findGraphicByPixel(e, me);
-              if (graphic) {
-                if (me.isDeckGLRender) {
-                  if (options.highlightColor) {
-                    me.renderer.deckGL.pickObject({ x: e.pixel[0], y: e.pixel[1] });
-                  }
-                  const params = me.getDeckglArguments(me, e, graphic);
-                  options.onHover && options.onHover(params);
-                }
+            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;
@@ -139,6 +134,12 @@ export class Graphic extends ImageCanvasSource {
             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();
         }
 
@@ -193,7 +194,7 @@ export class Graphic extends ImageCanvasSource {
             me._highLightClose();
             for (let i = graphics.length - 1; i >= 0; i--) {
                 let style = graphics[i].getStyle();
-                if (!me.isDeckGLRender && !style) {
+                if (!style) {
                   return;
                 }
                 //已经被高亮的graphics 不被选选中
@@ -229,7 +230,7 @@ export class Graphic extends ImageCanvasSource {
                     if (geo.intersectsCoordinate(this.map.getCoordinateFromPixel(evtPixel))) {
                         contain = true;
                     }
-                } else if (image) {
+                } else {
                     let extent = [];
                     extent[0] = center[0] - image.getAnchor()[0] * resolution;
                     extent[2] = center[0] + image.getAnchor()[0] * resolution;
@@ -238,15 +239,6 @@ export class Graphic extends ImageCanvasSource {
                     if (olExtent.containsCoordinate(extent, coordinate)) {
                         contain = true;
                     }
-                } else {
-                  let extent = [];
-                  extent[0] = center[0] - me._options.radius * resolution;
-                  extent[2] = center[0] + me._options.radius * resolution;
-                  extent[1] = center[1] - me._options.radius * resolution;
-                  extent[3] = center[1] + me._options.radius * resolution;
-                  if (olExtent.containsCoordinate(extent, coordinate)) {
-                      contain = true;
-                  }
                 }
 
                 if (contain === true) {
@@ -274,24 +266,6 @@ export class Graphic extends ImageCanvasSource {
       return undefined;
     }
 
-    getDeckglArguments(me, e, graphic) {
-      const view = me.map.getView();
-      const projection = view.getProjection().getCode();
-      return {
-        object: graphic,
-        layer: me.renderer._renderLayer,
-        pixel: e.pixel,
-        x: e.pixel[0],
-        y: e.pixel[1],
-        pixelRatio: me.renderer.pixelRatio,
-        lngLat: transform(graphic.getGeometry().getCoordinates(), projection, 'EPSG:4326'),
-        picked: true,
-        index:1,
-        color: me._options.color,
-        devicePixel: e.devicePixel
-      }
-    }
-
     /**
      * @function Graphic.prototype.setGraphics
      * @description 设置绘制的点要素，会覆盖之前的所有要素。
@@ -530,7 +504,7 @@ export class Graphic extends ImageCanvasSource {
             this.map.removeLayer(this.hitGraphicLayer);
             this.hitGraphicLayer = null;
         }
-        !this.isDeckGLRender && this.changed();
+        this.changed();
     }
 
     /**
diff --git a/test/openlayers/overlay/GraphicSpec.js b/test/openlayers/overlay/GraphicSpec.js
@@ -673,13 +673,17 @@ describe('openlayers_GraphicLayer', () => {
       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();
-        const res1 = source.getDeckglArguments(source, { pixel: [0, 0] }, graphics[0]);
-        expect(res1).not.toBeNull();
+
+        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]);
