fix: 修复设置地图中心点引发的问题 (#1386)

* fix: 修复设置地图中心点引发的问题

* style: lint style

* feat: 补充空值时图层绘制采用默认地图中心点

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

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

@@ -112,7 +112,7 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new GaodeMapV2({
         center: [120.151634, 30.244831],
         style: "dark",
         zoom: 10

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

@@ -0,0 +1,135 @@
+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 { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf";
+import React, { useEffect } from 'react';
+
+const lineList: Feature<LineString>[] = [
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [119.988511, 30.269614],
+        [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],
+      ],
+    },
+  },
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [120.075427, 30.147148],
+        [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],
+      ],
+    },
+  },
+];
+
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        style: "dark",
+        zoom: 10
+      })
+    });
+
+    const source = new Source(featureCollection(
+      lineList.map((item, index) => {
+        item.properties = {
+          index
+        };
+        return item;
+      })
+    ))
+    scene.on("loaded", () => {
+      const lineLayer = new LineLayer();
+      lineLayer
+        .source(source)
+        .size(4)
+        .color("#f00");
+    
+        
+      scene.addLayer(lineLayer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/fix/fix2.md

@@ -0,0 +1,2 @@
+### fix2 feature
+<code src="./demos/fix2.tsx"></code>

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 = layer.coordCenter;
+      const layerCenter = layer.coordCenter || layer.getSource().center;
       if (typeof mappedData[0].coordinates[0] === 'number') {
         // 单个的点数据
         // @ts-ignore

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -46,6 +46,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
       this.coordinateSystemService.refresh(offset);
 
       if (version === 'GAODE2.x') {
+        this.setLayerCenter(layer);
         // @ts-ignore
         mvp = this.mapService.map.customCoords.getMVPMatrix();
         // mvp = amapCustomCoords.getMVPMatrix()
@@ -89,8 +90,14 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
     });
   }
 
-  private getLayerCenter(layer: ILayer) {
-    const source = layer.getSource();
-    return source.center;
+  /**
+   * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置
+   * @param layer
+   */
+  private setLayerCenter(layer: ILayer) {
+    if (layer.coordCenter === undefined)
+      layer.coordCenter = layer.getSource().center;
+    this.mapService.setCoordCenter &&
+      this.mapService.setCoordCenter(layer.coordCenter);
   }
 }

packages/maps/src/amap2/map.ts

@@ -69,7 +69,8 @@ export default class AMapService extends AMapBaseService {
     lnglat: [number, number],
     layerCenter: [number, number],
   ) {
-    const layerCenterFlat = amap2Project(...layerCenter);
+    const center = layerCenter || this.sceneCenter;
+    const layerCenterFlat = amap2Project(...center);
     return this._sub(amap2Project(lnglat[0], lnglat[1]), layerCenterFlat);
   }