Merge branch 'master' of https://github.com/antvis/L7

packages/layers/src/line/shaders/line_vert.glsl

@@ -104,18 +104,25 @@ void main() {
 
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
 
-  float h = float((a_Position.z)) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况
+  float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    // gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y, 1.0));
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y) + h * 0.2, 1.0));
-    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0 + h, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
   } else {
     float lineHeight = a_Size.y;
     // 兼容 mapbox 在线高度上的效果表现基本一致
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-      lineHeight = lineHeight*2.0/pow(2.0, 20.0 - u_Zoom);
+      // 保持高度相对不变
+      h *= 2.0/pow(2.0, 20.0 - u_Zoom);
+    }
+
+    // #define COORDINATE_SYSTEM_P20 5.0
+    // #define COORDINATE_SYSTEM_P20_OFFSET 6.0
+    // amap1.x
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+      // 保持高度相对不变
+      lineHeight *= pow(2.0, 20.0 - u_Zoom);
     }
-    
 
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h, 1.0));
   }

packages/layers/src/utils/extrude_polyline.ts

@@ -102,25 +102,37 @@ export default class ExtrudePolyline {
     const total = points.length;
     let count = complex.startIndex;
     for (let i = 1; i < total; i++) {
-      const last = points[i - 1] as vec3;
+      const last = points[i - 1];
-      const originLast = originPoints[i - 1] as vec2;
+      last.push(originPoints[i - 1][2] ?? 0);
+      // @ts-ignore
+      const originLast = originPoints[i - 1] as vec3;
 
-      const cur = points[i] as vec3;
+      const cur = points[i];
-      const originCur = originPoints[i] as vec2;
+      cur.push(originPoints[i][2] ?? 0);
+      // @ts-ignore
+      const originCur = originPoints[i] as vec3;
 
-      const next = i < points.length - 1 ? points[i + 1] : null;
+      const next =
+        i < points.length - 1
+          ? [...points[i + 1], originPoints[i + 1][2] ?? 0]
+          : null;
       const originNext =
         i < originPoints.length - 1 ? originPoints[i + 1] : null;
 
       const amt = this.segment_gaode2(
         complex,
         count,
-        last,
+        // @ts-ignore
-        cur,
+        last as vec3,
+        // @ts-ignore
+        cur as vec3,
+        // @ts-ignore
         next as vec3,
+        // @ts-ignore
         originLast,
         originCur,
-        originNext as vec2,
+        // @ts-ignore
+        originNext as vec3,
       );
       count += amt;
     }
@@ -166,9 +178,9 @@ export default class ExtrudePolyline {
     last: vec3,
     cur: vec3,
     next: vec3,
-    originLast: vec2,
+    originLast: vec3,
-    originCur: vec2,
+    originCur: vec3,
-    originNext: vec2,
+    originNext: vec3,
   ) {
     let count = 0;
     const indices = complex.indices;
@@ -184,9 +196,11 @@ export default class ExtrudePolyline {
       number,
       number,
     ];
-    direction(lineA, cur as vec2, last as vec2);
+    // @ts-ignore
+    direction(lineA, cur as vec3, last as vec3);
     let segmentDistance = 0;
     if (this.dash) {
+      // @ts-ignore
       segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
       this.totalDistance += segmentDistance;
     }
@@ -281,16 +295,22 @@ export default class ExtrudePolyline {
       );
       count += 2;
     } else {
+      // @ts-ignore
       if (isPointEqual(cur as vec2, next as vec2)) {
         vec2.add(
+          // @ts-ignore
           next as vec2,
+          // @ts-ignore
           cur as vec2,
           vec2.normalize(
+            // @ts-ignore
             next as vec2,
+            // @ts-ignore
             vec2.subtract(next as vec2, cur as vec2, last as vec2),
           ),
         );
       }
+      // @ts-ignore
       direction(lineB, next as vec2, cur as vec2);
       // stores tangent & miter
 
@@ -394,9 +414,11 @@ export default class ExtrudePolyline {
     const joinBevel = this.join === 'bevel';
     const flatCur = aProjectFlat([cur[0], cur[1]]) as [number, number];
     const flatLast = aProjectFlat([last[0], last[1]]) as [number, number];
+    // @ts-ignore
     direction(lineA, flatCur, flatLast);
     let segmentDistance = 0;
     if (this.dash) {
+      // @ts-ignore
       segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
       this.totalDistance += segmentDistance;
     }
@@ -620,7 +642,7 @@ export default class ExtrudePolyline {
       point[2] | 0,
     );
   }
-  private lineSegmentDistance(b1: vec2, a1: vec2) {
+  private lineSegmentDistance(b1: vec3, a1: vec3) {
     const dx = a1[0] - b1[0];
     const dy = a1[1] - b1[1];
     return Math.sqrt(dx * dx + dy * dy);

stories/Map/components/busline.tsx

@@ -0,0 +1,91 @@
+// @ts-ignore
+import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+import * as turf from '@turf/turf';
+
+const aspaceLnglat = [120.1019811630249, 30.264701434772807] as [
+  number,
+  number,
+];
+export default class BusLine extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        center: [103.83735604457024, 1.360253881403068],
+        pitch: 4.00000000000001,
+        zoom: 10.210275860702593,
+        rotation: 19.313180925794313,
+      }),
+    });
+
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new LineLayer({})
+            .source(data, {
+              parser: {
+                type: 'json',
+                coordinates: 'path',
+              },
+            })
+            .size('level', (level) => {
+              return [0.8, level * 1];
+            })
+            .style({
+              // vertexHeightScale: 0.01
+            })
+            .shape('line')
+            .active(true)
+            .color(
+              'level',
+              [
+                '#0A3663',
+                '#1558AC',
+                '#3771D9',
+                '#4D89E5',
+                '#64A5D3',
+                '#72BED6',
+                '#83CED6',
+                '#A6E1E0',
+                '#B8EFE2',
+                '#D7F9F0',
+              ]
+                .reverse()
+                .slice(0, 8),
+            );
+          scene.addLayer(layer);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -63,6 +63,7 @@ import Amap2demo_styleMap from "./components/amap2demo_styleMap"
 import Amap2demo_textOffset from "./components/amap2demo_textOffset"
 
 import ShapeUpdate from './components/shapeUpdate'
+import BusLine from './components/busline'
 import AmapPlugin from './components/plugin'
 import PointUV from './components/pointUV'
 import DestroyClear from './components/destroyClear'
@@ -146,3 +147,4 @@ storiesOf('地图方法', module)
         .add('Slider', () => <Slider/>)
         .add('SimplePoint', () => <SimplePoint/>)
         .add('LineWall', () => <LineWall/>)
+        .add('BusLine', () => <BusLine/>)