feat: polygon fill/point wave support raisingHeight、polygon add topsurface/sidesurface (#1074)

* chore: update version 2.8.30 -> 2.8.31

* feat: polygon fill 支持配置 raisingHeight

* feat: polygon extrude 支持配置 side/top 的显隐

* feat: pointLayer fill/wave support raisingHeight

* style: lint style

* docs: update demo

* feat: update demo

packages/layers/src/core/interface.ts

@@ -96,6 +96,9 @@ export interface IPolygonLayerStyleOptions {
     dir: string;
   };
 
+  topsurface?: boolean;
+  sidesurface?: boolean;
+
   mapTexture?: string; // 挤出几何体顶面贴图
   raisingHeight?: number; // 挤出几何体抬升高度
   sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)

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

@@ -38,6 +38,7 @@ export default class FillModel extends BaseModel {
       offsets = [0, 0],
       blend,
       blur = 0,
+      raisingHeight = 0,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     if (
@@ -87,6 +88,8 @@ export default class FillModel extends BaseModel {
             });
     }
     return {
+      u_raisingHeight: Number(raisingHeight),
+
       u_isMeter: Number(this.isMeter),
       u_blur: blur,
 

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

@@ -22,6 +22,7 @@ uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
 uniform vec2 u_offsets;
 
 uniform float u_blur : 0.0;
+uniform float u_raisingHeight: 0.0;
 
 #pragma include "styleMapping"
 #pragma include "styleMappingCalOpacity"
@@ -153,10 +154,16 @@ void main() {
   vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
 
+  float raiseHeight = 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);
+    raiseHeight = u_raisingHeight * mapboxZoomScale;
+  }
+
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
+    gl_Position = u_Mvp * vec4(project_pos.xy + offset, raiseHeight, 1.0);
   } else {
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, u_raisingHeight, 1.0));
   }
 
   if(u_globel > 0.0) {

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

@@ -28,6 +28,8 @@ export default class ExtrudeModel extends BaseModel {
       opacity = 1,
       heightfixed = false,
       raisingHeight = 0,
+      topsurface = true,
+      sidesurface = true,
       sourceColor,
       targetColor,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
@@ -73,6 +75,10 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     return {
+      // 控制侧面和顶面的显示隐藏
+      u_topsurface: Number(topsurface),
+      u_sidesurface: Number(sidesurface),
+
       u_heightfixed: Number(heightfixed),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),

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

@@ -14,6 +14,7 @@ import polygon_vert from '../shaders/polygon_vert.glsl';
 export default class FillModel extends BaseModel {
   public getUninforms() {
     const {
+      raisingHeight = 0,
       opacity = 1,
       opacityLinear = {
         enable: false,
@@ -53,6 +54,9 @@ export default class FillModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       // u_opacity: opacity,
+
+      u_raisingHeight: Number(raisingHeight),
+
       u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       u_opacitylinear: Number(opacityLinear.enable),

packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl

@@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
 uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
@@ -12,7 +16,13 @@ void main() {
   float sidey = styleMappingMat[3][0];
   float lightWeight = styleMappingMat[3][1];
 
-  if(isSide < 1.0 && u_linearColor == 1.0) {
+  if(isSide < 1.0) {
+    // side face
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if(u_linearColor == 1.0) {
       vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
       linearColor.rgb *= lightWeight;
       gl_FragColor = linearColor;
@@ -20,6 +30,15 @@ void main() {
       gl_FragColor = v_Color;
     }
 
+  } else {
+     // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
+
+    gl_FragColor = v_Color;
+  }
+
   gl_FragColor.a *= opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }

packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl

@@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
 uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
@@ -12,11 +16,26 @@ void main() {
   float sidey = styleMappingMat[3][0];
   float lightWeight = styleMappingMat[3][1];
 
-  if(isSide < 1.0 && u_linearColor == 1.0) {
+  if(isSide < 1.0) {
+    // side face
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+    
+    if( u_linearColor == 1.0) {
+      // side use linear
       vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
       linearColor.rgb *= lightWeight;
       gl_FragColor = linearColor;
     } else {
+      // side notuse linear
+       gl_FragColor = v_Color;
+    }
+  } else {
+    // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
     gl_FragColor = v_Color;
   }
 

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

@@ -54,6 +54,13 @@ void main() {
   textureOffset = opacityAndOffset.g;
   // cal style mapping - 数据纹理映射部分的计算
 
+  if(styleMappingMat[0][3] < 1.0 ) {
+    // side
+    styleMappingMat[0][0] = 0.0;
+  } else {
+
+  }
+
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
 

packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl

@@ -2,7 +2,12 @@ uniform sampler2D u_texture;
 uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
-// varying vec4 v_Color;
+uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
+varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
 
@@ -15,9 +20,25 @@ void main() {
 
   float sidey = styleMappingMat[3][0];
   if(isSide < 1.0) {
-    gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
+    // side face
-    gl_FragColor.rgb *= lightWeight;
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if(u_linearColor == 1.0) {
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      gl_FragColor = linearColor;
     } else {
+      gl_FragColor = v_Color;
+    }
+  } else {
+
+     // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
+
     gl_FragColor = texture2D(u_texture, vec2(topU, topV));
   }
   

packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl

@@ -4,6 +4,7 @@ precision highp float;
 #define diffuseRatio 0.3
 #define specularRatio 0.2
 
+attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Normal;
 attribute float a_Size;
@@ -11,7 +12,7 @@ attribute vec3 a_uvs;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-// varying vec4 v_Color;
+varying vec4 v_Color;
 uniform float u_heightfixed: 0.0; // 默认不固定
 uniform float u_raisingHeight: 0.0;
 uniform float u_opacity: 1.0;
@@ -25,6 +26,8 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 #pragma include "picking"
 
 void main() {
+  v_Color = a_Color;
+
   // cal style mapping - 数据纹理映射部分的计算
   styleMappingMat = mat4(
     0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - a_Position.z(judge side by a_Position.z)

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

@@ -1,13 +1,12 @@
 attribute vec4 a_Color;
 attribute vec3 a_Position;
 
-
-
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
+uniform float u_opacity: 1.0;
+uniform float u_raisingHeight: 0.0;
 
 varying vec4 v_Color;
-uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
 #pragma include "styleMapping"
@@ -57,6 +56,13 @@ styleMappingMat = mat4(
   v_Color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  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 *= mapboxZoomScale;
+    project_pos.z += u_raisingHeight * mapboxZoomScale;
+  }
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));

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

@@ -1,10 +1,13 @@
 attribute vec4 a_Color;
 attribute vec3 a_Position;
+
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-varying vec4 v_Color;
 uniform float u_opacity: 1.0;
+uniform float u_raisingHeight: 0.0;
+
+varying vec4 v_Color;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
 #pragma include "styleMapping"
@@ -44,6 +47,14 @@ styleMappingMat = mat4(
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
+  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 *= mapboxZoomScale;
+    project_pos.z += u_raisingHeight * mapboxZoomScale;
+  }
+
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
   } else {

stories/Map/components/amap2demo_polygon.tsx

@@ -1,5 +1,5 @@
 import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class Amap2demo_polygon extends React.Component {
@@ -11,16 +11,11 @@ export default class Amap2demo_polygon 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 scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMapV2({
-        pitch: 0,
+        pitch: 40,
-        // style: 'dark',
+        center: [120, 30],
-        center: [-44.40673828125, -18.375379094031825],
         zoom: 13,
       }),
     });
@@ -28,42 +23,6 @@ export default class Amap2demo_polygon extends React.Component {
     const data = {
       type: 'FeatureCollection',
       features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.4,
-          },
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [110.5224609375, 32.731840896865684],
-                  [113.0712890625, 32.731840896865684],
-                  [113.0712890625, 34.56085936708384],
-                  [110.5224609375, 34.56085936708384],
-                  [110.5224609375, 32.731840896865684],
-                ],
-                [
-                  [111.26953125, 33.52307880890422],
-                  [111.26953125, 34.03445260967645],
-                  [112.03857421875, 34.03445260967645],
-                  [112.03857421875, 33.52307880890422],
-                  [111.26953125, 33.52307880890422],
-                ],
-              ],
-              [
-                [
-                  [115.04882812499999, 34.379712580462204],
-                  [114.9609375, 33.46810795527896],
-                  [115.8837890625, 33.50475906922609],
-                  [115.86181640625001, 34.379712580462204],
-                  [115.04882812499999, 34.379712580462204],
-                ],
-              ],
-            ],
-          },
-        },
         {
           type: 'Feature',
           properties: {
@@ -79,71 +38,6 @@ export default class Amap2demo_polygon extends React.Component {
                 [113.8623046875, 31.090574094954192],
                 [113.8623046875, 30.031055426540206],
               ],
-              [
-                [117.26806640625, 32.13840869677249],
-                [118.36669921875, 32.13840869677249],
-                [118.36669921875, 32.47269502206151],
-                [117.26806640625, 32.47269502206151],
-                [117.26806640625, 32.13840869677249],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const data2 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.4,
-          },
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [110.5224609375, 32.731840896865684],
-                  [113.0712890625, 32.731840896865684],
-                  [113.0712890625, 34.56085936708384],
-                  [110.5224609375, 34.56085936708384],
-                  [110.5224609375, 32.731840896865684],
-                ],
-                [
-                  [111.26953125, 33.52307880890422],
-                  [111.26953125, 34.03445260967645],
-                  [112.03857421875, 34.03445260967645],
-                  [112.03857421875, 33.52307880890422],
-                  [111.26953125, 33.52307880890422],
-                ],
-              ],
-            ],
-          },
-        },
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.8,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [113.8623046875, 30.031055426540206],
-                [116.3232421875, 30.031055426540206],
-                [116.3232421875, 31.090574094954192],
-                [113.8623046875, 31.090574094954192],
-                [113.8623046875, 30.031055426540206],
-              ],
-              [
-                [117.26806640625, 32.13840869677249],
-                [118.36669921875, 32.13840869677249],
-                [118.36669921875, 32.47269502206151],
-                [117.26806640625, 32.47269502206151],
-                [117.26806640625, 32.13840869677249],
-              ],
             ],
           },
         },
@@ -157,30 +51,28 @@ export default class Amap2demo_polygon extends React.Component {
       .shape('fill')
       .color('red')
       .style({
-        // opacity: 1.0,
+        // opacityLinear: {
-        opacity: 'testOpacity',
+        //   enable: true,
+        //   dir: 'in',
+        // },
       });
     scene.addLayer(layer);
 
-    setTimeout(() => {
+    const layer2 = new PolygonLayer({
-      layer
+      autoFit: true,
-        .setData(data2)
+    })
+      .source(data)
       .shape('fill')
-        .color('#0f0');
+      .color('red')
-
+      .style({
-      scene.render();
+        opacity: 0.4,
-    }, 1000);
+        // opacityLinear: {
-
+        //   enable: true,
-    // const layer2 = new PolygonLayer({
+        //   dir: 'out',
-    //   autoFit: true,
+        // },
-    // })
+        raisingHeight: 50000,
-    //   .source(data)
+      });
-    //   .shape('line')
+    scene.addLayer(layer2);
-    //   .color('#000')
-    //   .style({
-    //     opacity: 1.0,
-    //   });
-    // scene.addLayer(layer2);
   }
 
   public render() {

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -23,101 +23,53 @@ export default class Amap2demo_polygon_extrude extends React.Component {
       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;
-    const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.4,
-          },
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [110.5224609375, 32.731840896865684],
-                  [113.0712890625, 32.731840896865684],
-                  [113.0712890625, 34.56085936708384],
-                  [110.5224609375, 34.56085936708384],
-                  [110.5224609375, 32.731840896865684],
-                ],
-                [
-                  [111.26953125, 33.52307880890422],
-                  [111.26953125, 34.03445260967645],
-                  [112.03857421875, 34.03445260967645],
-                  [112.03857421875, 33.52307880890422],
-                  [111.26953125, 33.52307880890422],
-                ],
-              ],
-              [
-                [
-                  [115.04882812499999, 34.379712580462204],
-                  [114.9609375, 33.46810795527896],
-                  [115.8837890625, 33.50475906922609],
-                  [115.86181640625001, 34.379712580462204],
-                  [115.04882812499999, 34.379712580462204],
-                ],
-              ],
-            ],
-          },
-        },
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 1,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [113.8623046875, 30.031055426540206],
-                [116.3232421875, 30.031055426540206],
-                [116.3232421875, 31.090574094954192],
-                [113.8623046875, 31.090574094954192],
-                [113.8623046875, 30.031055426540206],
-              ],
-              [
-                [117.26806640625, 32.13840869677249],
-                [118.36669921875, 32.13840869677249],
-                [118.36669921875, 32.47269502206151],
-                [117.26806640625, 32.47269502206151],
-                [117.26806640625, 32.13840869677249],
-              ],
-            ],
-          },
-        },
-      ],
-    };
 
-    // const layer = new PolygonLayer({
+    const wavePoints = new PointLayer({ zIndex: 2 })
-    //   autoFit: true,
+      .source(
-    // })
+        [
-    //   .source(data)
+          {
-    //   // .shape('fill')
+            lng: 120,
-    //   .shape('extrude')
+            lat: 30,
-    //   .color('red')
+          },
-    //   .size(600000)
+          {
-    //   .style({
+            lng: 120,
-    //     // pickLight: true,
+            lat: 29,
-    //     heightfixed: true,
+          },
-    //     // heightfixed: false,
+          {
-    //     opacity: 'testOpacity',
+            lng: 120,
-    //   })
+            lat: 28,
-    //   .active(true);
+          },
-    // scene.addLayer(layer);
+          {
+            lng: 120,
+            lat: 27,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      .shape('circle')
+      .color('#ff0')
+      .size(50)
+      .animate(true)
+      .active(true)
+      .style({
+        raisingHeight: 200000 + 150000,
+      });
 
     scene.on('loaded', () => {
+      scene.addLayer(wavePoints);
       // @ts-ignore
       let lineDown, lineUp, textLayer;
 
@@ -191,7 +143,24 @@ export default class Amap2demo_polygon_extrude extends React.Component {
             });
           scene.addLayer(lineLayer);
 
-          const provincelayer = new PolygonLayer({})
+          const provincelayerSide = new PolygonLayer({})
+            .source(data)
+            .size(150000)
+            .shape('extrude')
+            .color('#0DCCFF')
+            // .active({
+            //   color: 'rgb(100,230,255)',
+            // })
+            .style({
+              heightfixed: true,
+              pickLight: true,
+              raisingHeight: 200000,
+              opacity: 0.8,
+              topsurface: false,
+            });
+          scene.addLayer(provincelayerSide);
+
+          const provincelayerTop = new PolygonLayer({})
             .source(data)
             .size(150000)
             .shape('extrude')
@@ -204,44 +173,45 @@ export default class Amap2demo_polygon_extrude extends React.Component {
               pickLight: true,
               raisingHeight: 200000,
               opacity: 0.8,
+              sidesurface: false,
             });
-          scene.addLayer(provincelayer);
+          scene.addLayer(provincelayerTop);
 
-          provincelayer.on('mousemove', () => {
+          // provincelayer.on('mousemove', () => {
-            provincelayer.style({
+          //   provincelayer.style({
-              raisingHeight: 200000 + 100000,
+          //     raisingHeight: 200000 + 100000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            lineDown.style({
+          //   lineDown.style({
-              raisingHeight: 200000 + 100000,
+          //     raisingHeight: 200000 + 100000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            lineUp.style({
+          //   lineUp.style({
-              raisingHeight: 200000 + 150000 + 100000,
+          //     raisingHeight: 200000 + 150000 + 100000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            textLayer.style({
+          //   textLayer.style({
-              raisingHeight: 200000 + 150000 + 10000 + 100000,
+          //     raisingHeight: 200000 + 150000 + 10000 + 100000,
-            });
+          //   });
-          });
+          // });
 
-          provincelayer.on('unmousemove', () => {
+          // provincelayer.on('unmousemove', () => {
-            provincelayer.style({
+          //   provincelayer.style({
-              raisingHeight: 200000,
+          //     raisingHeight: 200000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            lineDown.style({
+          //   lineDown.style({
-              raisingHeight: 200000,
+          //     raisingHeight: 200000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            lineUp.style({
+          //   lineUp.style({
-              raisingHeight: 200000 + 150000,
+          //     raisingHeight: 200000 + 150000,
-            });
+          //   });
-            // @ts-ignore
+          //   // @ts-ignore
-            textLayer.style({
+          //   textLayer.style({
-              raisingHeight: 200000 + 150000 + 10000,
+          //     raisingHeight: 200000 + 150000 + 10000,
-            });
+          //   });
-          });
+          // });
         });
     });
   }

stories/Map/components/mapCenter.tsx

@@ -3,8 +3,6 @@ import { PointLayer, Scene, LineLayer, PolygonLayer, ILayer } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
 import * as React from 'react';
 import * as turf from '@turf/turf';
-
-const aspaceLnglat = [120.11, 30.264701434772807] as [number, number];
 export default class GaodeMapComponent extends React.Component {
   // @ts-ignore
   private scene: Scene;
@@ -17,12 +15,8 @@ export default class GaodeMapComponent extends React.Component {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
-        center: aspaceLnglat,
+        center: [120.11, 30.264701434772807],
-        // pitch: 0,
-        // pitch: 40,
-        // style: 'dark',
         zoom: 14,
-        // dragEnable: false
       }),
     });
     // normal = 'normal',
@@ -73,10 +67,55 @@ export default class GaodeMapComponent extends React.Component {
       .shape('circle')
       .size(30);
 
-    // layer0.on('mouseout', () => {})
+    let layer01 = new PointLayer({ zIndex: 2 })
-    // layer0.on('mousemove', () => {})
+      .source(
+        [
+          {
+            lng: 120.11,
+            lat: 30.27,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      .color('#ff0')
+      .shape('circle')
+      .size(30)
+      .style({
+        // raisingHeight: 50
+        raisingHeight: 5000,
+      });
+
     layer0.on('click', () => {});
 
+    let layer2 = new PointLayer({}) // blend: 'additive'
+      .source(
+        [
+          {
+            lng: 120.11,
+            lat: 30.264701434772807,
+            name: 'n3',
+          },
+          {
+            lng: 120.111,
+            lat: 30.264701434772807,
+            name: 'n3',
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      );
+
     let layer = new PointLayer({}) // blend: 'additive'
       .source(
         [
@@ -120,7 +159,7 @@ export default class GaodeMapComponent extends React.Component {
       //   enable: false,
       //   // type: 'www'
       // })
-      // .animate(true)
+      .animate(true)
       .active(true)
       // .active({
       //   color: '#f00',
@@ -142,39 +181,23 @@ export default class GaodeMapComponent extends React.Component {
         // unit: 'meter',
       });
 
+    layer2
+      .shape('circle')
+      .color('#f00')
+      .size(50)
+      .animate(true)
+      .active(true)
+      .style({
+        raisingHeight: 5000,
+      });
+
     this.scene = scene;
 
-    // console.log('layer', layer)
-
-    // let layer2 = new PointLayer({})
-    // .source([
-    //   {
-    //     lng: 120.1025,
-    //     lat: 30.264701434772807,
-    //     name: 'n2'
-    //   }
-    // ], {
-    //   parser: {
-    //     type: 'json',
-    //     x: 'lng',
-    //     y: 'lat',
-    //   },
-    // })
-    // .shape('circle')
-    // .size(10)
-    // .color('#00f')
-    // .style({
-    //   opacity: 0.5
-    // })
-
-    // scene.addImage(
-    //   '00',
-    //   'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
-    // );
-
     scene.on('loaded', () => {
       scene.addLayer(layer0);
+      scene.addLayer(layer01);
       scene.addLayer(layer);
+      scene.addLayer(layer2);
 
       scene.on('click', (e) => {
         console.log(scene.getPickedLayer());

stories/Map/components/polygon_extrudeTex.tsx

@@ -38,14 +38,17 @@ export default class Amap2demo_polygon_extrude extends React.Component {
           })
           .style({
             heightfixed: true,
-            pickLight: true,
+            // pickLight: true,
             raisingHeight: 200000,
-            // mapTexture:
+            mapTexture:
-            //   'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
+              'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
             // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
             // opacity: 0.8,
             sourceColor: '#f00',
             targetColor: '#ff0',
+
+            // topsurface: false,
+            // sidesurface: false
           });
 
         scene.addLayer(provincelayer);