fix: mapbox 下部分面数据图层绘制异常

.changeset/tiny-seas-camp.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-layers': patch
+---
+
+fix: mapbox 下部分面数据图层绘制异常

examples/demos/bugfix/index.ts

@@ -1,6 +1,7 @@
 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 mutiPolygon } from './muti-polygon';
 export { MapRender as polygon } from './polygon';
 export { MapRender as remove_muti_layer } from './remove-muti-layer';
 export { MapRender as size } from './size';

examples/demos/bugfix/muti-polygon.ts

@@ -0,0 +1,42 @@
+import { PolygonLayer, 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: [-96, 37.8],
+      zoom: 3,
+    }),
+  });
+
+  fetch(
+    'https://npm.elemecdn.com/static-geo-atlas/geo-data/choropleth-data/country/100000_country_province.json',
+  )
+    .then((res) => res.json())
+    .then((data) => data.features.slice(4, 5))
+    .then((geoData) => {
+      const layer = new PolygonLayer({
+        autoFit: true,
+      })
+        .source(geoData, {
+          parser: {
+            type: 'json',
+            geometry: 'geometry',
+          },
+        })
+        .color('rgb(22,199,255)')
+        .shape('fill')
+        // .shape('extrude')
+        // .size(1200 * 100)
+        .active(true)
+        .style({
+          opacity: 0.5,
+        });
+
+      scene.addLayer(layer);
+    });
+}

packages/layers/src/core/shape/extrude.ts

@@ -1,7 +1,9 @@
 import { lngLatToMeters } from '@antv/l7-utils';
 import earcut from 'earcut';
 import { vec3 } from 'gl-matrix';
+import { getPolygonSurfaceIndices } from '../utils';
 import type { IPath } from './Path';
+
 export interface IExtrudeGeomety {
   positions: number[];
   index: number[];
@@ -62,6 +64,7 @@ export default function extrudePolygon(path: IPath[]): IExtrudeGeomety {
     index: indexArray,
   };
 }
+
 export function fillPolygon(points: IPath[]) {
   const flattengeo = earcut.flatten(points);
   const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
@@ -82,7 +85,7 @@ export function extrude_PolygonNormal(
   }
   const n = path[0].length;
   const flattengeo = earcut.flatten(path);
-  const { vertices, dimensions } = flattengeo;
+  const { vertices, dimensions, holes } = flattengeo;
   const positions = [];
   const indexArray = [];
   const normals = [];
@@ -97,8 +100,10 @@ export function extrude_PolygonNormal(
     );
     normals.push(0, 0, 1);
   }
-  const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
-  indexArray.push(...triangles);
+
+  const indices = getPolygonSurfaceIndices(vertices, holes, dimensions, needFlat);
+  indexArray.push(...indices);
+
   // 设置侧面
   for (let i = 0; i < n; i++) {
     const prePoint = flattengeo.vertices.slice(i * dimensions, (i + 1) * dimensions);
@@ -145,6 +150,7 @@ export function extrude_PolygonNormal(
     normals,
   };
 }
+
 function computeVertexNormals(
   p1: [number, number, number],
   p2: [number, number, number],

packages/layers/src/core/triangulation.ts

@@ -17,10 +17,11 @@ import {
 } from '../earth/utils';
 import ExtrudePolyline from '../utils/extrude_polyline';
 import type { IPosition, ShapeType2D, ShapeType3D } from './shape/Path';
+import { geometryShape } from './shape/Path';
 import type { IExtrudeGeomety } from './shape/extrude';
 import extrudePolygon, { extrude_PolygonNormal, fillPolygon } from './shape/extrude';
+import { getPolygonSurfaceIndices } from './utils';
 
-import { geometryShape } from './shape/Path';
 type IShape = ShapeType2D & ShapeType3D;
 interface IGeometryCache {
   [key: string]: IExtrudeGeomety;
@@ -334,23 +335,24 @@ export function polygonTriangulation(feature: IEncodeFeature) {
   const { coordinates } = feature;
   const flattengeo = earcut.flatten(coordinates as number[][][]);
   const { vertices, dimensions, holes } = flattengeo;
+
+  const indices = getPolygonSurfaceIndices(vertices, holes, dimensions);
+
   return {
-    indices: earcut(vertices, holes, dimensions),
+    indices,
     vertices,
     size: dimensions,
   };
 }
 
 // 构建几何图形（带有中心点和大小）
 export function polygonTriangulationWithCenter(feature: IEncodeFeature) {
-  const { coordinates } = feature;
-  const flattengeo = earcut.flatten(coordinates as number[][][]);
-  const { vertices, dimensions, holes } = flattengeo;
+  const { indices, vertices, size } = polygonTriangulation(feature);
 
   return {
-    indices: earcut(vertices, holes, dimensions),
+    indices: indices,
     vertices: getVerticesWithCenter(vertices),
-    size: dimensions + 4,
+    size: size + 4,
   };
 }
 

packages/layers/src/core/utils.ts

@@ -1,3 +1,45 @@
+import { lngLatToMeters } from '@antv/l7-utils';
+import earcut from 'earcut';
+
 export function MultipleOfFourNumber(num: number) {
   return Math.max(Math.ceil(num / 4) * 4, 4);
 }
+
+/**
+ * Get vertex indices for drawing polygon mesh (triangulation)
+ */
+export function getPolygonSurfaceIndices(
+  positions: number[],
+  holeIndices: number[],
+  positionSize: number,
+  preproject = true,
+) {
+  const is3d = positionSize === 3;
+
+  if (preproject) {
+    positions = positions.slice();
+    const p: number[] = [];
+    for (let i = 0; i < positions.length; i += positionSize) {
+      p[0] = positions[i];
+      p[1] = positions[i + 1];
+
+      if (is3d) {
+        p[2] = positions[i + 2];
+      }
+
+      // earcut is a 2D triangulation algorithm, and handles 3D data as if it was projected onto the XY plane
+      const xy = lngLatToMeters(p, true, { enable: false, decimal: 1 });
+
+      positions[i] = xy[0];
+      positions[i + 1] = xy[1];
+
+      if (is3d) {
+        positions[i + 2] = xy[2];
+      }
+    }
+  }
+
+  const indices = earcut(positions, holeIndices, positionSize);
+
+  return indices;
+}

packages/utils/src/geo.ts

@@ -65,6 +65,11 @@ function transform(item: any[], cb: (item: any[]) => any): any {
   return cb(item);
 }
 export function lngLatToMeters(lnglat: Point): Point;
+export function lngLatToMeters(
+  lnglat: Point,
+  validate?: boolean,
+  accuracy?: { enable: boolean; decimal: number },
+): Point;
 export function lngLatToMeters(
   lnglat: Point,
   validate: boolean = true,