@antv/l7-layers 2.20.3 → 2.20.6

package/lib/line/shaders/wall/wall_frag.glsl

@@ -2,23 +2,28 @@
 #define LineTexture 1.0
 
 // line texture
-uniform float u_line_texture;
-uniform sampler2D u_texture;
-uniform vec2 u_textSize;
-uniform float u_linearColor: 0;
-uniform vec4 u_sourceColor;
-uniform vec4 u_targetColor;
-uniform float u_textureBlend;
-uniform float u_iconStepCount;
-uniform float u_time;
-uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ]; // 控制运动
 
-varying vec2 v_iconMapUV;
-varying float v_blur;
-varying float v_radio;
-varying vec4 v_color;
-varying vec4 v_dataset;
+uniform sampler2D u_texture;
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float u_icon_step: 100;
+  float u_heightfixed;
+  float u_linearColor: 0;
+  float u_line_texture;
+  float u_textureBlend;
+  float u_iconStepCount;
+  float u_time;
+};
+in vec2 v_iconMapUV;
+in float v_blur;
+in float v_radio;
+in vec4 v_color;
+in vec4 v_dataset;
 
+out vec4 outputColor;
 #pragma include "picking"
 
 void main() {
@@ -27,18 +32,18 @@ void main() {
   float v = v_dataset.a;
 
   if(u_linearColor == 1.0) { // 使用渐变颜色
-    gl_FragColor = mix(u_sourceColor, u_targetColor, v);
+    outputColor = mix(u_sourceColor, u_targetColor, v);
   } else { // 使用 color 方法传入的颜色
-     gl_FragColor = v_color;
+     outputColor = v_color;
   }
 
-  gl_FragColor.a *= v_color.a; // 全局透明度
+  outputColor.a *= v_color.a; // 全局透明度
   if(u_animate.x == Animate) {
       animateSpeed = u_time / u_animate.y;
        float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_animate.z)* (1.0/ u_animate.z) + animateSpeed);
       alpha = (alpha + u_animate.w -1.0) / u_animate.w;
       alpha = smoothstep(0., 1., alpha);
-      gl_FragColor.a *= alpha;
+      outputColor.a *= alpha;
   }
 
   if(u_line_texture == LineTexture) { // while load texture
@@ -56,7 +61,7 @@ void main() {
     // 计算纹理间隔 end
 
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
-    vec4 pattern = texture2D(u_texture, uv);
+    vec4 pattern = texture(SAMPLER_2D(u_texture), uv);
 
     // Tip: 判断纹理间隔
     if(flag > 0.0) {
@@ -65,23 +70,23 @@ void main() {
 
     if(u_textureBlend == 0.0) { // normal
       pattern.a = 0.0;
-      gl_FragColor = filterColor(gl_FragColor + pattern);
+      outputColor = filterColor(outputColor + pattern);
     } else { // replace
         pattern.a *= v_color.a;
-        if(gl_FragColor.a <= 0.0) {
+        if(outputColor.a <= 0.0) {
           pattern.a = 0.0;
         }
-        gl_FragColor = filterColor(pattern);
+        outputColor = filterColor(pattern);
     }
   }
   
 
   // blur - AA
   if(v < v_blur) {
-    gl_FragColor.a = mix(0.0, gl_FragColor.a, v/v_blur);
+    outputColor.a = mix(0.0, outputColor.a, v/v_blur);
   } else if(v > 1.0 - v_blur) {
-    gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - v_blur))/v_blur);
+    outputColor.a = mix(outputColor.a, 0.0, (v - (1.0 - v_blur))/v_blur);
   }
 
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor = filterColor(outputColor);
 }

package/lib/line/shaders/wall/wall_vert.glsl

@@ -1,31 +1,38 @@
 #define Animate 0.0
-
-attribute float a_Miter;
-attribute vec4 a_Color;
-attribute vec2 a_Size;
-attribute vec3 a_Normal;
-attribute vec3 a_Position;
-attribute vec2 a_iconMapUV;
-attribute float a_Total_Distance;
-attribute float a_Distance;
-
-uniform mat4 u_ModelMatrix;
-
-uniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
-uniform float u_icon_step: 100;
-uniform float u_heightfixed;
-uniform float u_linearColor: 0;
-
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in vec2 a_Size;
+layout(location = 10) in float a_Miter;
+layout(location = 11) in float a_Total_Distance;
+layout(location = 12) in vec4 a_Instance;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_iconMapUV;
+layout(location = 15) in float a_Distance;
+
+
+layout(std140) uniform commonUniorm {
+  vec4 u_animate: [ 1., 2., 1.0, 0.2 ];
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  vec2 u_textSize;
+  float u_icon_step: 100;
+  float u_heightfixed;
+  float u_linearColor: 0;
+  float u_line_texture;
+  float u_textureBlend;
+  float u_iconStepCount;
+  float u_time;
+};
 #pragma include "projection"
 #pragma include "light"
 #pragma include "picking"
 
 // texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
-varying vec2 v_iconMapUV;
-varying vec4 v_color;
-varying float v_blur;
-varying float v_radio;
-varying vec4 v_dataset;
+out vec2 v_iconMapUV;
+out vec4 v_color;
+out float v_blur;
+out float v_radio;
+out vec4 v_dataset;
 
 void main() {
 

package/lib/plugins/DataMappingPlugin.js

@@ -136,9 +136,7 @@ var DataMappingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
       filterData = layer.processData(filterData); // 目前只有简单线需要处理
       var encodeData = this.mapping(layer, attributes, filterData, undefined);
       layer.setEncodedData(encodeData);
-      if (dataArray.length === 0 && layer.encodeDataLength === 0) {
-        return false;
-      }
+
       // 对外暴露事件
       layer.emit('dataUpdate', null);
       return true;

package/lib/plugins/FeatureScalePlugin.js

@@ -287,9 +287,20 @@ var FeatureScalePlugin = exports.default = (_dec = (0, _inversify.injectable)(),
       var cfg = {
         type: type
       };
-      var values = (data === null || data === void 0 ? void 0 : data.map(function (item) {
-        return item[field];
-      })) || [];
+      // quantile domain 需要根据ID 进行去重
+      var values = [];
+      if (type === _l7Core.ScaleTypes.QUANTILE) {
+        // 根据 obejct 属性 _id 进行去重 
+        var idMap = new Map();
+        data === null || data === void 0 || data.forEach(function (obj) {
+          idMap.set(obj._id, obj[field]);
+        });
+        values = Array.from(idMap.values());
+      } else {
+        values = (data === null || data === void 0 ? void 0 : data.map(function (item) {
+          return item[field];
+        })) || [];
+      }
       if (scaleOption !== null && scaleOption !== void 0 && scaleOption.domain) {
         cfg.domain = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.domain;
       } else if (type === _l7Core.ScaleTypes.CAT || type === _l7Core.ScaleTypes.IDENTITY) {

package/lib/plugins/PixelPickingPlugin.js

@@ -5,15 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
 var _l7Utils = require("@antv/l7-utils");
 var _inversify = require("inversify");
 require("reflect-metadata");
 var _CommonStyleAttribute = require("../core/CommonStyleAttribute");
 var _dec, _class;
+var isNumber = _l7Utils.lodashUtil.isNumber;
 var PickingStage = {
   NONE: 0.0,
   ENCODE: 1.0,
@@ -22,35 +23,42 @@ var PickingStage = {
 var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function () {
   function PixelPickingPlugin() {
     (0, _classCallCheck2.default)(this, PixelPickingPlugin);
-    (0, _defineProperty2.default)(this, "PickOption", {
-      u_HighlightColor: [1, 0, 0, 1],
-      u_SelectColor: [1, 0, 0, 1],
-      u_PickingColor: [0, 0, 0],
-      u_PickingStage: 0,
-      u_CurrentSelectedId: [0, 0, 0],
-      u_PickingThreshold: 10,
-      u_PickingBuffer: 0,
-      // TODO: 更新机制
-      u_shaderPick: 0,
-      u_EnableSelect: 0,
-      u_activeMix: 0
-    });
   }
   (0, _createClass2.default)(PixelPickingPlugin, [{
     key: "pickOption2Array",
-    value: function pickOption2Array() {
-      return Object.values(this.PickOption).flat();
+    value:
+    /**
+     * Use map to keep order of insertion.
+     * @see https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order
+     */
+
+    function pickOption2Array() {
+      var array = [];
+      this.pickingUniformMap.forEach(function (value, key) {
+        if (isNumber(value)) {
+          array.push(value);
+        } else {
+          array.push.apply(array, (0, _toConsumableArray2.default)(value));
+        }
+      });
+      return array;
     }
   }, {
     key: "updatePickOption",
-    value: function updatePickOption(option, rendererService) {
+    value: function updatePickOption(options, layer) {
       var _this = this;
-      Object.keys(option).forEach(function (key) {
-        _this.PickOption[key] = option[key];
+      Object.keys(options).forEach(function (key) {
+        _this.pickingUniformMap.set(key, options[key]);
       });
-      rendererService.uniformBuffers[1].subData({
+      var u_PickingBuffer = layer.getLayerConfig().pickingBuffer || 0;
+      // Tip: 当前地图是否在拖动
+      var u_shaderPick = Number(layer.getShaderPickStat());
+      this.pickingUniformMap.set('u_PickingBuffer', u_PickingBuffer);
+      this.pickingUniformMap.set('u_shaderPick', u_shaderPick);
+      var uniformBuffer = layer.getPickingUniformBuffer();
+      uniformBuffer.subData({
         offset: 0,
-        data: new Uint8Array(new Float32Array(this.pickOption2Array()))
+        data: this.pickOption2Array()
       });
     }
   }, {
@@ -59,28 +67,8 @@ var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
       var _this2 = this;
       var rendererService = _ref.rendererService,
         styleAttributeService = _ref.styleAttributeService;
-      if (!rendererService.uniformBuffers[1]) {
-        // Create a Uniform Buffer Object(UBO).
-        var uniformBuffer = rendererService.createBuffer({
-          // vec4 u_HighlightColor;
-          // vec4 u_SelectColor;
-          // vec3 u_PickingColor;
-          // float u_PickingStage;
-          // vec3 u_CurrentSelectedId;
-          // float u_PickingThreshold;
-          // float u_PickingBuffer;
-          // float u_shaderPick;
-          // float u_EnableSelect;
-          // float u_activeMix;
-          data: new Float32Array(this.pickOption2Array().length),
-          isUBO: true
-        });
-        rendererService.uniformBuffers[1] = uniformBuffer;
-        this.updatePickOption({}, rendererService);
-      }
-      // u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
-      // // Tip: 当前地图是否在拖动
-      // u_shaderPick: Number(layer.getShaderPickStat()),
+      var uniformBuffer;
+      this.pickingUniformMap = new Map([['u_HighlightColor', [1, 0, 0, 1]], ['u_SelectColor', [1, 0, 0, 1]], ['u_PickingColor', [0, 0, 0]], ['u_PickingStage', 0], ['u_CurrentSelectedId', [0, 0, 0]], ['u_PickingThreshold', 10], ['u_PickingBuffer', 0], ['u_shaderPick', 0], ['u_EnableSelect', 0], ['u_activeMix', 0]]);
 
       // TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
       layer.hooks.init.tapPromise('PixelPickingPlugin', function () {
@@ -113,7 +101,7 @@ var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
         if (enablePicking && layer.isVisible()) {
           _this2.updatePickOption({
             u_PickingStage: PickingStage.ENCODE
-          }, rendererService);
+          }, layer);
           layer.models.forEach(function (model) {
             return model.addUniforms({
               u_PickingStage: PickingStage.ENCODE
@@ -128,7 +116,7 @@ var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
         if (enablePicking && layer.isVisible()) {
           _this2.updatePickOption({
             u_PickingStage: PickingStage.HIGHLIGHT
-          }, rendererService);
+          }, layer);
           layer.models.forEach(function (model) {
             return model.addUniforms({
               u_PickingStage: PickingStage.HIGHLIGHT
@@ -153,7 +141,7 @@ var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
           }),
           u_activeMix: activeMix
         };
-        _this2.updatePickOption(option, rendererService);
+        _this2.updatePickOption(option, layer);
         layer.models.forEach(function (model) {
           return model.addUniforms(option);
         });
@@ -180,8 +168,7 @@ var PixelPickingPlugin = exports.default = (_dec = (0, _inversify.injectable)(),
           }),
           u_EnableSelect: 1
         };
-        console.log(option);
-        _this2.updatePickOption(option, rendererService);
+        _this2.updatePickOption(option, layer);
         layer.models.forEach(function (model) {
           return model.addUniforms(option);
         });

package/lib/plugins/ShaderUniformPlugin.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -44,7 +44,7 @@ var ShaderUniformPlugin = exports.default = (_dec = (0, _inversify.injectable)()
       if (!this.rendererService.uniformBuffers[0]) {
         // Create a Uniform Buffer Object(UBO).
         uniformBuffer = this.rendererService.createBuffer({
-          data: new Float32Array(16 * 5 + 4 * 6 + 4),
+          data: new Float32Array(16 * 4 + 4 * 7),
           isUBO: true
         });
         this.rendererService.uniformBuffers[0] = uniformBuffer;
@@ -61,6 +61,11 @@ var ShaderUniformPlugin = exports.default = (_dec = (0, _inversify.injectable)()
           // mvp = amapCustomCoords.getMVPMatrix()
           // @ts-ignore
           sceneCenterMercator = _this.mapService.getCustomCoordCenter();
+          var _uniformBuffer = layer.getLayerUniformBuffer();
+          _uniformBuffer.subData({
+            offset: 0,
+            data: new Uint8Array(new Float32Array([].concat((0, _toConsumableArray2.default)(mvp), (0, _toConsumableArray2.default)(sceneCenterMercator))).buffer)
+          });
         }
         var _this$rendererService = _this.rendererService.getViewportSize(),
           width = _this$rendererService.width,
@@ -121,7 +126,7 @@ var ShaderUniformPlugin = exports.default = (_dec = (0, _inversify.injectable)()
       var u_ViewportCenter = this.coordinateSystemService.getViewportCenter();
       var u_ViewportSize = [width, height];
       var u_FocalDistance = this.cameraService.getFocalDistance();
-      var data = [].concat((0, _toConsumableArray2.default)(u_ViewMatrix), (0, _toConsumableArray2.default)(u_ProjectionMatrix), (0, _toConsumableArray2.default)(u_ViewProjectionMatrix), (0, _toConsumableArray2.default)(u_ModelMatrix), (0, _toConsumableArray2.default)(u_Mvp), (0, _toConsumableArray2.default)(u_ViewportCenterProjection), (0, _toConsumableArray2.default)(u_PixelsPerDegree), [
+      var data = [].concat((0, _toConsumableArray2.default)(u_ViewMatrix), (0, _toConsumableArray2.default)(u_ProjectionMatrix), (0, _toConsumableArray2.default)(u_ViewProjectionMatrix), (0, _toConsumableArray2.default)(u_ModelMatrix), (0, _toConsumableArray2.default)(u_ViewportCenterProjection), (0, _toConsumableArray2.default)(u_PixelsPerDegree), [
       // 4
       u_Zoom], (0, _toConsumableArray2.default)(u_PixelsPerDegree2), [
       // 4
@@ -129,11 +134,11 @@ var ShaderUniformPlugin = exports.default = (_dec = (0, _inversify.injectable)()
       // 4
       u_CoordinateSystem], (0, _toConsumableArray2.default)(u_CameraPosition), [
       // 4
-      u_DevicePixelRatio], (0, _toConsumableArray2.default)(u_ViewportCenter), u_ViewportSize, (0, _toConsumableArray2.default)(sceneCenterMercator), [
-      // 2
+      u_DevicePixelRatio], (0, _toConsumableArray2.default)(u_ViewportCenter), u_ViewportSize, [
+      // 4
       u_FocalDistance,
       // 1
-      0]);
+      0, 0, 0]);
       return {
         data: data,
         uniforms: (_uniforms = {}, (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.ProjectionMatrix, u_ProjectionMatrix), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.ViewMatrix, u_ViewMatrix), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.ViewProjectionMatrix, u_ViewProjectionMatrix), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.Zoom, u_Zoom), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.ZoomScale, u_ZoomScale), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.FocalDistance, u_FocalDistance), (0, _defineProperty2.default)(_uniforms, _l7Core.CameraUniform.CameraPosition, u_CameraPosition), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.CoordinateSystem, u_CoordinateSystem), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.ViewportCenter, u_ViewportCenter), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.ViewportCenterProjection, u_ViewportCenterProjection), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.PixelsPerDegree, u_PixelsPerDegree), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.PixelsPerDegree2, u_PixelsPerDegree2), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.PixelsPerMeter, u_PixelsPerMeter), (0, _defineProperty2.default)(_uniforms, _l7Core.CoordinateUniform.Mvp, u_Mvp), (0, _defineProperty2.default)(_uniforms, "u_sceneCenterMercator", sceneCenterMercator), (0, _defineProperty2.default)(_uniforms, "u_ViewportSize", u_ViewportSize), (0, _defineProperty2.default)(_uniforms, "u_ModelMatrix", u_ModelMatrix), (0, _defineProperty2.default)(_uniforms, "u_DevicePixelRatio", u_DevicePixelRatio), _uniforms)

package/lib/point/index.js

@@ -33,6 +33,7 @@ var PointLayer = exports.default = /*#__PURE__*/function (_BaseLayer) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "type", 'PointLayer');
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableShaderEncodeStyles", ['stroke', 'offsets', 'opacity', 'rotation']);
+    //4+2+1+1
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableDataEncodeStyles", ['textOffset', 'textAnchor']);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultSourceConfig", {
       data: [],

package/lib/point/models/billboard_point.js

@@ -17,12 +17,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _l7Core = require("@antv/l7-core");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _l7Utils = require("@antv/l7-utils");
+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/billboard_point_frag.glsl' */
-var simplePointFrag = "\nuniform float u_additive;\nuniform float u_stroke_opacity : 1;\n\nuniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];\n\nvarying vec4 v_color;\nvarying float v_blur;\nvarying float v_innerRadius;\n\n#pragma include \"picking\"\nvoid main() {\n  vec2 center = vec2(0.5);\n\n  // Tip: \u7247\u5143\u5230\u4E2D\u5FC3\u70B9\u7684\u8DDD\u79BB 0 - 1\n  float fragmengTocenter = distance(center, gl_PointCoord) * 2.0;\n  // Tip: \u7247\u5143\u7684\u526A\u5207\u6210\u5706\u5F62\n  float circleClipOpacity = 1.0 - smoothstep(v_blur, 1.0, fragmengTocenter);\n\n\n  if(v_innerRadius < 0.99) {\n    // \u5F53\u5B58\u5728 stroke \u4E14 stroke > 0.01\n    float blurWidth = (1.0 - v_blur)/2.0;\n    vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);\n    if(fragmengTocenter > v_innerRadius + blurWidth) {\n      gl_FragColor = stroke;\n    } else if(fragmengTocenter > v_innerRadius - blurWidth){\n      float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);\n      gl_FragColor = mix(v_color, stroke, mixR);\n    } else {\n      gl_FragColor = v_color;\n    }\n  } else {\n    // \u5F53\u4E0D\u5B58\u5728 stroke \u6216 stroke <= 0.01\n    gl_FragColor = v_color;\n  }\n\n  gl_FragColor = filterColor(gl_FragColor);\n  \n  if(u_additive > 0.0) {\n    gl_FragColor *= circleClipOpacity;\n  } else {\n    gl_FragColor.a *= circleClipOpacity;\n  }\n\n}\n";
-/* babel-plugin-inline-import '../shaders/billboard_point_vert.glsl' */
-var simplePointVert = "\nattribute vec3 a_Position;\nuniform mat4 u_ModelMatrix;\n\nattribute float a_Size;\nattribute vec4 a_Color;\nvarying vec4 v_color;\n\nuniform float u_opacity : 1;\nuniform vec2 u_offsets;\nuniform float u_stroke_width;\n\nvarying float v_blur;\nvarying float v_innerRadius;\n\n\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"project\"\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * u_opacity);\n  v_blur = 1.0 - max(2.0/a_Size, 0.05);\n  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);\n  \n  vec2 offset = project_pixel(u_offsets);\n  \n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);\n  } else { // else\n    vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);\n    gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\n  }\n  \n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/billboard/billboard_point_frag.glsl' */
+var simplePointFrag = "\nlayout(std140) uniform commonUniorm {\n  vec4 u_stroke_color;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_stroke_width;\n};\n\nin vec4 v_color;\nin float v_blur;\nin float v_innerRadius;\n\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  vec2 center = vec2(0.5);\n\n  // Tip: \u7247\u5143\u5230\u4E2D\u5FC3\u70B9\u7684\u8DDD\u79BB 0 - 1\n  float fragmengTocenter = distance(center, gl_PointCoord) * 2.0;\n  // Tip: \u7247\u5143\u7684\u526A\u5207\u6210\u5706\u5F62\n  float circleClipOpacity = 1.0 - smoothstep(v_blur, 1.0, fragmengTocenter);\n\n\n  if(v_innerRadius < 0.99) {\n    // \u5F53\u5B58\u5728 stroke \u4E14 stroke > 0.01\n    float blurWidth = (1.0 - v_blur)/2.0;\n    vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);\n    if(fragmengTocenter > v_innerRadius + blurWidth) {\n      outputColor = stroke;\n    } else if(fragmengTocenter > v_innerRadius - blurWidth){\n      float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);\n      outputColor = mix(v_color, stroke, mixR);\n    } else {\n      outputColor = v_color;\n    }\n  } else {\n    // \u5F53\u4E0D\u5B58\u5728 stroke \u6216 stroke <= 0.01\n    outputColor = v_color;\n  }\n\n  outputColor = filterColor(outputColor);\n  \n  if(u_additive > 0.0) {\n    outputColor *= circleClipOpacity;\n  } else {\n    outputColor.a *= circleClipOpacity;\n  }\n\n}\n";
+/* babel-plugin-inline-import '../shaders/billboard/billboard_point_vert.glsl' */
+var simplePointVert = "\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\n\nlayout(std140) uniform commonUniorm {\n  vec4 u_stroke_color;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_stroke_width;\n};\n\nout vec4 v_color;\nout float v_blur;\nout float v_innerRadius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"project\"\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  v_blur = 1.0 - max(2.0/a_Size, 0.05);\n  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);\n  \n  vec2 offset = project_pixel(u_offsets);\n  \n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);\n  } else { // else\n    vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);\n    gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\n  }\n  \n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
 function PointTriangulation(feature) {
   var coordinates = feature.coordinates;
   return {
@@ -46,13 +47,9 @@ var SimplePointModel = exports.default = /*#__PURE__*/function (_BaseModel) {
       };
     }
   }, {
-    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,
-        _ref$offsets = _ref.offsets,
-        offsets = _ref$offsets === void 0 ? [0, 0] : _ref$offsets,
         blend = _ref.blend,
         _ref$strokeOpacity = _ref.strokeOpacity,
         strokeOpacity = _ref$strokeOpacity === void 0 ? 1 : _ref$strokeOpacity,
@@ -60,14 +57,14 @@ var SimplePointModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         strokeWidth = _ref$strokeWidth === void 0 ? 0 : _ref$strokeWidth,
         _ref$stroke = _ref.stroke,
         stroke = _ref$stroke === void 0 ? '#fff' : _ref$stroke;
-      return {
+      var commonOptions = {
+        u_stroke_color: (0, _l7Utils.rgb2arr)(stroke),
         u_additive: blend === 'additive' ? 1.0 : 0.0,
-        u_opacity: opacity,
-        u_offsets: offsets,
         u_stroke_opacity: strokeOpacity,
-        u_stroke_width: strokeWidth,
-        u_stroke_color: (0, _l7Utils.rgb2arr)(stroke)
+        u_stroke_width: strokeWidth
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -97,21 +94,23 @@ var SimplePointModel = exports.default = /*#__PURE__*/function (_BaseModel) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.layer.triangulation = PointTriangulation;
-              _context2.next = 3;
+              this.initUniformsBuffer();
+              _context2.next = 4;
               return this.layer.buildLayerModel({
                 moduleName: 'pointSimple',
                 vertexShader: simplePointVert,
                 fragmentShader: simplePointFrag,
+                inject: this.getInject(),
                 triangulation: PointTriangulation,
                 depth: {
                   enable: false
                 },
                 primitive: _l7Core.gl.POINTS
               });
-            case 3:
+            case 4:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 5:
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -130,6 +129,7 @@ var SimplePointModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],