refactor: 重构高德地图 V2 以视口进行同步 (#2387)

* refactor: amap next

* test: sleepTime

* test: add heatmap snapshot

* test: sleepTime

* fix: getMinZoom

* chore: zoom offset

* refactor: base map

* chore(CI): update snapshots (#2391)

* fix: type

* test: sleepTime

* wip: demo

* fix: source update 事件访问图层初始化未完成

* test: set pitch

* chore: common viewport to lib

* chore: note todo

* chore: fix path

* chore: remove path

* chore: meterToCoord

* test: sleepTime

* chore: ingore path for ci

* test: update snapshot

* chore: rename

* chore: demo shakking

---------

Co-authored-by: lvisei <26923747+lvisei@users.noreply.github.com>

.github/workflows/ci.yml

@@ -68,10 +68,10 @@ jobs:
         # use xvfb-run run in ubuntu
         run: xvfb-run pnpm test-cover
 
-      - name: Upload test coverage
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+      # - name: Upload test coverage
+      #   uses: coverallsapp/github-action@master
+      #   with:
+      #     github-token: ${{ secrets.GITHUB_TOKEN }}
 
   integration-test:
     runs-on: ubuntu-latest

__tests__/integration/heatmap.spec.ts

@@ -0,0 +1,20 @@
+import { generateCanvasTestCases } from './utils/generator';
+
+const TEST_CASES = [
+  {
+    name: 'normal',
+    sleepTime: 1000,
+  },
+  {
+    name: 'grid',
+    snapshots: false,
+  },
+  {
+    name: 'hexagon',
+    snapshots: false,
+  },
+];
+
+describe('Heatmap Snapshot', () => {
+  generateCanvasTestCases('Heatmap', TEST_CASES);
+});

__tests__/integration/line.spec.ts

@@ -9,11 +9,6 @@ const TEST_CASES = [
     name: 'arc_plane',
     sleepTime: 500,
   },
-
-  {
-    name: 'flow',
-    sleepTime: 800,
-  },
   {
     name: 'arc',
     sleepTime: 600,
@@ -22,6 +17,10 @@ const TEST_CASES = [
     name: 'dash',
     sleepTime: 500,
   },
+  {
+    name: 'flow',
+    sleepTime: 1000,
+  },
 ];
 
 describe('Line Snapshot', () => {

__tests__/integration/point.spec.ts

@@ -6,6 +6,7 @@ const TEST_CASES = [
   },
   {
     name: 'column',
+    sleepTime: 200,
   },
   {
     name: 'fill_image',

__tests__/integration/polygon.spec.ts

@@ -3,6 +3,7 @@ import { generateCanvasTestCases } from './utils/generator';
 const TEST_CASES = [
   {
     name: 'extrude',
+    sleepTime: 200,
   },
   {
     name: 'fill',

examples/constants.ts

@@ -3,6 +3,7 @@ import type { RenderDemoMap, RenderDemoOptions } from './types';
 export const MAP_TYPES: RenderDemoMap[] = [
   'Map',
   'GaodeMap',
+  'GaodeMapNext',
   'BaiduMap',
   'MapLibre',
   'TencentMap',

examples/demos/basemap/amap-data.ts

@@ -0,0 +1,46 @@
+import { LineLayer, Scene, Source } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+import type { RenderDemoOptions } from '../../types';
+
+export function MapRender(options: RenderDemoOptions) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: options.renderer,
+    map: new allMap[options.map]({
+      style: 'normal',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+    }),
+  });
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.104021, 30.262493],
+            [120.103875, 30.262601],
+            [120.103963, 30.262694],
+          ],
+        },
+      },
+    ],
+  };
+
+  const source = new Source(geoData);
+  const layer = new LineLayer({ blend: 'normal', autoFit: true })
+    .source(source)
+    .size(2)
+    .shape('line')
+    .color('#f00')
+    .style({
+      opacity: 1,
+    });
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+  });
+}

examples/demos/basemap/index.ts

@@ -0,0 +1 @@
+export { MapRender as amapData } from './amap-data';

examples/demos/bugfix/data-shake.ts

@@ -0,0 +1,40 @@
+import { PointLayer, Scene } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+import { featureEach, interpolate, randomPoint } from '@turf/turf';
+import type { RenderDemoOptions } from '../../types';
+
+const points = randomPoint(30, { bbox: [120.103217, 30.26128, 120.10348, 30.261506] });
+
+featureEach(points, function (point) {
+  // add a random property to each point
+  point.properties.solRad = Math.random() * 50;
+});
+
+const GEO_DATA = interpolate(points, 0.001, {
+  gridType: 'point',
+  property: 'solRad',
+  units: 'miles',
+});
+
+export function MapRender(options: RenderDemoOptions) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: options.renderer,
+    map: new allMap[options.map]({
+      style: 'normal',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      maxZoom: 23,
+    }),
+  });
+
+  const layer = new PointLayer({ autoFit: true })
+    .source(GEO_DATA)
+    .size(10)
+    .color('#f00')
+    .shape('simple');
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+  });
+}

examples/demos/bugfix/index.ts

@@ -1,4 +1,5 @@
 export { MapRender as color } from './color';
+export { MapRender as data_shake } from './data-shake';
 export { MapRender as event_legend } from './event_legend';
 export { MapRender as polygon } from './polygon';
 export { MapRender as remove_muti_layer } from './remove-muti-layer';

examples/demos/index.ts

@@ -1,3 +1,4 @@
+import * as BaseMapDemos from './basemap';
 import * as BugFix from './bugfix';
 import * as CanvasDemos from './canvas';
 import * as Components from './components';
@@ -61,4 +62,8 @@ export default [
     name: 'Canvas',
     demos: CanvasDemos,
   },
+  {
+    name: 'BaseMap',
+    demos: BaseMapDemos,
+  },
 ];

examples/demos/polygon/extrude.ts

@@ -10,6 +10,7 @@ export function MapRender(options: RenderDemoOptions) {
       style: 'light',
       center: [121.434765, 31.256735],
       zoom: 14.83,
+      pitch: 45,
     }),
   });
 

examples/types.ts

@@ -3,6 +3,7 @@ import type { ISceneConfig } from '@antv/l7-core';
 export type RenderDemoMap =
   | 'Map'
   | 'GaodeMap'
+  | 'GaodeMapNext'
   | 'BaiduMap'
   | 'MapLibre'
   | 'TencentMap'

packages/layers/src/core/BaseLayer.ts

@@ -184,7 +184,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   }
 
   protected get mapService() {
-    return this.container.mapService;
+    return this.container?.mapService;
   }
 
   public styleAttributeService: IStyleAttributeService;

packages/maps/src/amap-next/index.ts

@@ -0,0 +1,8 @@
+import BaseMapWrapper from '../utils/BaseMapWrapper';
+import MapService from './map';
+
+export default class AMap2Wrapper extends BaseMapWrapper<AMap.Map> {
+  protected getServiceConstructor() {
+    return MapService;
+  }
+}

packages/maps/src/amap-next/logo.css

@@ -0,0 +1,9 @@
+.amap-logo {
+  display: none !important;
+}
+.amap-copyright {
+  display: none !important;
+}
+.amap-overlays {
+  z-index: 3 !important;
+}