fix: Mapbox/Maplibre 20 层级以上数据偏移问题

.changeset/slimy-starfishes-joke.md

@@ -0,0 +1,9 @@
+---
+'@antv/l7-layers': patch
+'@antv/l7-core': patch
+'@antv/l7-maps': patch
+---
+
+fix: Mapbox/Maplibre 20 层级以上数据偏移问题
+fix: 修复点图层部分 shape 中心点计算有误
+fix: 修复立体面图层光照计算有误

__tests__/integration/gallery.spec.ts

@@ -3,7 +3,11 @@ import { generateCanvasTestCases } from './utils/generator';
 const TEST_CASES = [
   {
     name: 'fujian',
-    sleepTime: 500,
+    sleepTime: 1000,
+  },
+  {
+    name: 'variFlight',
+    sleepTime: 2000,
   },
 ];
 

__tests__/integration/line.spec.ts

@@ -2,19 +2,31 @@ import { generateCanvasTestCases } from './utils/generator';
 
 const TEST_CASES = [
   {
-    name: 'arc',
-    sleepTime: 500,
+    name: 'simple',
+  },
+  {
+    name: 'normal',
   },
   {
-    name: 'arc_plane',
+    name: 'dash',
+    snapshots: false,
     sleepTime: 500,
   },
+  {
+    name: 'wall',
+    sleepTime: 1000,
+  },
   {
     name: 'arc',
-    sleepTime: 600,
+    sleepTime: 500,
   },
   {
-    name: 'dash',
+    name: 'arc3D',
+    sleepTime: 500,
+  },
+  {
+    name: 'greatcircle',
+    snapshots: false,
     sleepTime: 500,
   },
   {

__tests__/integration/point.spec.ts

@@ -9,14 +9,19 @@ const TEST_CASES = [
     sleepTime: 200,
   },
   {
-    name: 'fill_image',
+    name: 'dot',
+    snapshots: false,
   },
   {
     name: 'fill',
   },
-  // {
-  //   name: 'image',
-  // },
+  {
+    name: 'fill_image',
+  },
+  {
+    name: 'image',
+    snapshots: false,
+  },
   {
     name: 'text',
   },

__tests__/integration/polygon.spec.ts

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

examples/constants.ts

@@ -4,10 +4,10 @@ export const MAP_TYPES: RenderDemoMap[] = [
   'Map',
   'GaodeMap',
   'GaodeMapNext',
-  'BaiduMap',
+  'Mapbox',
   'MapLibre',
+  'BaiduMap',
   'TencentMap',
-  'Mapbox',
   'TMap',
   'GoogleMap',
 ] as const;

examples/demos/basemap/amap-data.ts

@@ -10,6 +10,7 @@ export function MapRender(options: RenderDemoOptions) {
       style: 'normal',
       center: [121.434765, 31.256735],
       zoom: 14.83,
+      maxZoom: 25,
     }),
   });
   const geoData = {

examples/demos/basemap/index.ts

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

examples/demos/basemap/wgs84-data.ts

@@ -0,0 +1,73 @@
+import { LineLayer, Scene, Source } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+import type { Map } from 'maplibre-gl';
+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: ['MapLibre', 'Mapbox'].includes(options.map)
+        ? 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
+        : 'normal',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      maxZoom: 23.9,
+    }),
+  });
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.10121458655186, 30.269329295915544],
+            [120.10122467185921, 30.2693341645727],
+            [120.10123176240315, 30.269323019911795],
+          ],
+        },
+      },
+    ],
+  };
+
+  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);
+  });
+
+  if (scene.getType() === 'mapbox') {
+    const baseMap = scene.map as Map;
+    baseMap.on('load', () => {
+      baseMap.addSource('route', {
+        type: 'geojson',
+        data: geoData,
+      });
+      baseMap.addLayer({
+        id: 'route',
+        type: 'line',
+        source: 'route',
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        paint: {
+          'line-color': '#0083FE',
+          'line-width': 2,
+        },
+      });
+    });
+  }
+}

examples/demos/bugfix/data-shake.ts

@@ -21,20 +21,59 @@ export function MapRender(options: RenderDemoOptions) {
     id: 'map',
     renderer: options.renderer,
     map: new allMap[options.map]({
-      style: 'normal',
-      center: [121.434765, 31.256735],
-      zoom: 14.83,
+      style: ['MapLibre', 'Mapbox'].includes(options.map)
+        ? 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
+        : 'normal',
+      center: [120.10321541789858, 30.261273569440405],
+      // zoom: 23,
+      zoom: 21.588541277244076,
       maxZoom: 23,
     }),
   });
 
-  const layer = new PointLayer({ autoFit: true })
+  const layer = new PointLayer({ autoFit: false })
     .source(GEO_DATA)
-    .size(10)
-    .color('#f00')
-    .shape('simple');
+    .size(15)
+    .color('rgb(255, 0, 0)')
+    .shape('circle')
+    .style({
+      stroke: '#0083FE',
+      strokeWidth: 2,
+      // unit: 'meter',
+    });
 
   scene.on('loaded', () => {
     scene.addLayer(layer);
+    // scene.setZoomAndCenter(22, [120.10348, 30.261506]);
+
+    // const mapType = scene.getType();
+    // if (!['default', 'mapbox'].includes(mapType)) return;
+    // setTimeout(() => {
+    //   const isMapbox = mapType === 'mapbox';
+    //   const dom = document.querySelector(
+    //     isMapbox ? '.l7-marker-container' : '.l7-canvas-container',
+    //   );
+    //   // console.log('dom: ', dom);
+    //   const wheelEvt = new WheelEvent('wheel', {
+    //     bubbles: true,
+    //     cancelable: true,
+    //     composed: true,
+    //     clientX: 1329,
+    //     clientY: 168,
+    //     deltaY: 200,
+    //   });
+    //   // console.log('wheelEvt: ', wheelEvt);
+    //   dom?.dispatchEvent(wheelEvt);
+
+    //   const wheelEvt2 = new WheelEvent('wheel', {
+    //     bubbles: true,
+    //     cancelable: true,
+    //     composed: true,
+    //     clientX: 1329,
+    //     clientY: 168,
+    //     deltaY: 400,
+    //   });
+    //   dom?.dispatchEvent(wheelEvt2);
+    // }, 1000 * 3);
   });
 }

examples/demos/gallery/index.ts

@@ -1 +1,2 @@
 export { MapRender as fujian } from './fujian';
+export { MapRender as variFlight } from './vari-flight';

examples/demos/line/arc-3d.ts

@@ -0,0 +1,44 @@
+import { LineLayer, Scene } 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: 'dark',
+      center: [104.34278, 41.12554],
+      zoom: 2.94888,
+      pitch: 0,
+    }),
+  });
+
+  scene.on('loaded', () => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json')
+      .then((res) => res.json())
+      .then((data) => {
+        const layer = new LineLayer({})
+          .source(data, {
+            parser: {
+              type: 'json',
+              x: 'from_lon',
+              y: 'from_lat',
+              x1: 'to_lon',
+              y1: 'to_lat',
+            },
+          })
+          .size(2)
+          .shape('arc3d')
+          .color('#FF7C6A')
+          .style({
+            segmentNumber: 15,
+            opacity: 0.8,
+          });
+        scene.addLayer(layer);
+        if (window['screenshot']) {
+          window['screenshot']();
+        }
+      });
+  });
+}

examples/demos/line/arc.ts

@@ -25,7 +25,7 @@ export function MapRender(options: RenderDemoOptions) {
           type: 'MultiLineString',
           coordinates: [
             [
-              [116.371436, 39.942372],
+              [116.43, 39.97],
               [121.467025, 31.2327],
             ],
           ],
@@ -55,8 +55,6 @@ export function MapRender(options: RenderDemoOptions) {
   const source = new Source(geoData);
   const source2 = new Source(geoData2);
 
-  // scene.on('zoom', e => console.log(e))
-
   const layer = new LineLayer({ blend: 'normal', autoFit: true })
     .source(source)
     .size(2)
@@ -83,55 +81,17 @@ export function MapRender(options: RenderDemoOptions) {
   const point = new PointLayer({ blend: 'normal', zIndex: 1 })
     .source(
       [
-        {
-          lng: 116.43,
-          lat: 39.97,
-        },
-        {
-          lng: 108.39,
-          lat: 22.91,
-        },
+        { lng: 116.43, lat: 39.97 },
+        { lng: 108.39, lat: 22.91 },
       ],
       {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
+        parser: { type: 'json', x: 'lng', y: 'lat' },
       },
     )
     .shape('circle')
     .size(10)
     .color('blue');
-  const point2 = new PointLayer({ blend: 'normal', zIndex: 1 })
-    .source(
-      [
-        {
-          lng: 116.43,
-          lat: 39.97,
-        },
-        {
-          lng: 108.39,
-          lat: 22.91,
-        },
-      ],
-      {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      },
-    )
-    .shape('circle')
-    .size(100000)
-    .color('blue')
-    .style({
-      opacity: 0.5,
-      unit: 'meter',
-    });
   scene.addLayer(point);
-  scene.addLayer(point2);
 
   scene.addLayer(layer);
   scene.addLayer(layer2);