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

* wip: data shake case

* fix: fix line data offset in mapbox

* refactor: 完成点线面图层属性索引重构

* refactor: 完成 citybuliding\earth\geometry\heatmap 图层属性索引重构

* refactor: 完成 image/ raster/wind 图层属性索引重构

* refactor: 标记最大索引

* chore: remove log

* fix: line layer data shake

* wip: point shape

* wip: line simpleline

* wip: pont billboard

* wip: point shape

* wip: wall shape

* wip: raster layer

* wip: polygon

* test: update case

* wip: extrude shape

* refactor: 自定义开启双精度属性

* chore: fetch time

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

* chore: turn up fetch time

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

* chore: add changeset

---------

Co-authored-by: lvisei <[email protected]>

.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/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);

examples/demos/line/greatcircle.ts

@@ -0,0 +1,51 @@
+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: 'light',
+      center: [107.77791556935472, 35.443286920228644],
+      zoom: 2.9142882493605033,
+    }),
+  });
+
+  scene.on('loaded', () => {
+    fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+      .then((res) => res.text())
+      .then((data) => {
+        const layer = new LineLayer({
+          blend: 'normal',
+        })
+          .source(data, {
+            parser: {
+              type: 'csv',
+              x: 'lng1',
+              y: 'lat1',
+              x1: 'lng2',
+              y1: 'lat2',
+            },
+          })
+          .size(1)
+          .shape('greatcircle')
+          // .animate({
+          //   enable: true,
+          //   interval: 0.1,
+          //   trailLength: 0.5,
+          //   duration: 2,
+          // })
+          .color('#8C1EB2')
+          .style({
+            opacity: 0.8,
+          });
+        scene.addLayer(layer);
+      });
+  });
+
+  if (window['screenshot']) {
+    window['screenshot']();
+  }
+}

examples/demos/line/index.ts

@@ -1,6 +1,8 @@
 export { MapRender as arc } from './arc';
-export { MapRender as arc_plane } from './arc_plane';
+export { MapRender as arc3D } from './arc-3d';
 export { MapRender as dash } from './dash';
 export { MapRender as flow } from './flow';
+export { MapRender as greatcircle } from './greatcircle';
 export { MapRender as normal } from './normal';
+export { MapRender as simple } from './simple';
 export { MapRender as wall } from './wall';

examples/demos/line/normal.ts

@@ -12,7 +12,6 @@ export function MapRender(options: RenderDemoOptions) {
       zoom: 14.83,
     }),
   });
-  console.log(111);
   const geoData = {
     type: 'FeatureCollection',
     features: [

examples/demos/line/simple.ts

@@ -0,0 +1,73 @@
+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: 'light',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+    }),
+  });
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          offset: 0.3,
+        },
+        geometry: {
+          type: 'MultiLineString',
+          coordinates: [
+            [
+              [99.228515625, 37.43997405227057],
+              [100.72265625, 27.994401411046148],
+              [110, 27.994401411046148],
+              [110, 25],
+              [100, 25],
+            ],
+            [
+              [108.544921875, 37.71859032558816],
+              [112.412109375, 32.84267363195431],
+              [115, 32.84267363195431],
+              [115, 35],
+            ],
+          ],
+        },
+      },
+      {
+        type: 'Feature',
+        properties: {
+          offset: 0.8,
+        },
+        geometry: {
+          type: 'MultiLineString',
+          coordinates: [
+            [
+              [110, 30],
+              [120, 30],
+              [120, 40],
+            ],
+          ],
+        },
+      },
+    ],
+  };
+  const source = new Source(geoData);
+  const layer = new LineLayer({ autoFit: true })
+    .source(source)
+    .size(1)
+    .shape('simple')
+    .color('#f00');
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+    if (window['screenshot']) {
+      window['screenshot']();
+    }
+  });
+}

examples/demos/line/wall.ts

@@ -10,6 +10,7 @@ export function MapRender(options: RenderDemoOptions) {
       style: 'light',
       center: [121.434765, 31.256735],
       zoom: 14.83,
+      pitch: 45,
     }),
   });
   fetch('https://gw.alipayobjects.com/os/bmw-prod/ec5351c9-d22b-4918-ad6c-1838064d3a64.json')

examples/demos/point/column.ts

@@ -10,7 +10,7 @@ export function MapRender(options: RenderDemoOptions) {
       style: 'light',
       center: [121.400257, 31.25287],
       zoom: 14.55,
-      rotation: 134.9507,
+      pitch: 45,
     }),
   });