@antv/l7-layers 2.20.3 → 2.20.6

package/es/tile/tile/Tile.d.ts

@@ -1,5 +1,5 @@
-import { ILayer, ILngLat, ITile } from '@antv/l7-core';
-import { SourceTile } from '@antv/l7-utils';
+import type { ILayer, ILngLat, ITile } from '@antv/l7-core';
+import type { SourceTile } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 export type TileEventType = 'loaded';
 export default abstract class Tile extends EventEmitter implements ITile {
@@ -80,7 +80,6 @@ export default abstract class Tile extends EventEmitter implements ITile {
         id?: string | HTMLDivElement | undefined;
         canvas?: HTMLCanvasElement | undefined;
         gl?: any;
-        hasBaseMap?: boolean | undefined;
         map?: import("@antv/l7-core").IMapWrapper | undefined;
         logoPosition?: import("@antv/l7-core").PositionName | undefined;
         logoVisible?: boolean | undefined;

package/es/tile/tile/VectorTile.d.ts

@@ -1,4 +1,4 @@
-import { ILayer } from '@antv/l7-core';
+import type { ILayer } from '@antv/l7-core';
 import Tile from './Tile';
 export default class VectorTile extends Tile {
     initTileLayer(): Promise<void>;

package/es/tile/tile/index.d.ts

@@ -1,4 +1,4 @@
-import { ILayer } from '@antv/l7-core';
+import type { ILayer } from '@antv/l7-core';
 import DebugTile from './DebugTile';
 import ImageTile from './ImageTile';
 import MaskLayer from './MaskTile';

package/es/tile/utils/constants.js

@@ -5,4 +5,4 @@ export var ProxyFuncs = [
  * 1. 需要作用到所属子图层才会生效的方法
  * 2. 不需要主动重新创建 model 的方法
  */
-'shape', 'color', 'size', 'style', 'animate', 'filter', 'rotate', 'scale', 'setBlend', 'setSelect', 'setActive', 'disableMask', 'enableMask'];
+'shape', 'color', 'size', 'style', 'animate', 'filter', 'rotate', 'scale', 'setBlend', 'setSelect', 'setActive', 'disableMask', 'enableMask', 'addMask', 'removeMask'];

package/es/tile/utils/utils.d.ts

@@ -1,4 +1,4 @@
-import { ILayer } from '@antv/l7-core';
+import type { ILayer } from '@antv/l7-core';
 export declare const tileVectorParser: string[];
 /**
  * 判断当前图层是否是瓦片图层

package/es/utils/blend.d.ts

@@ -1,2 +1,2 @@
-import { IBlendTypes } from '@antv/l7-core';
+import type { IBlendTypes } from '@antv/l7-core';
 export declare const BlendTypes: IBlendTypes;

package/es/utils/multiPassRender.d.ts

@@ -1,4 +1,4 @@
-import { ILayer, IPass, IPostProcessingPass } from '@antv/l7-core';
+import type { ILayer, IPass, IPostProcessingPass } from '@antv/l7-core';
 /**
  * 'blurH' -> ['blurH', {}]
  */

package/es/utils/stencil.d.ts

@@ -1,4 +1,4 @@
-import { IRenderOptions, IStencilOptions, MaskOperationType } from '@antv/l7-core';
+import type { IRenderOptions, IStencilOptions, MaskOperationType } from '@antv/l7-core';
 export declare function getStencil(mask: boolean, maskInside: boolean): Partial<IStencilOptions>;
 interface IStencilMaskOptions extends IRenderOptions {
     maskOperation?: MaskOperationType;

package/es/wind/index.d.ts

@@ -1,7 +1,7 @@
-import { IRenderOptions } from '@antv/l7-core';
+import type { IRenderOptions } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
-import { IWindLayerStyleOptions } from '../core/interface';
-import { WindModelType } from './models';
+import type { IWindLayerStyleOptions } from '../core/interface';
+import type { WindModelType } from './models';
 export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
     type: string;
     buildModels(): Promise<void>;

package/es/wind/models/wind.d.ts

@@ -1,4 +1,4 @@
-import { IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
+import type { IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 export default class WindModel extends BaseModel {
     protected texture: ITexture2D;

package/lib/citybuliding/models/build.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -17,12 +18,13 @@ var _l7Core = require("@antv/l7-core");
 var _l7Utils = require("@antv/l7-utils");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
+var _CommonStyleAttribute = require("../../core/CommonStyleAttribute");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /* babel-plugin-inline-import '../shaders/build_frag.glsl' */
-var buildFrag = "uniform float u_opacity: 1.0;\nuniform vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];\nuniform vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];\nuniform vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];\nuniform float u_near : 0;\nuniform float u_far : 1;\nvarying vec4 v_Color;\nvarying vec2 v_texCoord;\nuniform float u_Zoom : 1;\nuniform float u_time;\n\nuniform float u_circleSweep;\nuniform float u_cityMinSize;\nuniform vec3 u_circleSweepColor;\nuniform float u_circleSweepSpeed;\n\nvarying float v_worldDis;\n\n#pragma include \"picking\"\n\nvec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {\n    float s = step(hot, n);\n    vec3 color = mix(brightColor,vec3(0.9,0.9,1.0),n);\n\n    return mix(darkColor, color, s);\n}\nfloat random (vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);\n}\n\nfloat LinearizeDepth()\n{\n    float z = gl_FragCoord.z * 2.0 - 1.0;\n    return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near));\n}\n\nvec3 fog(vec3 color, vec3 fogColor, float depth){\n    float fogFactor=clamp(depth,0.0,1.0);\n    vec3 output_color=mix(fogColor,color,fogFactor);\n    return output_color;\n}\n\nfloat sdRect(vec2 p, vec2 sz) {\n  vec2 d = abs(p) - sz;\n  float outside = length(max(d, 0.));\n  float inside = min(max(d.x, d.y), 0.);\n  return outside + inside;\n}\n\nvoid main() {\n  gl_FragColor = v_Color;\n  vec3 baseColor = u_baseColor.xyz;\n  vec3 brightColor = u_brightColor.xyz;\n  vec3 windowColor = u_windowColor.xyz;\n  float targetColId = 5.;\n  float depth = 1.0 - LinearizeDepth() / u_far * u_Zoom;\n  vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0);\n  if(v_texCoord.x < 0.) { //\u9876\u90E8\u989C\u8272\n       vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);\n       gl_FragColor = vec4( foggedColor, v_Color.w);\n  }else { // \u4FA7\u9762\u989C\u8272\n        vec2 st = v_texCoord;\n        vec2  UvScale = v_texCoord;\n        float tStep = min(0.08,max(0.05* (18.0-u_Zoom),0.02));\n        float tStart = 0.25 * tStep;\n        float tEnd = 0.75 * tStep;\n        float u = mod(UvScale.x, tStep);\n        float v = mod(UvScale.y, tStep);\n        float ux = floor(UvScale.x/tStep);\n        float uy = floor(UvScale.y/tStep);\n        float n = random(vec2(ux,uy));\n        float lightP = u_time;\n        float head = 1.0- step(0.005,st.y);\n        /*step3*/\n        // \u5C06\u7A97\u6237\u989C\u8272\u548C\u5899\u9762\u989C\u8272\u533A\u522B\u5F00\u6765\n        float sU = step(tStart, u) - step(tEnd, u);\n        float sV = step(tStart, v) - step(tEnd, v);\n        vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart));\n        float dist = sdRect(vec2(u,v), windowSize);\n        float s = sU * sV;\n\n        float curColId = floor(UvScale.x / tStep);\n        float sCol = step(targetColId - 0.2, curColId) - step(targetColId + 0.2, curColId);\n\n        float mLightP = mod(lightP, 2.);\n        float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y);\n        if(ux == targetColId){\n            n =0.;\n        }\n        float timeP = min(0.75, abs ( sin(u_time/3.0) ) );\n        float hot = smoothstep(1.0,0.0,timeP);\n        vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);\n        //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);\n        float sFinal = s * sCol * sRow;\n        color += mix(baseColor, brightColor, sFinal*n);\n        if (st.y<0.01){\n        color = baseColor;\n         }\n        if(head ==1.0) { // \u9876\u90E8\u4EAE\u7EBF\n            color = brightColor;\n        }\n        color = color * v_Color.rgb;\n\n        vec3 foggedColor = fog(color,fogColor,depth);\n\n        gl_FragColor = vec4(foggedColor,1.0);\n  }\n\n\n  if(u_circleSweep > 0.0 && v_worldDis < u_cityMinSize) {\n    float r = fract(((v_worldDis/u_cityMinSize) - u_time * u_circleSweepSpeed) * 2.0);\n    gl_FragColor.rgb += r * r * u_circleSweepColor;\n  }\n   \n  gl_FragColor.a *= u_opacity;\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+var buildFrag = "precision highp float;\nlayout(std140) uniform commonUniforms {\n  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_circleSweepColor;\n  vec2 u_cityCenter;\n  float u_circleSweep;\n  float u_cityMinSize;\n  float u_circleSweepSpeed;\n  float u_opacity: 1.0;\n  float u_near : 0;\n  float u_far : 1;\n  float u_time;\n};\nin vec4 v_Color;\nin vec2 v_texCoord;\nin float v_worldDis;\nout vec4 outputColor;\n\n#pragma include \"picking\"\n#pragma include \"scene_uniforms\"\n\nvec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {\n    float s = step(hot, n);\n    vec3 color = mix(brightColor,vec3(0.9,0.9,1.0),n);\n\n    return mix(darkColor, color, s);\n}\nfloat random (vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);\n}\n\nfloat LinearizeDepth()\n{\n    float z = gl_FragCoord.z * 2.0 - 1.0;\n    return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near));\n}\n\nvec3 fog(vec3 color, vec3 fogColor, float depth){\n    float fogFactor=clamp(depth,0.0,1.0);\n    vec3 output_color=mix(fogColor,color,fogFactor);\n    return output_color;\n}\n\nfloat sdRect(vec2 p, vec2 sz) {\n  vec2 d = abs(p) - sz;\n  float outside = length(max(d, 0.));\n  float inside = min(max(d.x, d.y), 0.);\n  return outside + inside;\n}\n\nvoid main() {\n  outputColor = v_Color;\n  vec3 baseColor = u_baseColor.xyz;\n  vec3 brightColor = u_brightColor.xyz;\n  vec3 windowColor = u_windowColor.xyz;\n  float targetColId = 5.;\n  float depth = 1.0 - LinearizeDepth() / u_far * u_Zoom;\n  vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0);\n  if(v_texCoord.x < 0.) { //\u9876\u90E8\u989C\u8272\n       vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);\n       outputColor = vec4( foggedColor, v_Color.w);\n  }else { // \u4FA7\u9762\u989C\u8272\n        vec2 st = v_texCoord;\n        vec2  UvScale = v_texCoord;\n        float tStep = min(0.08,max(0.05* (18.0-u_Zoom),0.02));\n        float tStart = 0.25 * tStep;\n        float tEnd = 0.75 * tStep;\n        float u = mod(UvScale.x, tStep);\n        float v = mod(UvScale.y, tStep);\n        float ux = floor(UvScale.x/tStep);\n        float uy = floor(UvScale.y/tStep);\n        float n = random(vec2(ux,uy));\n        float lightP = u_time;\n        float head = 1.0- step(0.005,st.y);\n        /*step3*/\n        // \u5C06\u7A97\u6237\u989C\u8272\u548C\u5899\u9762\u989C\u8272\u533A\u522B\u5F00\u6765\n        float sU = step(tStart, u) - step(tEnd, u);\n        float sV = step(tStart, v) - step(tEnd, v);\n        vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart));\n        float dist = sdRect(vec2(u,v), windowSize);\n        float s = sU * sV;\n\n        float curColId = floor(UvScale.x / tStep);\n        float sCol = step(targetColId - 0.2, curColId) - step(targetColId + 0.2, curColId);\n\n        float mLightP = mod(lightP, 2.);\n        float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y);\n        if(ux == targetColId){\n            n =0.;\n        }\n        float timeP = min(0.75, abs ( sin(u_time/3.0) ) );\n        float hot = smoothstep(1.0,0.0,timeP);\n        vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);\n        //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);\n        float sFinal = s * sCol * sRow;\n        color += mix(baseColor, brightColor, sFinal*n);\n        if (st.y<0.01){\n        color = baseColor;\n         }\n        if(head ==1.0) { // \u9876\u90E8\u4EAE\u7EBF\n            color = brightColor;\n        }\n        color = color * v_Color.rgb;\n\n        vec3 foggedColor = fog(color,fogColor,depth);\n\n        outputColor = vec4(foggedColor,1.0);\n  }\n\n\n  if(u_circleSweep > 0.0 && v_worldDis < u_cityMinSize) {\n    float r = fract(((v_worldDis/u_cityMinSize) - u_time * u_circleSweepSpeed) * 2.0);\n    outputColor.rgb += r * r * u_circleSweepColor.rgb;\n  }\n   \n  outputColor.a *= u_opacity;\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/build_vert.glsl' */
-var buildVert = "precision highp float;\n\n#define ambientRatio 0.5\n#define diffuseRatio 0.3\n#define specularRatio 0.2\n\nattribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec3 a_Normal;\nattribute float a_Size;\nuniform mat4 u_ModelMatrix;\n\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n\nvarying vec4 v_Color;\n\nuniform float u_circleSweep;\nuniform vec2 u_cityCenter;\n\nvarying float v_worldDis;\n\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n\nvoid main() {\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);\n  vec4 project_pos = project_position(pos);\n\n   v_texCoord = a_Uv;\n\n  if(u_circleSweep > 0.0) {\n     vec2 lnglatscale = vec2(0.0);\n    if(u_CoordinateSystem != COORDINATE_SYSTEM_P20_2) {\n      lnglatscale = (a_Position.xy - u_cityCenter) * vec2(0.0, 0.135);\n    }\n    v_worldDis = length(a_Position.xy + lnglatscale - u_cityCenter);\n  }\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  float lightWeight = calc_lighting(pos);\n  // v_Color = a_Color;\n  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);\n\n  setPickingColor(a_PickingColor);\n}\n";
+var buildVert = "precision highp float;\n\n#define ambientRatio 0.5\n#define diffuseRatio 0.3\n#define specularRatio 0.2\n\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 13) in vec3 a_Normal;\nlayout(location = 14) in vec2 a_Uv;\n\nout vec2 v_texCoord;\nout vec4 v_Color;\nout float v_worldDis;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];\n  vec4 u_circleSweepColor;\n  vec2 u_cityCenter;\n  float u_circleSweep;\n  float u_cityMinSize;\n  float u_circleSweepSpeed;\n  float u_opacity: 1.0;\n  float u_near : 0;\n  float u_far : 1;\n  float u_time;\n};\n#pragma include \"projection\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n\nvoid main() {\n  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);\n  vec4 project_pos = project_position(pos);\n\n   v_texCoord = a_Uv;\n\n  if(u_circleSweep > 0.0) {\n     vec2 lnglatscale = vec2(0.0);\n    if(u_CoordinateSystem != COORDINATE_SYSTEM_P20_2) {\n      lnglatscale = (a_Position.xy - u_cityCenter) * vec2(0.0, 0.135);\n    }\n    v_worldDis = length(a_Position.xy + lnglatscale - u_cityCenter);\n  }\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  float lightWeight = calc_lighting(pos);\n  // v_Color = a_Color;\n  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);\n\n  setPickingColor(a_PickingColor);\n}\n";
 var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(CityBuildModel, _BaseModel);
   var _super = _createSuper(CityBuildModel);
@@ -31,8 +33,8 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
     return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(CityBuildModel, [{
-    key: "getUninforms",
-    value: function getUninforms() {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         _ref$opacity = _ref.opacity,
         opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
@@ -52,18 +54,22 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
           sweepSpeed: 0.4,
           sweepCenter: this.cityCenter
         } : _ref$sweep;
-      return {
+      var commonOptions = {
+        u_baseColor: (0, _l7Utils.rgb2arr)(baseColor),
+        u_brightColor: (0, _l7Utils.rgb2arr)(brightColor),
+        u_windowColor: (0, _l7Utils.rgb2arr)(windowColor),
+        u_circleSweepColor: [].concat((0, _toConsumableArray2.default)((0, _l7Utils.rgb2arr)(sweep.sweepColor).slice(0, 3)), [1.0]),
         u_cityCenter: sweep.sweepCenter || this.cityCenter,
-        u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
         u_circleSweep: sweep.enable ? 1.0 : 0.0,
-        u_circleSweepColor: (0, _l7Utils.rgb2arr)(sweep.sweepColor).slice(0, 3),
+        u_cityMinSize: this.cityMinSize * sweep.sweepRadius,
         u_circleSweepSpeed: sweep.sweepSpeed,
         u_opacity: opacity,
-        u_baseColor: (0, _l7Utils.rgb2arr)(baseColor),
-        u_brightColor: (0, _l7Utils.rgb2arr)(brightColor),
-        u_windowColor: (0, _l7Utils.rgb2arr)(windowColor),
+        u_near: 0,
+        u_far: 1,
         u_time: this.layer.getLayerAnimateTime() || time
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "calCityGeo",
@@ -97,9 +103,10 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               this.calCityGeo();
+              this.initUniformsBuffer();
               this.startModelAnimate();
               return _context.abrupt("return", this.buildModels());
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -127,6 +134,7 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                 depth: {
                   enable: true
                 },
+                inject: this.getInject(),
                 cull: {
                   enable: true,
                   face: _l7Core.gl.BACK
@@ -155,6 +163,7 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Normal',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.NORMAL,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.STATIC_DRAW,
@@ -172,6 +181,7 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
@@ -191,6 +201,7 @@ var CityBuildModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.UV,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,

package/lib/citybuliding/shaders/build_frag.glsl

@@ -1,22 +1,25 @@
-uniform float u_opacity: 1.0;
-uniform vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
-uniform vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
-uniform vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
-uniform float u_near : 0;
-uniform float u_far : 1;
-varying vec4 v_Color;
-varying vec2 v_texCoord;
-uniform float u_Zoom : 1;
-uniform float u_time;
-
-uniform float u_circleSweep;
-uniform float u_cityMinSize;
-uniform vec3 u_circleSweepColor;
-uniform float u_circleSweepSpeed;
-
-varying float v_worldDis;
+precision highp float;
+layout(std140) uniform commonUniforms {
+  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_circleSweepColor;
+  vec2 u_cityCenter;
+  float u_circleSweep;
+  float u_cityMinSize;
+  float u_circleSweepSpeed;
+  float u_opacity: 1.0;
+  float u_near : 0;
+  float u_far : 1;
+  float u_time;
+};
+in vec4 v_Color;
+in vec2 v_texCoord;
+in float v_worldDis;
+out vec4 outputColor;
 
 #pragma include "picking"
+#pragma include "scene_uniforms"
 
 vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
     float s = step(hot, n);
@@ -48,7 +51,7 @@ float sdRect(vec2 p, vec2 sz) {
 }
 
 void main() {
-  gl_FragColor = v_Color;
+  outputColor = v_Color;
   vec3 baseColor = u_baseColor.xyz;
   vec3 brightColor = u_brightColor.xyz;
   vec3 windowColor = u_windowColor.xyz;
@@ -57,7 +60,7 @@ void main() {
   vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0);
   if(v_texCoord.x < 0.) { //顶部颜色
        vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);
-       gl_FragColor = vec4( foggedColor, v_Color.w);
+       outputColor = vec4( foggedColor, v_Color.w);
   }else { // 侧面颜色
         vec2 st = v_texCoord;
         vec2  UvScale = v_texCoord;
@@ -103,15 +106,15 @@ void main() {
 
         vec3 foggedColor = fog(color,fogColor,depth);
 
-        gl_FragColor = vec4(foggedColor,1.0);
+        outputColor = vec4(foggedColor,1.0);
   }
 
 
   if(u_circleSweep > 0.0 && v_worldDis < u_cityMinSize) {
     float r = fract(((v_worldDis/u_cityMinSize) - u_time * u_circleSweepSpeed) * 2.0);
-    gl_FragColor.rgb += r * r * u_circleSweepColor;
+    outputColor.rgb += r * r * u_circleSweepColor.rgb;
   }
    
-  gl_FragColor.a *= u_opacity;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor.a *= u_opacity;
+  outputColor = filterColor(outputColor);
 }

package/lib/citybuliding/shaders/build_vert.glsl

@@ -4,22 +4,30 @@ 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;
-uniform mat4 u_ModelMatrix;
-
-attribute vec2 a_Uv;
-varying vec2 v_texCoord;
-
-varying vec4 v_Color;
-
-uniform float u_circleSweep;
-uniform vec2 u_cityCenter;
-
-varying float v_worldDis;
-
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_Uv;
+
+out vec2 v_texCoord;
+out vec4 v_Color;
+out float v_worldDis;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ];
+  vec4 u_circleSweepColor;
+  vec2 u_cityCenter;
+  float u_circleSweep;
+  float u_cityMinSize;
+  float u_circleSweepSpeed;
+  float u_opacity: 1.0;
+  float u_near : 0;
+  float u_far : 1;
+  float u_time;
+};
 #pragma include "projection"
 #pragma include "light"
 #pragma include "picking"

package/lib/core/BaseLayer.js

@@ -50,8 +50,6 @@ var layerIdCounter = 0;
 var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.IGlobalConfigService), (_class = /*#__PURE__*/function (_ref) {
   (0, _inherits2.default)(BaseLayer, _ref);
   var _super = _createSuper(BaseLayer);
-  // private pickingPassRender: IPass<'pixelPicking'>;
-
   function BaseLayer() {
     var _this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -123,6 +121,8 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scaleOptions", {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "animateStatus", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDestroyed", false);
+    // private pickingPassRender: IPass<'pixelPicking'>;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uniformBuffers", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "encodeDataLength", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sourceEvent", function () {
       _this.dataState.dataSourceNeedUpdate = true;
@@ -132,7 +132,9 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
       }
       var autoRender = _this.layerSource.getSourceCfg().autoRender;
       if (autoRender) {
-        _this.reRender();
+        setTimeout(function () {
+          _this.reRender();
+        }, 10);
       }
     });
     _this.name = config.name || _this.id;
@@ -144,6 +146,9 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     key: "addMask",
     value: function addMask(layer) {
       this.masks.push(layer);
+      this.updateLayerConfig({
+        maskLayers: this.masks
+      });
       this.enableMask();
     }
   }, {
@@ -153,6 +158,9 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
       if (layerIndex > -1) {
         this.masks.splice(layerIndex, 1);
       }
+      this.updateLayerConfig({
+        maskLayers: this.masks
+      });
     }
   }, {
     key: "disableMask",
@@ -168,13 +176,21 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
         enableMask: true
       });
     }
-    // 将废弃
+
+    /**
+     * 将废弃
+     * @deprecated
+     */
   }, {
     key: "addMaskLayer",
     value: function addMaskLayer(maskLayer) {
       this.masks.push(maskLayer);
     }
-    // 将废弃
+
+    /**
+     * 将废弃
+     * @deprecated
+     */
   }, {
     key: "removeMaskLayer",
     value: function removeMaskLayer(maskLayer) {
@@ -1193,7 +1209,7 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
                   vs: vs,
                   elements: elements,
                   blend: _blend.BlendTypes[_l7Core.BlendType.normal],
-                  uniformBuffers: [].concat((0, _toConsumableArray2.default)(_this10.layerModel.uniformBuffers), (0, _toConsumableArray2.default)(_this10.rendererService.uniformBuffers)),
+                  uniformBuffers: [].concat((0, _toConsumableArray2.default)(_this10.layerModel.uniformBuffers), (0, _toConsumableArray2.default)(_this10.rendererService.uniformBuffers), [_this10.getLayerUniformBuffer(), _this10.getPickingUniformBuffer()]),
                   textures: _this10.layerModel.textures
                 }, rest);
                 if (count) {
@@ -1343,7 +1359,8 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
         model.draw({
           uniforms: _this11.layerModel.getUninforms(),
           blend: _this11.layerModel.getBlend(),
-          stencil: _this11.layerModel.getStencil(options)
+          stencil: _this11.layerModel.getStencil(options),
+          textures: _this11.layerModel.textures
         }, (options === null || options === void 0 ? void 0 : options.ispick) || false);
       });
       this.hooks.afterRender.call();
@@ -1437,6 +1454,7 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     key: "initLayerModels",
     value: function () {
       var _initLayerModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+        var layerUniforms, pickingUniforms;
         return _regenerator.default.wrap(function _callee7$(_context7) {
           while (1) switch (_context7.prev = _context7.next) {
             case 0:
@@ -1444,11 +1462,29 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
                 return model.destroy();
               });
               this.models = [];
-              _context7.next = 4;
+              this.uniformBuffers.forEach(function (buffer) {
+                buffer.destroy();
+              });
+              this.uniformBuffers = [];
+              // Layer Uniform
+              layerUniforms = this.rendererService.createBuffer({
+                data: new Float32Array(16 + 4).fill(0),
+                // u_Mvp
+                isUBO: true
+              });
+              this.uniformBuffers.push(layerUniforms);
+
+              // Picking Uniform
+              pickingUniforms = this.rendererService.createBuffer({
+                data: new Float32Array(20).fill(0),
+                isUBO: true
+              });
+              this.uniformBuffers.push(pickingUniforms);
+              _context7.next = 10;
               return this.layerModel.initModels();
-            case 4:
+            case 10:
               this.models = _context7.sent;
-            case 5:
+            case 11:
             case "end":
               return _context7.stop();
           }
@@ -1459,6 +1495,16 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
       }
       return initLayerModels;
     }()
+  }, {
+    key: "getLayerUniformBuffer",
+    value: function getLayerUniformBuffer() {
+      return this.uniformBuffers[0];
+    }
+  }, {
+    key: "getPickingUniformBuffer",
+    value: function getPickingUniformBuffer() {
+      return this.uniformBuffers[1];
+    }
   }, {
     key: "reRender",
     value: function reRender() {

package/lib/core/BaseModel.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
@@ -19,6 +20,7 @@ var _l7Utils = require("@antv/l7-utils");
 var _blend = require("../utils/blend");
 var _stencil = require("../utils/stencil");
 var _constant = require("./constant");
+var _utils = require("./utils");
 var _CommonStyleAttribute = require("./CommonStyleAttribute");
 var _dec, _class, _descriptor;
 var shaderLocationMap = {
@@ -26,7 +28,8 @@ var shaderLocationMap = {
   stroke: _CommonStyleAttribute.ShaderLocation.STROKE,
   offsets: _CommonStyleAttribute.ShaderLocation.OFFSETS,
   rotation: _CommonStyleAttribute.ShaderLocation.ROTATION,
-  extrusionBase: _CommonStyleAttribute.ShaderLocation.EXTRUSION_BASE
+  extrusionBase: _CommonStyleAttribute.ShaderLocation.EXTRUSION_BASE,
+  thetaOffset: 15
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -39,6 +42,9 @@ var BaseModel = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
 
   // @lazyInject(TYPES.IShaderModuleService)
 
+  // 支持数据映射的buffer
+  // 不支持数据映射的buffer
+
   // style texture data mapping
 
   function BaseModel(layer) {
@@ -116,10 +122,21 @@ var BaseModel = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     value: function getDefaultStyle() {
       return {};
     }
+    // public getUninforms(): IModelUniform {
+    //   throw new Error('Method not implemented.');
+    // }
   }, {
     key: "getUninforms",
     value: function getUninforms() {
-      throw new Error('Method not implemented.');
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      var result = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributeInfo.uniformsOption), commoninfo.uniformsOption);
+      //如果是regl渲染 需要在uniform中带上u_texture 暂时用this.rendererService.device判断
+      if (!this.rendererService.hasOwnProperty('device') && this.textures && this.textures.length === 1) {
+        result['u_texture'] = this.textures[0];
+      }
+      return result;
     }
   }, {
     key: "getAnimateUniforms",
@@ -219,6 +236,8 @@ var BaseModel = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
         this.layer.setAnimateStartTime();
       }
     }
+
+    // 动态注入参与数据映射的uniform
   }, {
     key: "getInject",
     value: function getInject() {
@@ -237,6 +256,10 @@ var BaseModel = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
         } else {
           uniforms.push("  ".concat(_constant.DefaultUniformStyleType[key], " u_").concat(key, ";"));
         }
+        var location = shaderLocationMap[key];
+        if (!location && key === 'THETA_OFFSET') {
+          location = 15;
+        }
         str += "\n          #ifdef USE_ATTRIBUTE_".concat(key.toUpperCase(), "\n          layout(location = ").concat(shaderLocationMap[key], ") in ").concat(_constant.DefaultUniformStyleType[key], " a_").concat(key.charAt(0).toUpperCase() + key.slice(1), ";\n        #endif\n\n        ");
       });
       var attributeUniforms = uniforms.length ? "\nlayout(std140) uniform AttributeUniforms {\n".concat(uniforms.join('\n'), "\n};\n    ") : '';
@@ -293,6 +316,80 @@ var BaseModel = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     value: function updateEncodeAttribute(type, flag) {
       this.encodeStyleAttribute[type] = flag;
     }
+  }, {
+    key: "initUniformsBuffer",
+    value: function initUniformsBuffer() {
+      var attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute());
+      var commonUniforms = this.getCommonUniformsInfo();
+      if (attrUniforms.uniformsLength !== 0) {
+        this.attributeUnifoms = this.rendererService.createBuffer({
+          data: new Float32Array((0, _utils.MultipleOfFourNumber)(attrUniforms.uniformsLength)).fill(0),
+          // 长度需要大于等于 4
+          isUBO: true
+        });
+        this.uniformBuffers.push(this.attributeUnifoms);
+      }
+      if (commonUniforms.uniformsLength !== 0) {
+        this.commonUnifoms = this.rendererService.createBuffer({
+          data: new Float32Array((0, _utils.MultipleOfFourNumber)(commonUniforms.uniformsLength)).fill(0),
+          isUBO: true
+        });
+        this.uniformBuffers.push(this.commonUnifoms);
+      }
+    }
+    // 获取数据映射 uniform 信息
+  }, {
+    key: "getUniformsBufferInfo",
+    value: function getUniformsBufferInfo(uniformsOption) {
+      var uniformsLength = 0;
+      var uniformsArray = [];
+      Object.values(uniformsOption).forEach(function (value) {
+        if (Array.isArray(value)) {
+          uniformsArray.push.apply(uniformsArray, (0, _toConsumableArray2.default)(value));
+          uniformsLength += value.length;
+        } else if (typeof value === 'number') {
+          // 排除纹理
+          uniformsArray.push(value);
+          uniformsLength += 1;
+        } else if (typeof value === 'boolean') {
+          uniformsArray.push(Number(value));
+          uniformsLength += 1;
+        }
+      });
+      return {
+        uniformsOption: uniformsOption,
+        uniformsLength: uniformsLength,
+        uniformsArray: uniformsArray
+      };
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
+      return {
+        uniformsLength: 0,
+        uniformsArray: [],
+        uniformsOption: {}
+      };
+    }
+
+    // 更新支持数据映射的uniform
+  }, {
+    key: "updateStyleUnifoms",
+    value: function updateStyleUnifoms() {
+      var _this$attributeUnifom, _this$commonUnifoms;
+      var _this$getUniformsBuff = this.getUniformsBufferInfo(this.getStyleAttribute()),
+        uniformsArray = _this$getUniformsBuff.uniformsArray;
+      var _this$getCommonUnifor = this.getCommonUniformsInfo(),
+        commonUniformsArray = _this$getCommonUnifor.uniformsArray;
+      (_this$attributeUnifom = this.attributeUnifoms) === null || _this$attributeUnifom === void 0 || _this$attributeUnifom.subData({
+        offset: 0,
+        data: new Uint8Array(new Float32Array(uniformsArray).buffer)
+      });
+      (_this$commonUnifoms = this.commonUnifoms) === null || _this$commonUnifoms === void 0 || _this$commonUnifoms.subData({
+        offset: 0,
+        data: new Uint8Array(new Float32Array(commonUniformsArray).buffer)
+      });
+    }
   }]);
   return BaseModel;
 }(), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class.prototype, "configService", [_dec], {