Shihuidev (#1041)

* feat: 完善线图层的 heightfixed 配置

* style: lint style

* docs: 完善官网 demo

* docs: 完善官网文档

* style: lint style

docs/api/line_layer/path.zh.md

@@ -43,6 +43,20 @@ layer.size('height', []);
 
 ✨ 当用户在传入数据的第三个值可以用于表示当前点的高度，通过在 source 中传入的第三个参数我们可以的高度不等的线图层
 
+### style
+
+#### raisingHeight: number
+
+线图层的抬升高度，高度值和地图缩放层级无关。
+
+[在线案例](/zh/examples/polygon/3d#floatMap)
+
+#### heightfixed: boolean
+
+线图层的高度是否和地图缩放层级无关，默认为 false。
+
+[在线案例](/zh/examples/line/isoline#ele)
+
 `markdown:docs/api/line_layer/features/vertexHeight.zh.md`
 
 `markdown:docs/api/line_layer/features/linear.zh.md`

examples/line/isoline/demo/ele.js

@@ -7,7 +7,7 @@ const scene = new Scene({
     pitch: 53.6305,
     style: 'light',
     center: [ 102.600579, 23.114887 ],
-    zoom: 14.66
+    zoom: 13.5
   })
 });
 scene.on('loaded', () => {
@@ -17,12 +17,15 @@ scene.on('loaded', () => {
       const layer = new LineLayer({})
         .source(data)
         .size('ELEV', h => {
-          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
+          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20 ];
         })
         .shape('line')
         .scale('ELEV', {
           type: 'quantize'
         })
+        .style({
+          heightfixed: true
+        })
         .color(
           'ELEV',
           [

examples/line/isoline/demo/ele_dark.js

@@ -31,12 +31,15 @@ scene.on('loaded', () => {
       })
         .source(data)
         .size('ELEV', h => {
-          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
+          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20 ];
         })
         .shape('line')
         .scale('ELEV', {
           type: 'quantize'
         })
+        .style({
+          heightfixed: true
+        })
         .color('ELEV', [
           '#094D4A',
           '#146968',

packages/layers/src/line/models/line.ts

@@ -44,6 +44,7 @@ export default class LineModel extends BaseModel {
       borderWidth = 0.0,
       borderColor = '#ccc',
       raisingHeight = 0,
+      heightfixed = false,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
@@ -117,6 +118,9 @@ export default class LineModel extends BaseModel {
       u_sourceColor: sourceColorArr,
       u_targetColor: targetColorArr,
 
+      // 是否固定高度
+      u_heightfixed: Number(heightfixed),
+
       // 顶点高度 scale
       u_vertexScale: vertexHeightScale,
       u_raisingHeight: Number(raisingHeight),

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

@@ -18,6 +18,7 @@ uniform mat4 u_Mvp;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 uniform float u_icon_step: 100;
 
+uniform float u_heightfixed: 0.0;
 uniform float u_vertexScale: 1.0;
 uniform float u_raisingHeight: 0.0;
 
@@ -93,35 +94,37 @@ 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; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height
-
+  float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight]
-  // project_pos.z += u_raisingHeight;
-  // if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-  //   float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
-  //   project_pos.z += u_raisingHeight * mapboxZoomScale;
-  // }
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y) + h * 0.2 + u_raisingHeight, 1.0));
+    lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果
+    h *= 0.2;
+    if(u_heightfixed < 1.0) {
+      lineHeight = project_pixel(a_Size.y);
+    }
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h + u_raisingHeight, 1.0));
   } else {
-    float lineHeight = a_Size.y;
+    // mapbox -  amap
+    
     // 兼容 mapbox 在线高度上的效果表现基本一致
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      // mapbox
       // 保持高度相对不变
-      // h *= 2.0/pow(2.0, 20.0 - u_Zoom);
       float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
       h *= mapboxZoomScale;
       h += u_raisingHeight * mapboxZoomScale;
-    } else {
+      if(u_heightfixed > 0.0) {
-      h += u_raisingHeight;
+        lineHeight *= mapboxZoomScale;
-    }
+      }
       
-    // #define COORDINATE_SYSTEM_P20 5.0
+    } else {
-    // #define COORDINATE_SYSTEM_P20_OFFSET 6.0
+      // amap
-    // amap1.x
+      h += u_raisingHeight;
-    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+      // lineHeight 顶点偏移高度
-      // 保持高度相对不变
+      if(u_heightfixed < 1.0) {
-      lineHeight *= pow(2.0, 20.0 - u_Zoom);
+        lineHeight *= pow(2.0, 20.0 - u_Zoom);
+      }
     }
 
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h, 1.0));

stories/Map/components/amap2demo_lineHeight.tsx

@@ -13,31 +13,62 @@ export default class Amap2demo_lineHeight extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new Mapbox({
         pitch: 40,
         style: 'light',
-        center: [120, 23.114887],
+        // center: [120, 23.114887],
-        zoom: 8,
+        center: [102.600579, 23.114887],
+        // zoom: 8,
+        zoom: 14.66,
       }),
     });
     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',
+        // 'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.json',
       )
         .then((res) => res.json())
         .then((data) => {
+          // const layer = new LineLayer({})
+          //   .source(data)
+          //   .size(1)
+          //   .shape('line')
+          //   .style({
+          //     vertexHeightScale: 30,
+          //   })
+          //   .color('#ccc');
+
+          // scene.addLayer(layer);
+          // -----
           const layer = new LineLayer({})
             .source(data)
-            .size(1)
+            .size('ELEV', (h) => {
-            .shape('line')
+              return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
-            .style({
-              vertexHeightScale: 30,
             })
-            .color('#ccc');
+            .shape('line')
-
+            .scale('ELEV', {
+              type: 'quantize',
+            })
+            .style({
+              heightfixed: true,
+            })
+            .color(
+              'ELEV',
+              [
+                '#E4682F',
+                '#FF8752',
+                '#FFA783',
+                '#FFBEA8',
+                '#FFDCD6',
+                '#EEF3FF',
+                '#C8D7F5',
+                '#A5C1FC',
+                '#7FA7F9',
+                '#5F8AE5',
+              ].reverse(),
+            );
           scene.addLayer(layer);
         });
     });

stories/Map/components/bugfix.tsx

@@ -1,6 +1,14 @@
 // @ts-nocheck
 import React from 'react';
-import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7';
+import {
+  Scene,
+  GaodeMap,
+  GaodeMapV2,
+  Mapbox,
+  Map,
+  PointLayer,
+  LineLayer,
+} from '@antv/l7';
 
 export default class Amap2demo extends React.Component {
   // @ts-ignore
@@ -20,7 +28,7 @@ export default class Amap2demo extends React.Component {
             // zoom: 14.83,
             pitch: 0,
             style: 'light',
-            center: [122.5, 30],
+            center: [120, 30],
             zoom: 4,
           }),
         });
@@ -32,11 +40,71 @@ export default class Amap2demo extends React.Component {
       });
     }
 
-    for (let i = 0; i < 20; i++) {
+    // for (let i = 0; i < 20; i++) {
-      console.log('init ' + (i + 1));
+    //   console.log('init ' + (i + 1));
-      let scene = await initScene();
+    //   let scene = await initScene();
-      scene.destroy();
+    //   scene.destroy();
-    }
+    // }
+
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        // center: [121.434765, 31.256735],
+        // zoom: 14.83,
+        pitch: 0,
+        style: 'light',
+        center: [120, 30],
+        zoom: 4,
+      }),
+    });
+    scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+    );
+
+    scene.on('loaded', () => {
+      for (let i = 0; i < 20; i++) {
+        //   const layer = new PointLayer().source([
+        //     { lng: 120, lat: 30, name: '00' }
+        //   ], {
+        //     parser: {
+        //       type: 'json',
+        //       x: 'lng',
+        //       y: 'lat'
+        //     }
+        //   })
+        //   .shape('name', ['00'])
+        //   .size(20)
+
+        // scene.addLayer(layer);
+
+        const lineLayer = new LineLayer()
+          .source(
+            [
+              {
+                lng1: 120,
+                lat1: 30,
+                lng2: 122,
+                lat2: 30,
+              },
+            ],
+            {
+              parser: {
+                type: 'json',
+                x: 'lng1',
+                y: 'lat1',
+                x1: 'lng2',
+                y1: 'lat2',
+              },
+            },
+          )
+          .shape('line')
+          .size(2)
+          .color('#f00');
+
+        scene.addLayer(lineLayer);
+      }
+    });
   }
 
   public render() {