Shihui (#1024)

* feat: 增加各个图层的纹理销毁的容错判断

* feat: 增加挤出几何体顶面纹理贴图的能力

* feat: 增加挤出几何体侧面颜色配置渐变

* style: lint style

packages/layers/src/Geometry/models/plane.ts

@@ -127,7 +127,7 @@ export default class PlaneModel extends BaseModel {
     } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
     if (this.mapTexture !== mapTexture) {
       this.mapTexture = mapTexture;
-      this.texture.destroy();
+      this.texture?.destroy();
       this.updateTexture(mapTexture);
     }
     return {
@@ -143,7 +143,7 @@ export default class PlaneModel extends BaseModel {
   }
 
   public clearModels(): void {
-    this.texture.destroy();
+    this.texture?.destroy();
   }
 
   public initModels() {

packages/layers/src/core/interface.ts

@@ -83,7 +83,10 @@ export interface IPolygonLayerStyleOptions {
     dir: string;
   };
 
+  mapTexture?: string; // 挤出几何体顶面贴图
   raisingHeight?: number; // 挤出几何体抬升高度
+  sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
+  targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
   heightfixed?: boolean; // 挤出几何体高度是否固定（不随 zoom 发生变化）
 
   pickLight: boolean;

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

@@ -232,7 +232,7 @@ export default class FillImageModel extends BaseModel {
 
   public clearModels() {
     this.iconService.off('imageUpdate', this.updateTexture);
-    this.texture.destroy();
+    this.texture?.destroy();
     this.dataTexture?.destroy();
   }
 

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

@@ -1,19 +1,35 @@
-import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
+import {
-import { getMask } from '@antv/l7-utils';
+  AttributeType,
+  gl,
+  IEncodeFeature,
+  IModel,
+  ITexture2D,
+} from '@antv/l7-core';
+import { getMask, rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
-import polygonExtrudeFrag from '../shaders/polygon_extrude_frag.glsl';
+import polygonExtrudeFrag from '../shaders/extrude/polygon_extrude_frag.glsl';
-import polygonExtrudePickLightFrag from '../shaders/polygon_extrude_picklight_frag.glsl';
+// extrude
-import polygonExtrudePickLightVert from '../shaders/polygon_extrude_picklight_vert.glsl';
+import polygonExtrudeVert from '../shaders/extrude/polygon_extrude_vert.glsl';
-import polygonExtrudeVert from '../shaders/polygon_extrude_vert.glsl';
+import polygonExtrudeTexFrag from '../shaders/extrude/polygon_extrudetex_frag.glsl';
+// texture
+import polygonExtrudeTexVert from '../shaders/extrude/polygon_extrudetex_vert.glsl';
+// extrude picking
+
+import polygonExtrudePickLightFrag from '../shaders/extrude/polygon_extrude_picklight_frag.glsl';
+import polygonExtrudePickLightVert from '../shaders/extrude/polygon_extrude_picklight_vert.glsl';
+
 export default class ExtrudeModel extends BaseModel {
+  protected texture: ITexture2D;
   public getUninforms() {
     const {
       opacity = 1,
       heightfixed = false,
       raisingHeight = 0,
+      sourceColor,
+      targetColor,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
@@ -46,16 +62,28 @@ export default class ExtrudeModel extends BaseModel {
             });
     }
 
+    // 转化渐变色
+    let sourceColorArr = [1, 1, 1, 1];
+    let targetColorArr = [1, 1, 1, 1];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+    }
+
     return {
       u_heightfixed: Number(heightfixed),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_raisingHeight: Number(raisingHeight),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
+      u_texture: this.texture,
     };
   }
 
   public initModels(): IModel[] {
+    this.loadTexture();
     return this.buildModels();
   }
 
@@ -74,6 +102,10 @@ export default class ExtrudeModel extends BaseModel {
         fragmentShader: frag,
         triangulation: PolygonExtrudeTriangulation,
         stencil: getMask(mask, maskInside),
+        cull: {
+          enable: true,
+          face: gl.BACK, // gl.FRONT | gl.BACK;
+        },
       }),
     ];
   }
@@ -81,7 +113,15 @@ export default class ExtrudeModel extends BaseModel {
   public getShaders() {
     const {
       pickLight,
+      mapTexture,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+    if (mapTexture) {
+      return {
+        frag: polygonExtrudeTexFrag,
+        vert: polygonExtrudeTexVert,
+        type: 'polygonExtrudeTexture',
+      };
+    }
     if (pickLight) {
       return {
         frag: polygonExtrudePickLightFrag,
@@ -99,9 +139,75 @@ export default class ExtrudeModel extends BaseModel {
 
   public clearModels() {
     this.dataTexture?.destroy();
+    this.texture?.destroy();
   }
 
   protected registerBuiltinAttributes() {
+    const {
+      mapTexture,
+    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+
+    if (mapTexture) {
+      const bbox = this.layer.getSource().extent;
+      const [minLng, minLat, maxLng, maxLat] = bbox;
+      const lngLen = maxLng - minLng;
+      const latLen = maxLat - minLat;
+      // this.styleAttributeService.registerStyleAttribute({
+      //   name: 'extrudeTopUv',
+      //   type: AttributeType.Attribute,
+      //   descriptor: {
+      //     name: 'a_uv',
+      //     buffer: {
+      //       // give the WebGL driver a hint that this buffer may change
+      //       usage: gl.STATIC_DRAW,
+      //       data: [],
+      //       type: gl.FLOAT,
+      //     },
+      //     size: 2,
+      //     update: (
+      //       feature: IEncodeFeature,
+      //       featureIdx: number,
+      //       vertex: number[],
+      //       attributeIdx: number,
+      //       normal: number[],
+      //     ) => {
+      //       const lng = vertex[0];
+      //       const lat = vertex[1];
+      //       return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
+      //     },
+      //   },
+      // });
+      // 计算出来只有侧边值有效
+      this.styleAttributeService.registerStyleAttribute({
+        name: 'uvs',
+        type: AttributeType.Attribute,
+        descriptor: {
+          name: 'a_uvs',
+          buffer: {
+            // give the WebGL driver a hint that this buffer may change
+            usage: gl.STATIC_DRAW,
+            data: [],
+            type: gl.FLOAT,
+          },
+          size: 3,
+          update: (
+            feature: IEncodeFeature,
+            featureIdx: number,
+            vertex: number[],
+            attributeIdx: number,
+            normal: number[],
+          ) => {
+            const lng = vertex[0];
+            const lat = vertex[1];
+            return [
+              (lng - minLng) / lngLen,
+              (lat - minLat) / latLen,
+              vertex[4],
+            ];
+          },
+        },
+      });
+    }
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'normal',
@@ -151,4 +257,35 @@ export default class ExtrudeModel extends BaseModel {
       },
     });
   }
+
+  private loadTexture() {
+    const {
+      mapTexture,
+    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+
+    const { createTexture2D } = this.rendererService;
+    this.texture = createTexture2D({
+      height: 0,
+      width: 0,
+    });
+    if (mapTexture) {
+      const image = new Image();
+      image.crossOrigin = '';
+      image.src = mapTexture;
+
+      image.onload = () => {
+        this.texture = createTexture2D({
+          data: image,
+          width: image.width,
+          height: image.height,
+          wrapS: gl.CLAMP_TO_EDGE,
+          wrapT: gl.CLAMP_TO_EDGE,
+          min: gl.LINEAR,
+          mag: gl.LINEAR,
+        });
+        this.layerService.updateLayerRenderList();
+        this.layerService.renderLayers();
+      };
+    }
+  }
 }

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

@@ -107,7 +107,7 @@ export default class OceanModel extends BaseModel {
     const latLen = maxLat - minLat;
 
     this.styleAttributeService.registerStyleAttribute({
-      name: 'linear',
+      name: 'oceanUv',
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_uv',

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

@@ -88,7 +88,7 @@ export default class WaterModel extends BaseModel {
   }
 
   public clearModels() {
-    this.texture.destroy();
+    this.texture?.destroy();
     this.dataTexture?.destroy();
   }
 
@@ -99,7 +99,7 @@ export default class WaterModel extends BaseModel {
     const latLen = maxLat - minLat;
 
     this.styleAttributeService.registerStyleAttribute({
-      name: 'linear',
+      name: 'waterUv',
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_uv',

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

@@ -0,0 +1,28 @@
+uniform sampler2D u_texture;
+uniform float u_opacity: 1.0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+// varying vec4 v_Color;
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+#pragma include "picking"
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  float isSide = styleMappingMat[0][3];
+  
+  float topU = styleMappingMat[2][2];
+  float topV = styleMappingMat[2][3];
+
+  float sidey = styleMappingMat[3][0];
+  if(isSide < 1.0) {
+    gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
+  } else {
+    gl_FragColor = texture2D(u_texture, vec2(topU, topV));
+  }
+
+  // gl_FragColor = v_Color;
+  
+
+  gl_FragColor.a *= opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

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

@@ -0,0 +1,92 @@
+precision highp float;
+
+#define ambientRatio 0.5
+#define diffuseRatio 0.3
+#define specularRatio 0.2
+
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec3 a_Normal;
+attribute float a_Size;
+attribute vec3 a_uvs;
+uniform mat4 u_ModelMatrix;
+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; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+void main() {
+  // 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)
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - u - v
+    0.0, 0.0, 0.0, 0.0  // sidey
+  );
+  
+  styleMappingMat[0][3] = a_Position.z;
+  styleMappingMat[2][2] = a_uvs[0];
+  styleMappingMat[2][3] = 1.0 - a_uvs[1];
+  styleMappingMat[3][0] = a_uvs[2];
+
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+  // cal style mapping - 数据纹理映射部分的计算
+
+  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
+  vec4 project_pos = project_position(pos);
+
+  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) {
+      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
+    // gl_Position = u_Mvp * (vec4(project_pos.xyz * vec3(1.0, 1.0, -1.0), 1.0));
+    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+
+  // float lightWeight = calc_lighting(pos);
+  // v_Color = a_Color;
+  // v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
+
+  setPickingColor(a_PickingColor);
+}

packages/renderer/src/regl/ReglTexture2D.ts

@@ -99,7 +99,7 @@ export default class ReglTexture2D implements ITexture2D {
 
   public destroy() {
     if (!this.isDistroy) {
-      this.texture.destroy();
+      this.texture?.destroy();
     }
     this.isDistroy = true;
   }

stories/Map/components/polygon_extrudeTex.tsx

@@ -0,0 +1,68 @@
+import { PolygonLayer, Scene, LineLayer, PointLayer } from '@antv/l7';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_polygon_extrude extends React.Component {
+  private gui: dat.GUI;
+  private $stats: Node;
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [120, 29.732983],
+        zoom: 6.2,
+        pitch: 60,
+      }),
+    });
+    this.scene = scene;
+
+    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
+      .then((res) => res.json())
+      .then((data) => {
+        const provincelayer = new PolygonLayer({})
+          .source(data)
+          .size(150000)
+          .shape('extrude')
+          .color('#0DCCFF')
+          // .active({
+          //   color: 'rgb(100,230,255)',
+          // })
+          .style({
+            heightfixed: true,
+            pickLight: true,
+            raisingHeight: 200000,
+            mapTexture:
+              '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',
+          });
+
+        scene.addLayer(provincelayer);
+      });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -78,6 +78,7 @@ import Cluster from './components/cluster'
 import Hot from './components/hot'
 import Hot2 from './components/hot2'
 import Mask from './components/mask'
+import PolygonExteudeTex from './components/polygon_extrudeTex';
 import BugFix from './components/bugfix'
 
 // @ts-ignore
@@ -161,5 +162,5 @@ storiesOf('地图方法', module)
         .add('Hot1', () => <Hot/>)
         .add('Hot2', () => <Hot2/>)
         .add('Mask', () => <Mask/>)
-
+        .add('PolygonExteudeTex', () => <PolygonExteudeTex/>)
         .add('BugFix', () => <BugFix/>)