Shihui (#1022)

* feat: polygon 挤出几何体支持高度配置

* style: lint style

packages/layers/src/core/interface.ts

@@ -80,6 +80,7 @@ export interface IPolygonLayerStyleOptions {
     dir: string;
   };
 
+  raisingHeight?: number; // 挤出几何体抬升高度
   heightfixed?: boolean; // 挤出几何体高度是否固定（不随 zoom 发生变化）
 
   pickLight: boolean;

packages/layers/src/polygon/models/extrude.ts

@@ -13,6 +13,7 @@ export default class ExtrudeModel extends BaseModel {
     const {
       opacity = 1,
       heightfixed = false,
+      raisingHeight = 0,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
@@ -49,7 +50,7 @@ export default class ExtrudeModel extends BaseModel {
       u_heightfixed: Number(heightfixed),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-
+      u_raisingHeight: Number(raisingHeight),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }

packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl

@@ -13,6 +13,7 @@ uniform mat4 u_Mvp;
 
 varying vec4 v_Color;
 uniform float u_heightfixed: 0.0; // 默认不固定
+uniform float u_raisingHeight: 0.0;
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
@@ -55,11 +56,18 @@ void main() {
 
   if(u_heightfixed > 0.0) { // 判断几何体是否固定高度
     project_pos.z = a_Position.z * a_Size;
+    project_pos.z += u_raisingHeight;
+
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-      project_pos.z *= 4.0/pow(2.0, 21.0 - u_Zoom);
+      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+      project_pos.z *= mapboxZoomScale;
+      project_pos.z += u_raisingHeight * mapboxZoomScale;
     }
   }
 
+  // project_pos.z += 500000.0; // amap1
+
+  // project_pos.z += (500000.0 * 4.0)/pow(2.0, 21.0 - u_Zoom); // mapbox
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -1,4 +1,4 @@
-import { PolygonLayer, Scene } from '@antv/l7';
+import { PolygonLayer, Scene, LineLayer } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -13,17 +13,23 @@ export default class Amap2demo_polygon_extrude extends React.Component {
   }
 
   public async componentDidMount() {
-    const response = await fetch(
-      // 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
-      'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
-    );
+    // const response = await fetch(
+    //   // 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
+    //   // 'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
+    //   'https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json'
+    // );
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
-        pitch: 0,
-        // style: 'dark',
-        center: [-44.40673828125, -18.375379094031825],
-        zoom: 13,
+      map: new GaodeMap({
+        // map: new GaodeMapV2({
+        // map: new Mapbox({
+        // pitch: 0,
+        style: 'dark',
+        // center: [-44.40673828125, -18.375379094031825],
+        // zoom: 13,
+        center: [120, 29.732983],
+        zoom: 6.2,
+        pitch: 60,
       }),
     });
     this.scene = scene;
@@ -94,22 +100,66 @@ export default class Amap2demo_polygon_extrude extends React.Component {
       ],
     };
 
-    const layer = new PolygonLayer({
-      autoFit: true,
-    })
-      .source(data)
-      // .shape('fill')
-      .shape('extrude')
-      .color('red')
-      .size(600000)
-      .style({
-        // pickLight: true,
-        heightfixed: true,
-        // heightfixed: false,
-        opacity: 'testOpacity',
-      })
-      .active(true);
-    scene.addLayer(layer);
+    // const layer = new PolygonLayer({
+    //   autoFit: true,
+    // })
+    //   .source(data)
+    //   // .shape('fill')
+    //   .shape('extrude')
+    //   .color('red')
+    //   .size(600000)
+    //   .style({
+    //     // pickLight: true,
+    //     heightfixed: true,
+    //     // heightfixed: false,
+    //     opacity: 'testOpacity',
+    //   })
+    //   .active(true);
+    // scene.addLayer(layer);
+
+    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
+      .then((res) => res.json())
+      .then((data) => {
+        const lineLayer = new LineLayer()
+          .source(data)
+          .shape('wall')
+          .size(150000)
+          .style({
+            heightfixed: true,
+            opacity: 0.6,
+            sourceColor: '#0DCCFF',
+            targetColor: 'rbga(255,255,255, 0)',
+          });
+        scene.addLayer(lineLayer);
+
+        const provincelayer = new PolygonLayer({})
+          .source(data)
+          .size(150000)
+          .shape('extrude')
+          .color('#0DCCFF')
+          .active({
+            color: '#0DCCFF',
+          })
+          .style({
+            heightfixed: true,
+            raisingHeight: 200000,
+            opacity: 0.8,
+          });
+
+        scene.addLayer(provincelayer);
+
+        provincelayer.on('mousemove', () => {
+          provincelayer.style({
+            raisingHeight: 200000 + 100000,
+          });
+        });
+
+        provincelayer.on('unmousemove', () => {
+          provincelayer.style({
+            raisingHeight: 200000,
+          });
+        });
+      });
   }
 
   public render() {