Merge branch 'beta' into refactor/split-tripartite-map

.changeset/cyan-badgers-argue.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-layers': patch
+---
+
+fix: 解决 GeometryLayer 在不同底图上的渲染不一致情况

.changeset/gold-fans-dream.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-maps': patch
+---
+
+fix: 修复在 Map 上使用组件事件穿透到图层上的问题

.changeset/large-pumas-provide.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-map': patch
+---
+
+refactor: 升级新版一方地图交互事件机制，解决抖动问题

.changeset/pre.json

@@ -18,10 +18,14 @@
   },
   "changesets": [
     "clean-beers-try",
+    "cyan-badgers-argue",
     "five-singers-rush",
+    "gold-fans-dream",
     "honest-schools-relate",
+    "large-pumas-provide",
     "polite-apples-rule",
     "proud-flies-change",
+    "rude-crabs-cheer",
     "slimy-starfishes-joke",
     "sour-dodos-bake",
     "sour-lemons-perform",

__tests__/unit/preset/environment.ts

@@ -1 +1,4 @@
 (window as any).URL.createObjectURL = jest.fn;
+(window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+}));

examples/demos/geometry/index.ts

@@ -0,0 +1,4 @@
+export { plane } from './plane';
+export { rain } from './rain';
+export { snow } from './snow';
+export { terrain } from './terrain';

examples/demos/geometry/plane.ts

@@ -0,0 +1,28 @@
+import { GeometryLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const plane: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [120.1025, 30.2594],
+      style: 'dark',
+      zoom: 10,
+    },
+  });
+
+  const layer = new GeometryLayer()
+    .shape('plane')
+    .style({
+      opacity: 0.8,
+      width: 0.074,
+      height: 0.061,
+      center: [120.1025, 30.2594],
+    })
+    .active(true)
+    .color('#ff0');
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos/geometry/rain.ts

@@ -0,0 +1,33 @@
+import { GeometryLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const rain: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      pitch: 90,
+      style: 'dark',
+      center: [120, 30],
+      zoom: 6,
+    },
+  });
+
+  const layer = new GeometryLayer()
+    .shape('sprite')
+    .size(10)
+    .style({
+      opacity: 0.3,
+      mapTexture:
+        'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
+      center: [120, 30],
+      spriteCount: 120,
+      spriteRadius: 10,
+      spriteTop: 300,
+      spriteUpdate: 10,
+      spriteScale: 0.8,
+    });
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos/geometry/snow.ts

@@ -0,0 +1,31 @@
+import { GeometryLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const snow: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      pitch: 40,
+      style: 'dark',
+      center: [120, 30],
+      zoom: 6,
+    },
+  });
+
+  const layer = new GeometryLayer()
+    .shape('sprite')
+    .size(10)
+    .style({
+      mapTexture:
+        'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow
+      center: [120, 30],
+      spriteCount: 60,
+      spriteRadius: 10,
+      spriteTop: 300,
+      spriteUpdate: 5,
+    });
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos/geometry/terrain.ts

@@ -0,0 +1,84 @@
+import { GeometryLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const terrain: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [120.1025, 30.2594],
+      style: 'dark',
+      pitch: 65,
+      rotation: 180,
+      zoom: 14,
+    },
+  });
+
+  let currentZoom = 14,
+    currentModelData = '100x100';
+
+  const layer = new GeometryLayer().shape('plane').style({
+    width: 0.074,
+    height: 0.061,
+    center: [120.1025, 30.2594],
+    widthSegments: 100,
+    heightSegments: 100,
+    terrainClipHeight: 1,
+    mapTexture:
+      'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ',
+    terrainTexture:
+      'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ',
+    rgb2height: (r, g, b) => {
+      let h = (r * 255.0 * 256.0 * 256.0 + g * 255.0 * 256.0 + b * 255.0) * 0.1;
+      h = h / 200 - 12750;
+      h = Math.max(0, h);
+      return h;
+    },
+  });
+
+  let modelData10: any, modelData20: any, modelData100: any;
+
+  layer.on('terrainImageLoaded', () => {
+    modelData10 = layer.layerModel.createModelData({
+      widthSegments: 10,
+      heightSegments: 10,
+    });
+
+    modelData20 = layer.layerModel.createModelData({
+      widthSegments: 20,
+      heightSegments: 20,
+    });
+
+    modelData100 = layer.layerModel.createModelData({
+      widthSegments: 100,
+      heightSegments: 100,
+    });
+  });
+
+  scene.on('zoom', () => {
+    const zoom = Math.floor(scene.getZoom());
+    if (currentZoom !== zoom) {
+      if (zoom > 13) {
+        if (currentModelData !== '100x100') {
+          layer.updateModelData(modelData100);
+          currentModelData = '100x100';
+        }
+      } else if (zoom > 12) {
+        if (currentModelData !== '20x20') {
+          layer.updateModelData(modelData20);
+          currentModelData = '20x20';
+        }
+      } else {
+        if (currentModelData !== '10x10') {
+          layer.updateModelData(modelData10);
+          currentModelData = '10x10';
+        }
+      }
+      currentZoom = zoom;
+    }
+  });
+
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos/index.ts

@@ -5,6 +5,7 @@ import * as CanvasTestCases from './canvas';
 import * as ComponentsTestCases from './components';
 import * as ExtendTestCases from './extend';
 import * as GalleryTestCases from './gallery';
+import * as GeometryTestCases from './geometry';
 import * as HeatmapTestCases from './heatmap';
 import * as LineTestCases from './line';
 import * as MaskTestCases from './mask';
@@ -26,20 +27,24 @@ export const TestCases = new Map<string, [string, TestCase][]>([
   ['canvas', Object.entries(CanvasTestCases)],
   ['basemap', Object.entries(BasemapTestCases)],
   ['components', Object.entries(ComponentsTestCases)],
+  ['geometry', Object.entries(GeometryTestCases)],
   ['gallery', Object.entries(GalleryTestCases)],
   ['webgpu', Object.entries(WebgpuTestCases)],
   ['extend', Object.entries(ExtendTestCases)],
 ]);
 
-export function geSnapshotTestsFromNamespace(namespace: string) {
-  const testcases = TestCases.get(namespace);
-  if (!testcases) return [];
-  const demo = testcases
-    .filter(([, demo]) => Boolean(demo.snapshot))
-    .map(([name, demo]) => ({
-      name,
-      snapshot: Boolean(demo.snapshot),
-      sleepTime: typeof demo?.snapshot === 'object' ? demo.snapshot?.sleepTime : undefined,
-    }));
-  return demo;
-}
+/**
+ * ge SnapshotTests from namespace
+ */
+// export function geSnapshotTestsFromNamespace(namespace: string) {
+//   const testcases = TestCases.get(namespace);
+//   if (!testcases) return [];
+//   const demo = testcases
+//     .filter(([, demo]) => Boolean(demo.snapshot))
+//     .map(([name, demo]) => ({
+//       name,
+//       snapshot: Boolean(demo.snapshot),
+//       sleepTime: typeof demo?.snapshot === 'object' ? demo.snapshot?.sleepTime : undefined,
+//     }));
+//   return demo;
+// }

packages/component/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Change Log
 
+## 2.21.11-beta.6
+
+### Patch Changes
+
+- Updated dependencies [[`67647e9`](https://github.com/antvis/L7/commit/67647e95c5b06b593604310c78c6a0ec195c3a01)]:
+  - @antv/l7-layers@2.21.11-beta.6
+  - @antv/l7-core@2.21.11-beta.6
+  - @antv/l7-utils@2.21.11-beta.6
+
+## 2.21.11-beta.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @antv/l7-layers@2.21.11-beta.5
+  - @antv/l7-core@2.21.11-beta.5
+  - @antv/l7-utils@2.21.11-beta.5
+
+## 2.21.11-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @antv/l7-layers@2.21.11-beta.4
+  - @antv/l7-core@2.21.11-beta.4
+  - @antv/l7-utils@2.21.11-beta.4
+
 ## 2.21.11-beta.3
 
 ### Patch Changes

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.21.11-beta.3",
+  "version": "2.21.11-beta.6",
   "description": "Component for L7",
   "license": "MIT",
   "author": "https://github.com/orgs/antvis/people",

packages/core/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 2.21.11-beta.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @antv/l7-utils@2.21.11-beta.6
+
+## 2.21.11-beta.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @antv/l7-utils@2.21.11-beta.5
+
+## 2.21.11-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @antv/l7-utils@2.21.11-beta.4
+
 ## 2.21.11-beta.3
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.21.11-beta.3",
+  "version": "2.21.11-beta.6",
   "description": "",
   "license": "MIT",
   "author": "https://github.com/orgs/antvis/people",

packages/extension-maps/src/mapbox/map.ts

@@ -14,8 +14,6 @@ import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { MapTheme } from './theme';
 
-window.mapboxgl = mapboxgl;
-
 const MAPBOX_API_KEY =
   '101MlGsZ2AmmA&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg';
 
@@ -76,7 +74,7 @@ export default class MapboxService extends BaseMapService<Map> {
       this.mapContainer = this.map.getContainer();
     } else {
       this.mapContainer = this.creatMapContainer(id);
-      this.map = new window.mapboxgl.Map({
+      this.map = new (window.mapboxgl || mapboxgl).Map({
         container: this.mapContainer,
         style: this.getMapStyleValue(style),
         attributionControl,

packages/extension-maps/src/maplibre/map.ts

@@ -208,7 +208,6 @@ export default class MaplibreService extends BaseMapService<Map> {
   }
 
   public panBy(x: number = 0, y: number = 0): void {
-    // @ts-ignore
     this.map.panBy([x, y]);
   }
 
@@ -361,7 +360,8 @@ export default class MaplibreService extends BaseMapService<Map> {
   }
 
   public exportMap(type: 'jpg' | 'png'): string {
-    const renderCanvas = this.map.getCanvas();
+    // @ts-ignore
+    const renderCanvas = this.map?.getCanvas();
     const layersPng =
       type === 'jpg'
         ? (renderCanvas?.toDataURL('image/jpeg') as string)