Shihui (#1023)

* feat: 增加 lineLayer/pointLayer text 的抬升配置

* style: lint style

packages/layers/src/core/interface.ts

@@ -29,6 +29,7 @@ export interface ILineLayerStyleOptions {
   borderColor?: string; // 可选参数 线边框颜色
 
   heightfixed?: boolean; // 可选参数 高度是否固定
+  raisingHeight?: number; // 线图层抬升高度
 
   mask?: boolean; // 可选参数 时候允许蒙层
   maskInside?: boolean; // 可选参数 控制图层是否显示在蒙层的内部
@@ -50,6 +51,8 @@ export interface IPointLayerStyleOptions {
   fontFamily?: string;
   textAllowOverlap?: boolean;
 
+  raisingHeight?: number; // 线图层抬升高度
+
   // cylinder
   pickLight?: boolean;
   depth?: boolean;

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

@@ -43,6 +43,7 @@ export default class LineModel extends BaseModel {
       vertexHeightScale = 20.0,
       borderWidth = 0.0,
       borderColor = '#ccc',
+      raisingHeight = 0,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
@@ -118,6 +119,7 @@ export default class LineModel extends BaseModel {
 
       // 顶点高度 scale
       u_vertexScale: vertexHeightScale,
+      u_raisingHeight: Number(raisingHeight),
     };
   }
   public getAnimateUniforms(): IModelUniform {

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

@@ -19,6 +19,7 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 uniform float u_icon_step: 100;
 
 uniform float u_vertexScale: 1.0;
+uniform float u_raisingHeight: 0.0;
 
 #pragma include "projection"
 #pragma include "picking"
@@ -94,14 +95,25 @@ void main() {
 
   float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况
 
+  // 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, 1.0));
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y) + h * 0.2 + u_raisingHeight, 1.0));
   } else {
     float lineHeight = a_Size.y;
     // 兼容 mapbox 在线高度上的效果表现基本一致
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
       // 保持高度相对不变
-      h *= 2.0/pow(2.0, 20.0 - u_Zoom);
+      // 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 {
+      h += u_raisingHeight;
     }
 
     // #define COORDINATE_SYSTEM_P20 5.0

packages/layers/src/point/models/text.ts

@@ -102,6 +102,7 @@ export default class TextModel extends BaseModel {
       textAllowOverlap = false,
       halo = 0.5,
       gamma = 2.0,
+      raisingHeight = 0,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     const { canvas, mapping } = this.fontService;
     if (Object.keys(mapping).length !== this.textCount) {
@@ -158,6 +159,7 @@ export default class TextModel extends BaseModel {
     return {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
+      u_raisingHeight: Number(raisingHeight),
 
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,

packages/layers/src/point/shaders/text_vert.glsl

@@ -11,6 +11,7 @@ attribute float a_Rotate;
 uniform vec2 u_sdf_map_size;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
+uniform float u_raisingHeight: 0.0;
 
 varying vec2 v_uv;
 varying float v_gamma_scale;
@@ -109,14 +110,21 @@ void main() {
   
   // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
 
-  vec4 projected_position;
+  float raiseHeight = u_raisingHeight;
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-   projected_position  = u_Mvp * (vec4(a_Position.xyz, 1.0));
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
-  } else { // else
+    raiseHeight = u_raisingHeight * mapboxZoomScale;
-   projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
   }
 
-  gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+  vec4 projected_position;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+   projected_position  = u_Mvp * (vec4(a_Position.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
+  } else { // else
+   projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
+  }
+
+  gl_Position = vec4(
+    projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
   v_gamma_scale = gl_Position.w;
   setPickingColor(a_PickingColor);
 

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -1,4 +1,4 @@
-import { PolygonLayer, Scene, LineLayer } from '@antv/l7';
+import { PolygonLayer, Scene, LineLayer, PointLayer } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -117,6 +117,64 @@ export default class Amap2demo_polygon_extrude extends React.Component {
     //   .active(true);
     // scene.addLayer(layer);
 
+    // @ts-ignore
+    let lineDown, lineUp, textLayer;
+
+    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
+      .then((res) => res.json())
+      .then((data) => {
+        let texts: any[] = [];
+
+        data.features.map((option: any) => {
+          const { name, center } = option.properties;
+          const [lng, lat] = center;
+          texts.push({ name, lng, lat });
+        });
+
+        textLayer = new PointLayer({ zIndex: 2 })
+          .source(texts, {
+            parser: {
+              type: 'json',
+              x: 'lng',
+              y: 'lat',
+            },
+          })
+          .shape('name', 'text')
+          .size(14)
+          .color('#0ff')
+          .style({
+            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            spacing: 2, // 字符间距
+            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            stroke: '#0ff', // 描边颜色
+            strokeWidth: 0.2, // 描边宽度
+            raisingHeight: 200000 + 150000 + 10000,
+            textAllowOverlap: true,
+          });
+        scene.addLayer(textLayer);
+
+        lineDown = new LineLayer()
+          .source(data)
+          .shape('line')
+          .color('#0DCCFF')
+          .size(1)
+          .style({
+            raisingHeight: 200000,
+          });
+
+        lineUp = new LineLayer({ zIndex: 1 })
+          .source(data)
+          .shape('line')
+          .color('#0DCCFF')
+          .size(1)
+          .style({
+            raisingHeight: 200000 + 150000,
+          });
+
+        scene.addLayer(lineDown);
+        scene.addLayer(lineUp);
+      });
+
     fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
       .then((res) => res.json())
       .then((data) => {
@@ -139,7 +197,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
           .color('#0DCCFF')
           .active({
             color: 'rgb(100,230,255)',
-            // color: '#00FFFF',
           })
           .style({
             heightfixed: true,
@@ -154,12 +211,36 @@ export default class Amap2demo_polygon_extrude extends React.Component {
           provincelayer.style({
             raisingHeight: 200000 + 100000,
           });
+          // @ts-ignore
+          lineDown.style({
+            raisingHeight: 200000 + 100000,
+          });
+          // @ts-ignore
+          lineUp.style({
+            raisingHeight: 200000 + 150000 + 100000,
+          });
+          // @ts-ignore
+          textLayer.style({
+            raisingHeight: 200000 + 150000 + 10000 + 100000,
+          });
         });
 
         provincelayer.on('unmousemove', () => {
           provincelayer.style({
             raisingHeight: 200000,
           });
+          // @ts-ignore
+          lineDown.style({
+            raisingHeight: 200000,
+          });
+          // @ts-ignore
+          lineUp.style({
+            raisingHeight: 200000 + 150000,
+          });
+          // @ts-ignore
+          textLayer.style({
+            raisingHeight: 200000 + 150000 + 10000,
+          });
         });
       });
   }