@antv/l7-layers 2.9.20 → 2.9.22

package/es/core/BaseModel.js

@@ -5,9 +5,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _applyDecoratedDescriptor from "@babel/runtime/helpers/applyDecoratedDescriptor";
 import _initializerWarningHelper from "@babel/runtime/helpers/initializerWarningHelper";
-import _isString from "lodash/isString";
-import _isNumber from "lodash/isNumber";
-import _isEqual from "lodash/isEqual";
 
 var _dec, _class, _descriptor;
 
@@ -20,55 +17,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import { BlendType, gl, lazyInject, TYPES } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import { color } from 'd3-color';
-import { BlendTypes } from '../utils/blend';
-var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = function () {
+import { isEqual, isNumber, isString } from 'lodash';
+import { BlendTypes } from "../utils/blend";
+var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__PURE__*/function () {
+  // style texture data mapping
+  // 用于数据传递的数据纹理
+  // 默认有多少列（宽度）
+  // 计算得到的当前数据纹理有多少行（高度）
+  // 单个 cell 的长度
+  // 需要进行数据映射的属性集合
+  // style texture data mapping
   function BaseModel(layer) {
     _classCallCheck(this, BaseModel);
 
-    _defineProperty(this, "triangulation", void 0);
-
-    _defineProperty(this, "createTexture2D", void 0);
-
-    _defineProperty(this, "layer", void 0);
-
-    _defineProperty(this, "dataTexture", void 0);
-
-    _defineProperty(this, "DATA_TEXTURE_WIDTH", void 0);
-
-    _defineProperty(this, "rowCount", void 0);
-
-    _defineProperty(this, "cacheStyleProperties", void 0);
-
-    _defineProperty(this, "cellLength", void 0);
-
-    _defineProperty(this, "cellProperties", void 0);
-
-    _defineProperty(this, "cellTypeLayout", void 0);
-
-    _defineProperty(this, "stylePropertyesExist", void 0);
-
-    _defineProperty(this, "dataTextureTest", void 0);
-
     _initializerDefineProperty(this, "configService", _descriptor, this);
 
-    _defineProperty(this, "shaderModuleService", void 0);
-
-    _defineProperty(this, "rendererService", void 0);
-
-    _defineProperty(this, "iconService", void 0);
-
-    _defineProperty(this, "fontService", void 0);
-
-    _defineProperty(this, "styleAttributeService", void 0);
-
-    _defineProperty(this, "mapService", void 0);
-
-    _defineProperty(this, "cameraService", void 0);
-
-    _defineProperty(this, "layerService", void 0);
-
-    _defineProperty(this, "pickingService", void 0);
-
     this.layer = layer;
     this.rendererService = layer.getContainer().get(TYPES.IRendererService);
     this.pickingService = layer.getContainer().get(TYPES.IPickingService);
@@ -78,12 +41,15 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
     this.iconService = layer.getContainer().get(TYPES.IIconService);
     this.fontService = layer.getContainer().get(TYPES.IFontService);
     this.cameraService = layer.getContainer().get(TYPES.ICameraService);
-    this.layerService = layer.getContainer().get(TYPES.ILayerService);
-    this.registerBuiltinAttributes();
+    this.layerService = layer.getContainer().get(TYPES.ILayerService); // 注册 Attribute
+
+    this.registerBuiltinAttributes(); // 开启动画
+
     this.startModelAnimate();
     var createTexture2D = this.rendererService.createTexture2D;
     this.createTexture2D = createTexture2D;
-    this.DATA_TEXTURE_WIDTH = 1024;
+    this.DATA_TEXTURE_WIDTH = 1024; // 数据纹理固定宽度
+
     this.rowCount = 1;
     this.cellLength = 0;
     this.cellProperties = [];
@@ -103,10 +69,13 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
       hasStroke: 0,
       hasOffsets: 0
     };
-    this.dataTextureTest = this.layerService.getOESTextureFloat();
+    this.dataTextureTest = this.layerService.getOESTextureFloat(); // 只有在不支持数据纹理的情况下进行赋值
 
     if (!this.dataTextureTest) {
       this.dataTexture = this.createTexture2D({
+        // data: new Uint8ClampedArray(4),
+        // 使用 Uint8ClampedArray 在 支付宝 环境中可能存在问题 UC 内核对格式有要求 L7 v2.7.18 版本发现
+        // Uint8ClampedArray 和 Uint8Array 没有实质性的区别
         data: new Uint8Array(4),
         mag: gl.NEAREST,
         min: gl.NEAREST,
@@ -114,14 +83,22 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         height: 1
       });
     }
-  }
+  } // style datatexture mapping
+
+  /**
+   * 清除上一次的计算结果 - 全量清除
+   */
+
 
   _createClass(BaseModel, [{
     key: "clearLastCalRes",
     value: function clearLastCalRes() {
-      this.cellProperties = [];
-      this.cellLength = 0;
+      this.cellProperties = []; // 清空上一次计算的需要进行数据映射的属性集合
+
+      this.cellLength = 0; // 清空上一次计算的 cell 的长度
+
       this.stylePropertyesExist = {
+        // 全量清空上一次是否需要对 style 属性进行数据映射的判断
         hasThetaOffset: 0,
         hasOpacity: 0,
         hasStrokeOpacity: 0,
@@ -134,42 +111,67 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
     key: "getCellTypeLayout",
     value: function getCellTypeLayout() {
       if (this.dataTextureTest) {
-        return [this.rowCount, this.DATA_TEXTURE_WIDTH, 0.0, 0.0, this.stylePropertyesExist.hasOpacity, this.stylePropertyesExist.hasStrokeOpacity, this.stylePropertyesExist.hasStrokeWidth, this.stylePropertyesExist.hasStroke, this.stylePropertyesExist.hasOffsets, this.stylePropertyesExist.hasThetaOffset, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0];
+        return [// 0
+        this.rowCount, // 数据纹理有几行
+        this.DATA_TEXTURE_WIDTH, // 数据纹理有几列
+        0.0, 0.0, // 1
+        this.stylePropertyesExist.hasOpacity, // cell 中是否存在 opacity
+        this.stylePropertyesExist.hasStrokeOpacity, // cell 中是否存在 strokeOpacity
+        this.stylePropertyesExist.hasStrokeWidth, // cell 中是否存在 strokeWidth
+        this.stylePropertyesExist.hasStroke, // cell 中是否存在 stroke
+        // 2
+        this.stylePropertyesExist.hasOffsets, // cell 中是否存在 offsets
+        this.stylePropertyesExist.hasThetaOffset, // cell 中是否存在 thetaOffset
+        0.0, 0.0, // 3
+        0.0, 0.0, 0.0, 1.0];
       } else {
-        return [1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0];
+        return [1.0, // 数据纹理有几行
+        1.0, // 数据纹理有几列
+        0.0, 0.0, 0.0, // cell 中是否存在 opacity
+        0.0, // cell 中是否存在 strokeOpacity
+        0.0, // cell 中是否存在 strokeWidth
+        0.0, // cell 中是否存在 stroke
+        0.0, // cell 中是否存在 offsets
+        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0];
       }
     }
+    /**
+     * 判断数据纹理是否需要重新计算 - 根据传入的值进行判断
+     * @param options
+     * @returns
+     */
+
   }, {
     key: "dataTextureNeedUpdate",
     value: function dataTextureNeedUpdate(options) {
       var isUpdate = false;
 
-      if (!_isEqual(options.thetaOffset, this.cacheStyleProperties.thetaOffset)) {
+      if (!isEqual(options.thetaOffset, this.cacheStyleProperties.thetaOffset)) {
         isUpdate = true;
         this.cacheStyleProperties.thetaOffset = options.thetaOffset;
       }
 
-      if (!_isEqual(options.opacity, this.cacheStyleProperties.opacity)) {
+      if (!isEqual(options.opacity, this.cacheStyleProperties.opacity)) {
         isUpdate = true;
         this.cacheStyleProperties.opacity = options.opacity;
       }
 
-      if (!_isEqual(options.strokeOpacity, this.cacheStyleProperties.strokeOpacity)) {
+      if (!isEqual(options.strokeOpacity, this.cacheStyleProperties.strokeOpacity)) {
         isUpdate = true;
         this.cacheStyleProperties.strokeOpacity = options.strokeOpacity;
       }
 
-      if (!_isEqual(options.strokeWidth, this.cacheStyleProperties.strokeWidth)) {
+      if (!isEqual(options.strokeWidth, this.cacheStyleProperties.strokeWidth)) {
         isUpdate = true;
         this.cacheStyleProperties.strokeWidth = options.strokeWidth;
       }
 
-      if (!_isEqual(options.stroke, this.cacheStyleProperties.stroke)) {
+      if (!isEqual(options.stroke, this.cacheStyleProperties.stroke)) {
         isUpdate = true;
         this.cacheStyleProperties.stroke = options.stroke;
       }
 
-      if (!_isEqual(options.offsets, this.cacheStyleProperties.offsets)) {
+      if (!isEqual(options.offsets, this.cacheStyleProperties.offsets)) {
         isUpdate = true;
         this.cacheStyleProperties.offsets = options.offsets;
       }
@@ -180,12 +182,18 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
 
       return isUpdate;
     }
+    /**
+     * 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
+     * @param options
+     */
+
   }, {
     key: "judgeStyleAttributes",
     value: function judgeStyleAttributes(options) {
-      this.clearLastCalRes();
+      this.clearLastCalRes(); // 清除上一次的计算结果 - 全量清除
 
-      if (options.opacity !== undefined && !_isNumber(options.opacity)) {
+      if (options.opacity !== undefined && !isNumber(options.opacity)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'opacity',
           count: 1
@@ -194,7 +202,8 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         this.cellLength += 1;
       }
 
-      if (options.strokeOpacity !== undefined && !_isNumber(options.strokeOpacity)) {
+      if (options.strokeOpacity !== undefined && !isNumber(options.strokeOpacity)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'strokeOpacity',
           count: 1
@@ -203,7 +212,8 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         this.cellLength += 1;
       }
 
-      if (options.strokeWidth !== undefined && !_isNumber(options.strokeWidth)) {
+      if (options.strokeWidth !== undefined && !isNumber(options.strokeWidth)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'strokeWidth',
           count: 1
@@ -213,6 +223,7 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
       }
 
       if (options.stroke !== undefined && !this.isStaticColor(options.stroke)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'stroke',
           count: 4
@@ -222,6 +233,7 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
       }
 
       if (options.offsets !== undefined && !this.isOffsetStatic(options.offsets)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'offsets',
           count: 2
@@ -230,19 +242,27 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         this.cellLength += 2;
       }
 
-      if (options.thetaOffset !== undefined && !_isNumber(options.thetaOffset)) {
+      if (options.thetaOffset !== undefined && !isNumber(options.thetaOffset)) {
+        // 数据映射
         this.cellProperties.push({
           attr: 'thetaOffset',
           count: 1
         });
         this.stylePropertyesExist.hasThetaOffset = 1;
         this.cellLength += 1;
-      }
+      } // console.log('this.cellLength', this.cellLength)
+
     }
+    /**
+     * 判断变量 stroke 是否是常量值
+     * @param stroke
+     * @returns
+     */
+
   }, {
     key: "isStaticColor",
     value: function isStaticColor(stroke) {
-      if (_isString(stroke)) {
+      if (isString(stroke)) {
         if (color(stroke)) {
           return true;
         } else {
@@ -252,6 +272,12 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
 
       return false;
     }
+    /**
+     * 获取 stroke 颜色并做兼容处理
+     * @param stroke
+     * @returns
+     */
+
   }, {
     key: "getStrokeColor",
     value: function getStrokeColor(stroke) {
@@ -266,15 +292,27 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         return [0, 0, 0, 0];
       }
     }
+    /**
+     * 判断 offsets 是否是常量
+     * @param offsets
+     * @returns
+     */
+
   }, {
     key: "isOffsetStatic",
     value: function isOffsetStatic(offsets) {
-      if (Array.isArray(offsets) && offsets.length === 2 && _isNumber(offsets[0]) && _isNumber(offsets[1])) {
+      if (Array.isArray(offsets) && offsets.length === 2 && isNumber(offsets[0]) && isNumber(offsets[1])) {
         return true;
       } else {
         return false;
       }
     }
+    /**
+     * 补空位
+     * @param d
+     * @param count
+     */
+
   }, {
     key: "patchMod",
     value: function patchMod(d, count) {
@@ -282,6 +320,13 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         d.push(-1);
       }
     }
+    /**
+     * 根据映射的数据字段往推入数据
+     * @param d
+     * @param cellData
+     * @param cellPropertiesLayouts
+     */
+
   }, {
     key: "patchData",
     value: function patchData(d, cellData, cellPropertiesLayouts) {
@@ -296,6 +341,7 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
           var value = cellData[attr];
 
           if (value !== undefined) {
+            // 数据中存在该属性
             if (attr === 'stroke') {
               d.push.apply(d, _toConsumableArray(rgb2arr(value)));
             } else if (attr === 'offsets') {
@@ -305,9 +351,10 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
                 d.push(0, 0);
               }
             } else {
-              d.push(_isNumber(value) ? value : 1.0);
+              d.push(isNumber(value) ? value : 1.0);
             }
           } else {
+            // 若不存在时则补位
             this.patchMod(d, count);
           }
         }
@@ -317,29 +364,42 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
         _iterator.f();
       }
     }
+    /**
+     * 计算推入数据纹理的数据
+     * @param cellLength
+     * @param encodeData
+     * @param cellPropertiesLayouts
+     * @returns
+     */
+
   }, {
     key: "calDataFrame",
     value: function calDataFrame(cellLength, encodeData, cellPropertiesLayouts) {
       var encodeDatalength = encodeData.length;
-      var rowCount = Math.ceil(encodeDatalength * cellLength / this.DATA_TEXTURE_WIDTH);
+      var rowCount = Math.ceil(encodeDatalength * cellLength / this.DATA_TEXTURE_WIDTH); // 有多少行
+
       var totalLength = rowCount * this.DATA_TEXTURE_WIDTH;
       var d = [];
 
       for (var i = 0; i < encodeDatalength; i++) {
+        // 根据 encodeData 数据推入数据
         var cellData = encodeData[i];
         this.patchData(d, cellData, cellPropertiesLayouts);
       }
 
       for (var _i = d.length; _i < totalLength; _i++) {
+        // 每行不足的部分用 -1 补足（数据纹理时 width * height 的矩形数据集合）
         d.push(-1);
-      }
+      } // console.log('data', d)
+
 
       return {
         data: d,
         width: this.DATA_TEXTURE_WIDTH,
         height: rowCount
       };
-    }
+    } // style datatexture mapping
+
   }, {
     key: "getBlend",
     value: function getBlend() {
@@ -423,5 +483,4 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = functi
   writable: true,
   initializer: null
 })), _class));
-export { BaseModel as default };
-//# sourceMappingURL=BaseModel.js.map
+export { BaseModel as default };

package/es/core/interface.d.ts

@@ -12,6 +12,14 @@ interface ILineArrow {
     arrowHeight: number;
     tailWidth: number;
 }
+export declare enum LinearDir {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum TextureBlend {
+    NORMAL = "normal",
+    REPLACE = "replace"
+}
 export interface ILineLayerStyleOptions {
     tileOrigin?: number[];
     coord?: string;
@@ -24,7 +32,8 @@ export interface ILineLayerStyleOptions {
     lineTexture?: boolean;
     iconStep?: number;
     iconStepCount?: number;
-    textureBlend?: string;
+    textureBlend?: TextureBlend;
+    linearDir?: LinearDir;
     sourceColor?: string;
     targetColor?: string;
     thetaOffset?: number;
@@ -36,6 +45,7 @@ export interface ILineLayerStyleOptions {
     raisingHeight?: number;
     mask?: boolean;
     maskInside?: boolean;
+    blur?: [number, number, number];
     arrow?: ILineArrow;
     rampColors?: IColorRamp;
     featureId?: string;

package/es/core/interface.js

@@ -5,10 +5,23 @@ export var lineStyleType;
   lineStyleType[lineStyleType["dash"] = 1] = "dash";
 })(lineStyleType || (lineStyleType = {}));
 
+export var LinearDir;
+
+(function (LinearDir) {
+  LinearDir["VERTICAL"] = "vertical";
+  LinearDir["HORIZONTAL"] = "horizontal";
+})(LinearDir || (LinearDir = {}));
+
+export var TextureBlend;
+
+(function (TextureBlend) {
+  TextureBlend["NORMAL"] = "normal";
+  TextureBlend["REPLACE"] = "replace";
+})(TextureBlend || (TextureBlend = {}));
+
 export var CanvasUpdateType;
 
 (function (CanvasUpdateType) {
   CanvasUpdateType["ALWAYS"] = "always";
   CanvasUpdateType["DRAGEND"] = "dragend";
-})(CanvasUpdateType || (CanvasUpdateType = {}));
-//# sourceMappingURL=interface.js.map
+})(CanvasUpdateType || (CanvasUpdateType = {}));

package/es/core/schema.js

@@ -1,3 +1,6 @@
+/**
+ * BaseLayer Schema
+ */
 export default {
   properties: {
     enablePicking: {
@@ -19,5 +22,4 @@ export default {
       }]
     }
   }
-};
-//# sourceMappingURL=schema.js.map
+};

package/es/core/shape/Path.js

@@ -13,6 +13,11 @@ export var ShapeType3D;
 })(ShapeType3D || (ShapeType3D = {}));
 
 export var ShapeType2D;
+/**
+ * 生成规则多边形顶点个数
+ * @param pointCount  顶点个数 3 => 三角形
+ * @param start 顶点起始角度 调整图形的方向
+ */
 
 (function (ShapeType2D) {
   ShapeType2D["CIRCLE"] = "circle";
@@ -35,7 +40,8 @@ export function polygonPath(pointCount) {
     var x = Math.sin(t + Math.PI / 4);
     var y = Math.cos(t + Math.PI / 4);
     return [x, y, 0];
-  });
+  }); // path.push(path[0]);
+
   return path;
 }
 export function circle() {
@@ -53,5 +59,4 @@ export function hexagon() {
 export function pentagon() {
   return polygonPath(5);
 }
-export var geometryShape = (_geometryShape = {}, _defineProperty(_geometryShape, ShapeType2D.CIRCLE, circle), _defineProperty(_geometryShape, ShapeType2D.HEXAGON, hexagon), _defineProperty(_geometryShape, ShapeType2D.TRIANGLE, triangle), _defineProperty(_geometryShape, ShapeType2D.SQUARE, square), _defineProperty(_geometryShape, ShapeType2D.PENTAGON, pentagon), _defineProperty(_geometryShape, ShapeType3D.CYLINDER, circle), _defineProperty(_geometryShape, ShapeType3D.HEXAGONCOLUMN, hexagon), _defineProperty(_geometryShape, ShapeType3D.TRIANGLECOLUMN, triangle), _defineProperty(_geometryShape, ShapeType3D.SQUARECOLUMN, square), _defineProperty(_geometryShape, ShapeType3D.PENTAGONCOLUMN, pentagon), _geometryShape);
-//# sourceMappingURL=Path.js.map
+export var geometryShape = (_geometryShape = {}, _defineProperty(_geometryShape, ShapeType2D.CIRCLE, circle), _defineProperty(_geometryShape, ShapeType2D.HEXAGON, hexagon), _defineProperty(_geometryShape, ShapeType2D.TRIANGLE, triangle), _defineProperty(_geometryShape, ShapeType2D.SQUARE, square), _defineProperty(_geometryShape, ShapeType2D.PENTAGON, pentagon), _defineProperty(_geometryShape, ShapeType3D.CYLINDER, circle), _defineProperty(_geometryShape, ShapeType3D.HEXAGONCOLUMN, hexagon), _defineProperty(_geometryShape, ShapeType3D.TRIANGLECOLUMN, triangle), _defineProperty(_geometryShape, ShapeType3D.SQUARECOLUMN, square), _defineProperty(_geometryShape, ShapeType3D.PENTAGONCOLUMN, pentagon), _geometryShape);

package/es/core/shape/extrude.js

@@ -2,6 +2,12 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { lngLatToMeters } from '@antv/l7-utils';
 import earcut from 'earcut';
 import { vec3 } from 'gl-matrix';
+
+/**
+ * 拉伸多边形顶点，返回拉伸后的顶点信息
+ * @param paths 路径数据组
+ * @param extrude 是否拉伸
+ */
 export default function extrudePolygon(path) {
   var p1 = path[0][0];
   var p2 = path[0][path[0].length - 1];
@@ -15,7 +21,7 @@ export default function extrudePolygon(path) {
   var vertices = flattengeo.vertices,
       dimensions = flattengeo.dimensions;
   var positions = [];
-  var indexArray = [];
+  var indexArray = []; // 设置顶部z值
 
   for (var j = 0; j < vertices.length / dimensions; j++) {
     if (dimensions === 2) {
@@ -75,7 +81,7 @@ export function extrude_PolygonNormal(path) {
       dimensions = flattengeo.dimensions;
   var positions = [];
   var indexArray = [];
-  var normals = [];
+  var normals = []; // 设置顶部z值 position uv
 
   for (var j = 0; j < vertices.length / dimensions; j++) {
     if (dimensions === 2) {
@@ -139,5 +145,4 @@ function computeVertexNormals(p1, p2, p3) {
   var newNormal = vec3.create();
   vec3.normalize(newNormal, normal);
   return newNormal;
-}
-//# sourceMappingURL=extrude.js.map
+}