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

docs/api/layer/point_layer/pointlayer.zh.md

@@ -29,8 +29,8 @@ shape 支持
 点数据类型，根据经纬点绘制图形,目前支持三种数据结构
 
 - [GeoJSON]('../../../../source/geojson/#point')
-- [CSV](../../../../source/csv/#parser)
+- [CSV]('../../../../source/csv/#parser')
-- [JSON](../../../../source/json/#点数据)
+- [JSON]('../../../../source/json/#点数据')
 
 **图片标注**
 

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

@@ -105,6 +105,8 @@ 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)); // 线顶点的高度 - 兼容不存在第三个数值的情况
+
   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, a_Size.y / 8.0, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容
@@ -114,7 +116,9 @@ void main() {
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
       lineHeight = lineHeight*2.0/pow(2.0, 20.0 - u_Zoom);
     }
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0));
+    
+
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h * 20.0, 1.0));
   }
 
   setPickingColor(a_PickingColor);

packages/layers/src/utils/extrude_polyline.ts

@@ -1,5 +1,5 @@
 import { aProjectFlat } from '@antv/l7-utils';
-import { vec2 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
 const tmp = vec2.create();
 const capEnd = vec2.create();
 const lineA = vec2.create();
@@ -102,10 +102,10 @@ 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 vec2;
+      const last = points[i - 1] as vec3;
       const originLast = originPoints[i - 1] as vec2;
 
-      const cur = points[i] as vec2;
+      const cur = points[i] as vec3;
       const originCur = originPoints[i] as vec2;
 
       const next = i < points.length - 1 ? points[i + 1] : null;
@@ -117,7 +117,7 @@ export default class ExtrudePolyline {
         count,
         last,
         cur,
-        next as vec2,
+        next as vec3,
         originLast,
         originCur,
         originNext as vec2,
@@ -146,10 +146,10 @@ 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 vec2;
+      const last = points[i - 1] as vec3;
-      const cur = points[i] as vec2;
+      const cur = points[i] as vec3;
       const next = i < points.length - 1 ? points[i + 1] : null;
-      const amt = this.segment(complex, count, last, cur, next as vec2);
+      const amt = this.segment(complex, count, last, cur, next as vec3);
       count += amt;
     }
     if (this.dash) {
@@ -163,9 +163,9 @@ export default class ExtrudePolyline {
   private segment_gaode2(
     complex: any,
     index: number,
-    last: vec2,
+    last: vec3,
-    cur: vec2,
+    cur: vec3,
-    next: vec2,
+    next: vec3,
     originLast: vec2,
     originCur: vec2,
     originNext: vec2,
@@ -184,7 +184,7 @@ export default class ExtrudePolyline {
       number,
       number,
     ];
-    direction(lineA, cur, last);
+    direction(lineA, cur as vec2, last as vec2);
     let segmentDistance = 0;
     if (this.dash) {
       segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
@@ -210,18 +210,18 @@ export default class ExtrudePolyline {
         positions.push(
           last[0],
           last[1],
-          0,
+          last[2] | 0,
           this.totalDistance - segmentDistance,
           -this.thickness,
-          0,
+          last[2] | 0,
         );
         positions.push(
           last[0],
           last[1],
-          0,
+          last[2] | 0,
           this.totalDistance - segmentDistance,
           this.thickness,
-          0,
+          last[2] | 0,
         );
       } else {
         this.extrusions(
@@ -251,18 +251,18 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness,
-          0,
+          cur[2] | 0,
         );
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness,
-          0,
+          cur[2] | 0,
         );
       } else {
         this.extrusions(
@@ -281,14 +281,17 @@ export default class ExtrudePolyline {
       );
       count += 2;
     } else {
-      if (isPointEqual(cur, next)) {
+      if (isPointEqual(cur as vec2, next as vec2)) {
         vec2.add(
-          next,
+          next as vec2,
-          cur,
+          cur as vec2,
-          vec2.normalize(next, vec2.subtract(next, cur, last)),
+          vec2.normalize(
+            next as vec2,
+            vec2.subtract(next as vec2, cur as vec2, last as vec2),
+          ),
         );
       }
-      direction(lineB, next, cur);
+      direction(lineB, next as vec2, cur as vec2);
       // stores tangent & miter
 
       const [miterLen, miter] = computeMiter(
@@ -317,18 +320,18 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           -this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         indices.push(
           ...(this.lastFlip !== -flip
@@ -345,10 +348,10 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           -this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         count += 3;
       } else {
@@ -379,9 +382,9 @@ export default class ExtrudePolyline {
   private segment(
     complex: any,
     index: number,
-    last: vec2,
+    last: vec3,
-    cur: vec2,
+    cur: vec3,
-    next: vec2,
+    next: vec3,
   ) {
     let count = 0;
     const indices = complex.indices;
@@ -417,18 +420,18 @@ export default class ExtrudePolyline {
         positions.push(
           last[0],
           last[1],
-          0,
+          last[2] | 0,
           this.totalDistance - segmentDistance,
           -this.thickness,
-          0,
+          last[2] | 0,
         );
         positions.push(
           last[0],
           last[1],
-          0,
+          last[2] | 0,
           this.totalDistance - segmentDistance,
           this.thickness,
-          0,
+          last[2] | 0,
         );
 
         // this.extrusions(positions, normals, last, out, this.thickness);
@@ -462,18 +465,18 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness,
-          0,
+          cur[2] | 0,
         );
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness,
-          0,
+          cur[2] | 0,
         );
       } else {
         this.extrusions(
@@ -531,18 +534,18 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           -this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         indices.push(
           ...(this.lastFlip !== -flip
@@ -559,10 +562,10 @@ export default class ExtrudePolyline {
         positions.push(
           cur[0],
           cur[1],
-          0,
+          cur[2] | 0,
           this.totalDistance,
           -this.thickness * flip,
-          0,
+          cur[2] | 0,
         );
         count += 3;
       } else {
@@ -593,15 +596,29 @@ export default class ExtrudePolyline {
   private extrusions(
     positions: number[],
     normals: number[],
-    point: vec2, // 顶点
+    point: vec3, // 顶点
     normal: vec2, // 法向量
     thickness: number, // 高度
     distanceRadio: number,
   ) {
     normals.push(normal[0], normal[1], 0);
     normals.push(normal[0], normal[1], 0);
-    positions.push(point[0], point[1], 0, distanceRadio, -thickness, 0);
+    positions.push(
-    positions.push(point[0], point[1], 0, distanceRadio, thickness, 0);
+      point[0],
+      point[1],
+      point[2] | 0,
+      distanceRadio,
+      -thickness,
+      point[2] | 0,
+    );
+    positions.push(
+      point[0],
+      point[1],
+      point[2] | 0,
+      distanceRadio,
+      thickness,
+      point[2] | 0,
+    );
   }
   private lineSegmentDistance(b1: vec2, a1: vec2) {
     const dx = a1[0] - b1[0];

stories/Map/components/amap2demo_lineHeight.tsx

@@ -13,55 +13,28 @@ export default class Amap2demo_lineHeight extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         pitch: 40,
         style: 'light',
-        center: [102.600579, 23.114887],
+        center: [120, 23.114887],
-        zoom: 14.66,
+        zoom: 8,
-        viewMode: '3D',
       }),
     });
     this.scene = scene;
 
     scene.on('loaded', () => {
       fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
+        // 'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
+        'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.json',
       )
         .then((res) => res.json())
         .then((data) => {
-          //   let data = {
-          //     "type": "FeatureCollection",
-          //     "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-          //     "features": [
-          //     { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } },
-          //     { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } },
-          //  ]
-          // }
           const layer = new LineLayer({})
             .source(data)
-            .size('ELEV', (h) => {
+            .size(1)
-              return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 20];
-            })
             .shape('line')
-            .scale('ELEV', {
+            .color('#ccc');
-              type: 'quantize',
+
-            })
-            .color('#f00');
-          // .color(
-          //   'ELEV',
-          //   [
-          //     '#E4682F',
-          //     '#FF8752',
-          //     '#FFA783',
-          //     '#FFBEA8',
-          //     '#FFDCD6',
-          //     '#EEF3FF',
-          //     '#C8D7F5',
-          //     '#A5C1FC',
-          //     '#7FA7F9',
-          //     '#5F8AE5',
-          //   ].reverse(),
-          // );
           scene.addLayer(layer);
         });
     });