fix: 修复 setData 引发的高德2 图层抖动问题 (#1376)

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/features/fix/demos/fix.tsx

@@ -1,64 +1,126 @@
-// @ts-ignore
-import { Scene, PolygonLayer } from '@antv/l7';
-// @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { Scene } from "@antv/l7";
+// import { DrawEvent, DrawLine } from "@antv/l7-draw";
+import { GaodeMapV2, GaodeMap, Map, Mapbox } from "@antv/l7-maps";
+import { LineLayer } from "@antv/l7";
+import { coordAll, Feature, featureCollection, LineString } from "@turf/turf";
+import { debounce } from "lodash";
 import React, { useEffect } from 'react';
 
+export const lineList: Feature<LineString>[] = [
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [120, 30.25],
+        [120, 30.2],
+      ],
+    },
+  },
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [120.1, 30.25],
+        [120.1, 30.2],
+      ],
+    },
+  },
+];
+
 export default () => {
   useEffect(() => {
-
     const scene = new Scene({
-      id: "map",
-      map: new GaodeMap({
-        center: [120, 30],
-        zoom: 4
+      id: 'map',
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        pitch: 0,
+        style: "dark",
+        zoom: 10
       })
     });
-    
-    const dataList = [
-      { name: "杭州", data: '#f00' },
-      { name: "北京", data: '#ff0' }
-    ];
-    const dataList2 = [{ name: "杭州", data: '#0f0' }];
-    
-    const geo = {
-      type: "FeatureCollection",
-      features: [
-        {
-          type: "Feature",
-          properties: {
-            color: "#f00",
-            name: "杭州"
-          },
-          geometry: {
-            type: "Polygon",
-            coordinates: [
-              [
-                [100, 30],
-                [120, 35],
-                [120, 30]
-              ]
-            ]
+    scene.on("loaded", () => {
+      const lineLayer = new LineLayer();
+      lineLayer
+        .source(
+          featureCollection(
+            lineList.map((item, index) => {
+              item.properties = {
+                index
+              };
+              return item;
+            })
+          )
+        )
+        .size(4)
+        .color("#f00");
+      scene.addLayer(lineLayer);
+
+      let isDrag = false;
+      let dragFeature: Feature<LineString> | null = null;
+      let prePosition = [0, 0];
+
+      lineLayer.on("mousedown", (e) => {
+        const { lng, lat } = e.lngLat;
+        prePosition = [lng, lat];
+
+        isDrag = true;
+        scene.setMapStatus({
+          dragEnable: false
+        });
+        dragFeature = e.feature;
+      });
+
+      scene.on(
+        "mousemove",
+        debounce(
+        (e) => {
+          if (isDrag) {
+            const { lng, lat } = e.lnglat;
+            const [lastLng, lastLat] = prePosition;
+            if (dragFeature) {
+              // lineList[0].geometry.coordinates[0][0] += 0.001
+              // lineList[0].geometry.coordinates[1][0] += 0.001
+
+              // lineList[1].geometry.coordinates[0][0] += 0.001
+              // lineList[1].geometry.coordinates[1][0] += 0.001
+
+              const positions = coordAll(dragFeature);
+              positions.forEach((position) => {
+                // console.log(
+                //   position[0],
+                //   lng - lastLng,
+                //   position[0] + lng - lastLng
+                // );
+                position[0] += lng - lastLng;
+                position[1] += lat - lastLat;
+              });
+              dragFeature.geometry.coordinates = positions;
+              lineList[dragFeature.properties?.index] = dragFeature;
+            }
+            prePosition = [lng, lat];
+
+            // lineLayer.center = undefined
+            lineLayer.setData(featureCollection(lineList));
           }
         },
-      ]
-    };
-    
-    const layer = new PolygonLayer()
-      .source(geo)
-      .shape("fill")
-      .color("#f00")
-      // .active(true)
-      .select(true)
-    
-    scene.on("loaded", () => {
-      scene.addLayer(layer);
-      layer.on('mousemove', () => {
+          0,
+          {
+            maxWait: 100
+          }
+        )
+      );
 
-      })
-   
+      scene.on("mouseup", (e) => {
+        isDrag = false;
+        scene.setMapStatus({
+          dragEnable: true
+        });
+      });
     });
-    
   }, []);
   return (
     <div

packages/core/src/services/layer/ILayerService.ts

@@ -260,6 +260,7 @@ export type LayerEventType =
 export interface ILayer {
   id: string; // 一个场景中同一类型 Layer 可能存在多个
   type: string; // 代表 Layer 的类型
+  coordCenter: number[];
   name: string; //
   inited: boolean; // 是否初始化完成
   zIndex: number;

packages/core/src/services/map/IMapService.ts

@@ -46,6 +46,7 @@ export interface IMapService<RawMap = {}> {
   simpleMapCoord: ISimpleMapCoord;
   map: RawMap;
   bgColor: string;
+  setCoordCenter?(center: number[]): void;
   setBgColor(color: string): void;
   init(): void;
   initMiniMap?(): void;

packages/layers/src/core/BaseLayer.ts

@@ -66,6 +66,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   implements ILayer {
   public id: string = `${layerIdCounter++}`;
   public name: string = `${layerIdCounter}`;
+  public coordCenter: number[];
   public type: string;
   public visible: boolean = true;
   public zIndex: number = 0;
@@ -1044,6 +1045,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     }
     // this.layerSource.inited 为 true 后，sourceUpdate 事件不会再触发
     this.layerSource.on('sourceUpdate', () => {
+      if (this.coordCenter === undefined) {
+        const layerCenter = this.layerSource.center;
+        this.coordCenter = layerCenter;
+        this.mapService.setCoordCenter &&
+          this.mapService.setCoordCenter(layerCenter);
+        // // @ts-ignore
+        // this.mapService.map.customCoords.setCenter(layerCenter);
+        // // @ts-ignore
+        // this.mapService.setCustomCoordCenter(layerCenter);
+      }
       this.sourceEvent();
     });
   }
@@ -1176,6 +1187,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
             })
             .catch((err) => reject(err));
         } else {
+          // console.log(this.encodedData[1].originCoordinates[0])
+          // console.log(this.encodedData[1].coordinates[0])
           const {
             attributes,
             elements,

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -281,7 +281,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
       mappedData.length > 0 &&
       this.mapService.version === Version['GAODE2.x']
     ) {
-      const layerCenter = this.getLayerCenter(layer);
+      const layerCenter = layer.coordCenter;
       if (typeof mappedData[0].coordinates[0] === 'number') {
         // 单个的点数据
         // @ts-ignore
@@ -301,7 +301,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
           });
       } else {
         // 连续的线、面数据
-        // @ts-ignore
         mappedData
           // TODO: 避免经纬度被重复计算导致坐标位置偏移
           .filter((d) => !d.originCoordinates)
@@ -331,11 +330,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
     }
   }
 
-  private getLayerCenter(layer: ILayer) {
-    const source = layer.getSource();
-    return source.center;
-  }
-
   private unProjectCoordinates(coordinates: any) {
     if (typeof coordinates[0] === 'number') {
       return this.mapService.simpleMapCoord.unproject(

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -46,11 +46,6 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
       this.coordinateSystemService.refresh(offset);
 
       if (version === 'GAODE2.x') {
-        const layerCenter = this.getLayerCenter(layer);
-        // @ts-ignore
-        this.mapService.map.customCoords.setCenter(layerCenter);
-        // @ts-ignore
-        this.mapService.setCustomCoordCenter(layerCenter);
         // @ts-ignore
         mvp = this.mapService.map.customCoords.getMVPMatrix();
         // mvp = amapCustomCoords.getMVPMatrix()

packages/maps/src/amap2/map.ts

@@ -96,6 +96,12 @@ export default class AMapService extends AMapBaseService {
     });
   }
 
+  public setCoordCenter(center: [number, number]) {
+    // @ts-ignore
+    this.map.customCoords.setCenter(center);
+    this.setCustomCoordCenter(center);
+  }
+
   /**
    * 根据数据的绘制中心转换经纬度数据 高德2.0
    */