@antv/l7-layers 2.9.19 → 2.9.22-alpha.0

package/es/polygon/models/water.js

@@ -1,12 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _isNumber from "lodash/isNumber";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -14,30 +11,25 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { AttributeType, gl } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
-import BaseModel from '../../core/BaseModel';
-import { polygonTriangulation } from '../../core/triangulation';
+import { isNumber } from 'lodash';
+import BaseModel from "../../core/BaseModel";
+import { polygonTriangulation } from "../../core/triangulation";
+
+/* babel-plugin-inline-import '../shaders/water/polygon_water_frag.glsl' */
 var water_frag = "uniform sampler2D u_texture;\nuniform float u_time: 0.0;\nuniform float u_speed: 1.0;\nuniform float u_opacity: 1.0;\n\nvarying vec4 v_Color;\nvarying vec2 v_uv;\nvarying mat4 styleMappingMat; // \u4F20\u9012\u4ECE\u7247\u5143\u4E2D\u4F20\u9012\u7684\u6620\u5C04\u6570\u636E\n\n\nfloat rand(vec2 n) { return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453); }\n\nfloat water(vec3 p) {\n  float t = u_time * u_speed;\n  p.z += t * 2.; p.x += t * 2.;\n  vec3 c1 = texture2D(u_texture, p.xz / 30.).xyz;\n  p.z += t * 3.; p.x += t * 0.52;\n  vec3 c2 = texture2D(u_texture, p.xz / 30.).xyz;\n  p.z += t * 4.; p.x += t * 0.8;\n  vec3 c3 = texture2D(u_texture, p.xz / 30.).xyz;\n  c1 += c2 - c3;\n  float z = (c1.x + c1.y + c1.z) / 3.;\n  return p.y + z / 4.;\n}\n\nfloat map(vec3 p) {\n  float d = 100.0;\n  d = water(p);\n  return d;\n}\n\nfloat intersect(vec3 ro, vec3 rd) {\n  float d = 0.0;\n  for (int i = 0; i <= 100; i++) {\n    float h = map(ro + rd * d);\n    if (h < 0.1) return  d;\n    d += h;\n  }\n  return 0.0;\n}\n\nvec3 norm(vec3 p) {\n  float eps = .1;\n  return normalize(vec3(\n    map(p + vec3(eps, 0, 0)) - map(p + vec3(-eps, 0, 0)),\n    map(p + vec3(0, eps, 0)) - map(p + vec3(0, -eps, 0)),\n    map(p + vec3(0, 0, eps)) - map(p + vec3(0, 0, -eps))\n  ));\n} \n\nfloat calSpc() {\n  vec3 l1 = normalize(vec3(1, 1, 1));\n  vec3 ro = vec3(-3, 20, -8);\n  vec3 rc = vec3(0, 0, 0);\n  vec3 ww = normalize(rc - ro);\n  vec3 uu = normalize(cross(vec3(0,1,0), ww));\n  vec3 vv = normalize(cross(rc - ro, uu));\n  vec3 rd = normalize(uu * v_uv.x + vv * v_uv.y + ww);\n  float d = intersect(ro, rd);\n  vec3 p = ro + rd * d;\n  vec3 n = norm(p);\n  float spc = pow(max(0.0, dot(reflect(l1, n), rd)), 30.0);\n  return spc;\n}\n\nvoid main() {\n  float opacity = styleMappingMat[0][0];\n  gl_FragColor = v_Color;\n  gl_FragColor.a *= opacity;\n\n  float spc = calSpc();\n  gl_FragColor += spc * 0.4;\n}\n";
+
+/* babel-plugin-inline-import '../shaders/water/polygon_water_vert.glsl' */
 var water_vert = "attribute vec4 a_Color;\nattribute vec2 a_uv;\nattribute vec3 a_Position;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\n\nvarying vec4 v_Color;\nvarying vec2 v_uv;\nuniform float u_opacity: 1.0;\nvarying mat4 styleMappingMat; // \u7528\u4E8E\u5C06\u5728\u9876\u70B9\u7740\u8272\u5668\u4E2D\u8BA1\u7B97\u597D\u7684\u6837\u5F0F\u503C\u4F20\u9012\u7ED9\u7247\u5143\n\n#pragma include \"styleMapping\"\n#pragma include \"styleMappingCalOpacity\"\n\n#pragma include \"projection\"\n\nvoid main() {\n  v_uv = a_uv;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\nstyleMappingMat = mat4(\n    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty\n    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA\n    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]\n    0.0, 0.0, 0.0, 0.0\n  );\n\n  float rowCount = u_cellTypeLayout[0][0];    // \u5F53\u524D\u7684\u6570\u636E\u7EB9\u7406\u6709\u51E0\u884C\n  float columnCount = u_cellTypeLayout[0][1]; // \u5F53\u770B\u5230\u6570\u636E\u7EB9\u7406\u6709\u51E0\u5217\n  float columnWidth = 1.0/columnCount;  // \u5217\u5BBD\n  float rowHeight = 1.0/rowCount;       // \u884C\u9AD8\n  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets\n  float id = a_vertexId; // \u7B2Cn\u4E2A\u9876\u70B9\n  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u884C\n  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // \u8D77\u59CB\u70B9\u5728\u7B2C\u51E0\u5217\n  \n  // cell \u56FA\u5B9A\u987A\u5E8F opacity -> strokeOpacity -> strokeWidth -> stroke ... \n  // \u6309\u987A\u5E8F\u4ECE cell \u4E2D\u53D6\u503C\u3001\u82E5\u6CA1\u6709\u5219\u81EA\u52A8\u5F80\u4E0B\u53D6\u503C\n  float textureOffset = 0.0; // \u5728 cell \u4E2D\u53D6\u503C\u7684\u504F\u79FB\u91CF\n\n  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);\n  styleMappingMat[0][0] = opacityAndOffset.r;\n  textureOffset = opacityAndOffset.g;\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  v_Color = a_Color;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n  }\n}\n\n";
 
-var WaterModel = function (_BaseModel) {
+var WaterModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(WaterModel, _BaseModel);
 
   var _super = _createSuper(WaterModel);
 
   function WaterModel() {
-    var _this;
-
     _classCallCheck(this, WaterModel);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "texture", void 0);
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(WaterModel, [{
@@ -62,7 +54,8 @@ var WaterModel = function (_BaseModel) {
             width = _this$calDataFrame.width,
             height = _this$calDataFrame.height;
 
-        this.rowCount = height;
+        this.rowCount = height; // 当前数据纹理有多少行
+
         this.dataTexture = this.cellLength > 0 && data.length > 0 ? this.createTexture2D({
           flipY: true,
           data: data,
@@ -83,9 +76,10 @@ var WaterModel = function (_BaseModel) {
       return {
         u_texture: this.texture,
         u_dataTexture: this.dataTexture,
+        // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
         u_cellTypeLayout: this.getCellTypeLayout(),
         u_speed: speed,
-        u_opacity: _isNumber(opacity) ? opacity : 1.0
+        u_opacity: isNumber(opacity) ? opacity : 1.0
       };
     }
   }, {
@@ -154,6 +148,7 @@ var WaterModel = function (_BaseModel) {
         descriptor: {
           name: 'a_uv',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.STATIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -172,7 +167,7 @@ var WaterModel = function (_BaseModel) {
   }, {
     key: "loadTexture",
     value: function loadTexture() {
-      var _this2 = this;
+      var _this = this;
 
       var _ref3 = this.layer.getLayerConfig(),
           waterTexture = _ref3.waterTexture;
@@ -186,14 +181,16 @@ var WaterModel = function (_BaseModel) {
       image.crossOrigin = '';
 
       if (waterTexture) {
+        // custom texture
         console.warn('L7 recommend：https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ');
         image.src = waterTexture;
       } else {
+        // default texture
         image.src = 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ';
       }
 
       image.onload = function () {
-        _this2.texture = createTexture2D({
+        _this.texture = createTexture2D({
           data: image,
           width: image.width,
           height: image.height,
@@ -203,9 +200,9 @@ var WaterModel = function (_BaseModel) {
           mag: gl.LINEAR
         });
 
-        _this2.layerService.updateLayerRenderList();
+        _this.layerService.updateLayerRenderList();
 
-        _this2.layerService.renderLayers();
+        _this.layerService.renderLayers();
       };
     }
   }]);
@@ -213,5 +210,4 @@ var WaterModel = function (_BaseModel) {
   return WaterModel;
 }(BaseModel);
 
-export { WaterModel as default };
-//# sourceMappingURL=water.js.map
+export { WaterModel as default };

package/es/polygon/shaders/extrude/polygon_extrude_frag.glsl

@@ -0,0 +1,44 @@
+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"
+
+void main() {
+  float opacity = styleMappingMat[0][0];  
+  float isSide = styleMappingMat[0][3];
+  float sidey = styleMappingMat[3][0];
+  float lightWeight = styleMappingMat[3][1];
+
+  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;
+    } else {
+      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);
+}

package/es/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl

@@ -0,0 +1,44 @@
+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"
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  float isSide = styleMappingMat[0][3];
+  float sidey = styleMappingMat[3][0];
+  float lightWeight = styleMappingMat[3][1];
+
+  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;
+  }
+
+  gl_FragColor.a *= opacity;
+  gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
+}

package/es/polygon/shaders/extrude/polygon_extrude_picklight_vert.glsl

@@ -0,0 +1,85 @@
+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 - isSide
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0  // sidey
+  );
+  styleMappingMat[0][3] = a_Position.z;
+  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;
+    }
+  }
+
+  // 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);
+
+  styleMappingMat[3][1] = lightWeight;
+
+  setPickingColor(a_PickingColor);
+}

package/es/polygon/shaders/extrude/polygon_extrude_vert.glsl

@@ -0,0 +1,90 @@
+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 - isSide
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0  // sidey
+  );
+  styleMappingMat[0][3] = a_Position.z;
+  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);
+
+  styleMappingMat[3][1] = lightWeight;
+
+  setPickingColor(a_PickingColor);
+}

package/es/polygon/shaders/extrude/polygon_extrudetex_frag.glsl

@@ -0,0 +1,48 @@
+uniform sampler2D u_texture;
+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"
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  float isSide = styleMappingMat[0][3];
+  float lightWeight = styleMappingMat[3][1];
+  float topU = styleMappingMat[2][2];
+  float topV = styleMappingMat[2][3];
+
+  float sidey = styleMappingMat[3][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;
+    } else {
+      gl_FragColor = v_Color;
+    }
+  } else {
+
+     // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
+
+    gl_FragColor = texture2D(u_texture, vec2(topU, topV));
+  }
+  
+
+  gl_FragColor.a *= opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/polygon/shaders/extrude/polygon_extrudetex_vert.glsl

@@ -0,0 +1,93 @@
+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() {
+  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)
+    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);
+  styleMappingMat[3][1] = lightWeight;
+
+  setPickingColor(a_PickingColor);
+}

package/es/polygon/shaders/polygon_frag.glsl

@@ -0,0 +1,12 @@
+uniform float u_opacity: 1.0;
+varying vec4 v_Color;
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+#pragma include "picking"
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  gl_FragColor = v_Color;
+  gl_FragColor.a *= opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/polygon/shaders/polygon_linear_frag.glsl

@@ -0,0 +1,22 @@
+uniform float u_opacity: 1.0;
+varying vec4 v_Color;
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+#pragma include "picking"
+uniform float u_opacitylinear: 0.0;
+uniform float u_dir: 1.0;
+varying vec3 v_linear;
+varying vec2 v_pos;
+
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  gl_FragColor = v_Color;
+  
+  if(u_opacitylinear > 0.0) {
+    gl_FragColor.a *= u_dir == 1.0 ? 1.0 - length(v_pos - v_linear.xy)/v_linear.z : length(v_pos - v_linear.xy)/v_linear.z;
+  }
+
+  gl_FragColor.a *= opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/polygon/shaders/polygon_linear_vert.glsl

@@ -0,0 +1,74 @@
+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;
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "picking"
+
+uniform float u_opacitylinear: 0.0;
+
+attribute vec3 a_linear;
+varying vec3 v_linear;
+varying vec2 v_pos;
+
+void main() {
+  if(u_opacitylinear > 0.0) {
+    v_linear = a_linear;
+    v_pos = a_Position.xy;
+  }
+  
+  // cal style mapping - 数据纹理映射部分的计算
+styleMappingMat = mat4(
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  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 - 数据纹理映射部分的计算
+
+  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));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+
+  setPickingColor(a_PickingColor);
+}