fix: 优化多图层 setData 效果不同步的现象 (#1384)

* fix: 优化多图层 setData 效果不同步的现象

* style: lint style

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

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

@@ -1,20 +1,28 @@
-import { Scene } from "@antv/l7";
+import { Scene, PointLayer, LineLayer, Source } 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, point } from "@turf/turf";
-import { coordAll, Feature, featureCollection, LineString } from "@turf/turf";
+import { debounce, throttle } from "lodash";
-import { debounce } from "lodash";
 import React, { useEffect } from 'react';
 
-export const lineList: Feature<LineString>[] = [
+const lineList: Feature<LineString>[] = [
   {
     type: 'Feature',
     properties: {},
     geometry: {
       type: 'LineString',
       coordinates: [
-        [120, 30.25],
+        [119.988511, 30.269614],
-        [120, 30.2],
+        [119.9851, 30.269323],
+        [119.985438, 30.267852],
+        [119.990291, 30.267257],
+        [119.991454, 30.261762],
+        [119.994974, 30.256115],
+        [119.983641, 30.246146],
+        [119.985286, 30.241228],
+        [119.983351, 30.224089],
+        [119.985473, 30.221814],
+        [119.99271, 30.22088],
       ],
     },
   },
@@ -24,20 +32,88 @@ export const lineList: Feature<LineString>[] = [
     geometry: {
       type: 'LineString',
       coordinates: [
-        [120.1, 30.25],
+        [120.075427, 30.147148],
-        [120.1, 30.2],
+        [120.073659, 30.147609],
+        [120.074996, 30.154115],
+        [120.070946, 30.160916],
+        [120.074171, 30.161745],
+        [120.075425, 30.158086],
+        [120.081662, 30.159401],
+        [120.084335, 30.163868],
+        [120.112648, 30.17977],
+        [120.119262, 30.186753],
+        [120.137108, 30.198481],
+        [120.137962, 30.202496],
+        [120.135039, 30.208876],
+        [120.135625, 30.216541],
+        [120.138548, 30.225005],
+        [120.145412, 30.229088],
+        [120.155609, 30.230104],
+        [120.158572, 30.241788],
+        [120.160816, 30.245725],
+        [120.16441, 30.245929],
+        [120.164401, 30.247589],
+        [120.165608, 30.247515],
+        [120.166546, 30.254134],
+      ],
+    },
+  },
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [120.216401, 30.291456],
+        [120.217689, 30.289456],
+        [120.218912, 30.28995],
+        [120.216862, 30.292565],
+        [120.221055, 30.293611],
+        [120.221909, 30.291061],
+        [120.211464, 30.28603],
+        [120.207209, 30.278355],
+        [120.207448, 30.270482],
+        [120.199987, 30.270352],
+        [120.200252, 30.247617],
+        [120.210037, 30.243515],
+        [120.204483, 30.237082],
+        [120.224585, 30.222153],
+        [120.213219, 30.213984],
+        [120.216402, 30.20977],
+        [120.194058, 30.196853],
+        [120.17329, 30.188212],
+        [120.174223, 30.181411],
+        [120.16777, 30.181168],
+        [120.167244, 30.173706],
+        [120.147426, 30.172062],
+        [120.146042, 30.176801],
+        [120.135382, 30.17619],
       ],
     },
   },
 ];
 
+const getPointFeatureCollection = (lineList: Feature<LineString>[]) => {
+  const data = featureCollection(
+    coordAll(featureCollection([...lineList])).map((item) => point(item))
+  );
+  // console.log(data)
+  return data
+  // return {type: 'FeatureCollection', features: [
+  //   {
+  //     type: "Feature",
+  //     properties: {},
+  //     geometry: {type: 'Point', coordinates: lineList[0].geometry.coordinates[0]}
+  //   }
+  // ]}
+};
+
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV2({
+      map: new GaodeMap({
         center: [120.151634, 30.244831],
-        pitch: 0,
         style: "dark",
         zoom: 10
       })
@@ -57,7 +133,18 @@ export default () => {
         )
         .size(4)
         .color("#f00");
+      const pointLayer = new PointLayer({});
+      pointLayer
+        .source(getPointFeatureCollection(lineList))
+        .size(6)
+        .shape("circle")
+        .style({
+          stroke: "#00f",
+          strokeWidth: 3
+        });
+        
       scene.addLayer(lineLayer);
+      scene.addLayer(pointLayer);
 
       let isDrag = false;
       let dragFeature: Feature<LineString> | null = null;
@@ -68,57 +155,50 @@ export default () => {
         prePosition = [lng, lat];
 
         isDrag = true;
-        scene.setMapStatus({
+        // scene.setMapStatus({
-          dragEnable: false
+        //   dragEnable: false
-        });
+        // });
         dragFeature = e.feature;
       });
 
-      scene.on(
+      scene.setMapStatus({
-        "mousemove",
+        dragEnable: false
-        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
+      scene.on("mousemove", (e) => {
-              // lineList[1].geometry.coordinates[1][0] += 0.001
+          
+        if (isDrag && lineLayer.modelLoaded && pointLayer.modelLoaded) {
+          // if (isDrag ) {
+          // requestAnimationFrame(() => {
+            
+              const { lng, lat } = e.lnglat;
+              const [lastLng, lastLat] = prePosition;
+              if (dragFeature) {
+                const positions = coordAll(dragFeature);
+                positions.forEach((position) => {
+                  position[0] += lng - lastLng;
+                  position[1] += lat - lastLat;
+                });
+                dragFeature.geometry.coordinates = positions;
+                lineList[dragFeature.properties?.index] = dragFeature;
+              }
+              prePosition = [lng, lat];
+              const lineData = featureCollection([...lineList]);
+              const pointData = getPointFeatureCollection([...lineList]);
 
-              const positions = coordAll(dragFeature);
+      
-              positions.forEach((position) => {
+              lineLayer.setData(lineData);
-                // console.log(
+              pointLayer.setData(pointData);
-                //   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));
-          }
-        },
-          0,
-          {
-            maxWait: 100
-          }
-        )
-      );
 
       scene.on("mouseup", (e) => {
         isDrag = false;
-        scene.setMapStatus({
+        // scene.setMapStatus({
-          dragEnable: true
+        //   dragEnable: true
-        });
+        // });
       });
     });
   }, []);

packages/layers/src/core/BaseLayer.ts

@@ -1385,7 +1385,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     this.models = models;
     this.emit('modelLoaded', null);
     this.modelLoaded = true;
-    this.layerService.throttleRenderLayers();
+
+    // Tip: setTimeout 用于延迟绘制，可以让拖动图层时连续的 setData 更加平滑 - L7Draw
+    setTimeout(() => {
+      // Tip: 使用 renderLayers 而不是 throttleRenderLayers，让图层之间的 setData 更新绘制不存在延迟
+      this.layerService.renderLayers();
+    }, 32);
   }
 
   protected reRender() {

packages/layers/src/utils/layerData.ts

@@ -13,6 +13,7 @@ import { Version } from '@antv/l7-maps';
 import Source from '@antv/l7-source';
 import { isColor, normalize, rgb2arr } from '@antv/l7-utils';
 import { ILineLayerStyleOptions } from '../core/interface';
+import { cloneDeep } from 'lodash';
 
 function getArrowPoints(p1: Position, p2: Position) {
   const dir = [p2[0] - p1[0], p2[1] - p1[1]];
@@ -27,9 +28,11 @@ function getArrowPoints(p1: Position, p2: Position) {
 function adjustData2Amap2Coordinates(
   mappedData: IEncodeFeature[],
   mapService: IMapService,
+  layer: ILayer,
 ) {
   // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
   if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) {
+    const layerCenter = layer.coordCenter;
     if (typeof mappedData[0].coordinates[0] === 'number') {
       // 单个的点数据
       // @ts-ignore
@@ -41,7 +44,11 @@ function adjustData2Amap2Coordinates(
           // @ts-ignore
           d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
           // @ts-ignore
-          d.coordinates = this.mapService.lngLatToCoord(d.coordinates);
+          // d.coordinates = mapService.lngLatToCoord(d.coordinates);
+          d.coordinates = mapService.lngLatToCoordByLayer(
+            d.coordinates,
+            layerCenter,
+          );
         });
     } else {
       // 连续的线、面数据
@@ -54,7 +61,11 @@ function adjustData2Amap2Coordinates(
           // @ts-ignore
           d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
           // @ts-ignore
-          d.coordinates = this.mapService.lngLatToCoords(d.coordinates);
+          // d.coordinates = mapService.lngLatToCoords(d.coordinates);
+          d.coordinates = mapService.lngLatToCoordsByLayer(
+            d.coordinates,
+            layerCenter,
+          );
         });
     }
   }
@@ -185,7 +196,7 @@ function mapping(
     return encodeRecord;
   }) as IEncodeFeature[];
   // 调整数据兼容 Amap2.0
-  adjustData2Amap2Coordinates(mappedData, mapService);
+  adjustData2Amap2Coordinates(mappedData, mapService, layer as ILayer);
 
   // 调整数据兼容 SimpleCoordinates
   adjustData2SimpleCoordinates(mappedData, mapService);