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

package/es/tile/tmsTileLayer.js

@@ -11,8 +11,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import BaseTileLayer from './tileLayer/baseTileLayer';
-export var TMSTileLayer = function (_BaseTileLayer) {
+import BaseTileLayer from "./tileLayer/baseTileLayer";
+export var TMSTileLayer = /*#__PURE__*/function (_BaseTileLayer) {
   _inherits(TMSTileLayer, _BaseTileLayer);
 
   var _super = _createSuper(TMSTileLayer);
@@ -53,6 +53,7 @@ export var TMSTileLayer = function (_BaseTileLayer) {
         var _tile$data;
 
         if ((_tile$data = tile.data) !== null && _tile$data !== void 0 && _tile$data.layers && _this2.sourceLayer) {
+          // vector
           var vectorTileLayer = tile.data.layers[_this2.sourceLayer];
           var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
 
@@ -90,11 +91,11 @@ export var TMSTileLayer = function (_BaseTileLayer) {
       this.parent.renderLayers();
 
       if (this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
         this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
       }
     }
   }]);
 
   return TMSTileLayer;
-}(BaseTileLayer);
-//# sourceMappingURL=tmsTileLayer.js.map
+}(BaseTileLayer);

package/es/tile/utils.js

@@ -87,7 +87,9 @@ export function readRasterValue(tile, mapService, x, y) {
   var tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
   var tilePixelWidth = tileMaxXY.x - tileXY.x;
   var tilePixelHeight = tileXY.y - tileMaxXY.y;
-  var pos = [(x - tileXY.x) / tilePixelWidth, (y - tileMaxXY.y) / tilePixelHeight];
+  var pos = [(x - tileXY.x) / tilePixelWidth, // x
+  (y - tileMaxXY.y) / tilePixelHeight // y
+  ];
   var tileWidth = (tile === null || tile === void 0 ? void 0 : (_tile$data = tile.data) === null || _tile$data === void 0 ? void 0 : _tile$data.width) || 1;
   var tileHeight = (tile === null || tile === void 0 ? void 0 : (_tile$data2 = tile.data) === null || _tile$data2 === void 0 ? void 0 : _tile$data2.height) || 1;
   var indexX = Math.floor(pos[0] * tileWidth);
@@ -115,11 +117,11 @@ export function readPixel(x, y, rendererService) {
 
   var pickedColors = readPixels({
     x: Math.floor(xInDevicePixel),
+    // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
     y: Math.floor(height - (y + 1) * DOM.DPR),
     width: 1,
     height: 1,
     data: new Uint8Array(1 * 1 * 4)
   });
   return pickedColors;
-}
-//# sourceMappingURL=utils.js.map
+}

package/es/utils/blend.js

@@ -51,5 +51,4 @@ export var BlendTypes = (_BlendTypes = {}, _defineProperty(_BlendTypes, BlendTyp
   equation: {
     rgb: gl.MIN_EXT
   }
-}), _BlendTypes);
-//# sourceMappingURL=blend.js.map
+}), _BlendTypes);

package/es/utils/collision-index.js

@@ -2,32 +2,24 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// @mapbox/grid-index 并没有类似 hitTest 的单纯获取碰撞检测结果的方法，query 将导致计算大量多余的包围盒结果，因此使用改良版
 import { mat4, vec4 } from 'gl-matrix';
-import GridIndex from './grid-index';
+import GridIndex from "./grid-index";
+/**
+ * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
+ * @see https://zhuanlan.zhihu.com/p/74373214
+ */
 
-var CollisionIndex = function () {
+var CollisionIndex = /*#__PURE__*/function () {
   function CollisionIndex(width, height) {
     _classCallCheck(this, CollisionIndex);
 
-    _defineProperty(this, "width", void 0);
-
-    _defineProperty(this, "height", void 0);
-
-    _defineProperty(this, "grid", void 0);
-
     _defineProperty(this, "viewportPadding", 100);
 
-    _defineProperty(this, "screenRightBoundary", void 0);
-
-    _defineProperty(this, "screenBottomBoundary", void 0);
-
-    _defineProperty(this, "gridRightBoundary", void 0);
-
-    _defineProperty(this, "gridBottomBoundary", void 0);
-
     this.width = width;
     this.height = height;
-    this.viewportPadding = Math.max(width, height);
+    this.viewportPadding = Math.max(width, height); // 创建网格索引
+
     this.grid = new GridIndex(width + this.viewportPadding, height + this.viewportPadding, 25);
     this.screenRightBoundary = width + this.viewportPadding;
     this.screenBottomBoundary = height + this.viewportPadding;
@@ -38,6 +30,11 @@ var CollisionIndex = function () {
   _createClass(CollisionIndex, [{
     key: "placeCollisionBox",
     value: function placeCollisionBox(collisionBox) {
+      // const projectedPoint = this.project(
+      //   mvpMatrix,
+      //   collisionBox.anchorPointX,
+      //   collisionBox.anchorPointY,
+      // );
       var tlX = collisionBox.x1 + collisionBox.anchorPointX + this.viewportPadding;
       var tlY = collisionBox.y1 + collisionBox.anchorPointY + this.viewportPadding;
       var brX = collisionBox.x2 + collisionBox.anchorPointX + this.viewportPadding;
@@ -61,18 +58,37 @@ var CollisionIndex = function () {
       };
       this.grid.insert(key, box[0], box[1], box[2], box[3]);
     }
+    /**
+     * 后续碰撞检测都需要投影到 viewport 坐标系
+     * @param {THREE.Matrix4} mvpMatrix mvp矩阵
+     * @param {number} x P20 平面坐标X
+     * @param {number} y P20 平面坐标Y
+     * @return {Point} projectedPoint
+     */
+
   }, {
     key: "project",
     value: function project(mvpMatrix, x, y) {
       var point = vec4.fromValues(x, y, 0, 1);
-      var out = vec4.create();
+      var out = vec4.create(); // @ts-ignore
+
       var mat = mat4.fromValues.apply(mat4, _toConsumableArray(mvpMatrix));
-      vec4.transformMat4(out, point, mat);
+      vec4.transformMat4(out, point, mat); // GL 坐标系[-1, 1] -> viewport 坐标系[width, height]
+
       return {
         x: (out[0] / out[3] + 1) / 2 * this.width + this.viewportPadding,
         y: (-out[1] / out[3] + 1) / 2 * this.height + this.viewportPadding
       };
     }
+    /**
+     * 判断包围盒是否在整个网格内，需要加上 buffer
+     * @param {number} x1 x1
+     * @param {number} y1 y1
+     * @param {number} x2 x2
+     * @param {number} y2 y2
+     * @return {Point} isInside
+     */
+
   }, {
     key: "isInsideGrid",
     value: function isInsideGrid(x1, y1, x2, y2) {
@@ -83,5 +99,4 @@ var CollisionIndex = function () {
   return CollisionIndex;
 }();
 
-export { CollisionIndex as default };
-//# sourceMappingURL=collision-index.js.map
+export { CollisionIndex as default };

package/es/utils/dataMappingStyle.js

@@ -1,91 +1,147 @@
-import _isString from "lodash/isString";
-import _isNumber from "lodash/isNumber";
-import _isFunction from "lodash/isFunction";
+import { isFunction, isNumber, isString } from 'lodash';
+/**
+ * 该文件中的工具方法主要用于对 style 中的属性进行 数据映射
+ */
+
+// 画布默认的宽度
 var WIDTH = 1024;
+/**
+ * 当 style 中使用的 opacity 不是常数的时候根据数据进行映射
+ * @param field
+ * @param values
+ * @param updateOptions
+ */
 
 function registerStyleAttribute(fieldName, layer, field, values, updateOptions) {
   layer.updateStyleAttribute(fieldName, field, values, updateOptions);
 }
+/**
+ * 当样式发生变化时判断是否需要进行数据映射
+ * @param configToUpdate
+ * @param layer
+ */
+
 
 function handleStyleDataMapping(configToUpdate, layer) {
   if (configToUpdate.opacity) {
+    // 处理 style 中 opacity 属性的数据映射
     handleStyleFloat('opacity', layer, configToUpdate.opacity);
   }
 
   if (configToUpdate.strokeWidth) {
+    // 处理 style 中 strokeWidth 属性的数据映射
     handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
   }
 
   if (configToUpdate.strokeOpacity) {
+    // 处理 style 中 strokeOpacity 属性的数据映射
     handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
   }
 
   if (configToUpdate.stroke) {
+    // 处理 style 中 stroke (strokeColor) 属性的数据映射
     handleStyleColor('stroke', layer, configToUpdate.stroke);
   }
 
   if (configToUpdate.offsets) {
+    // 处理 style 中 offsets 属性的数据映射
     handleStyleOffsets('offsets', layer, configToUpdate.offsets);
   }
 
   if (configToUpdate.textOffset) {
+    // 处理 style 中 textOffset 属性的数据映射
     handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
   }
 
   if (configToUpdate.thetaOffset) {
+    // 处理 style 中 thetaOffset 属性的数据映射
     handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
   }
 }
+/**
+ * 根据传入参数 float 的类型和值做相应的操作
+ */
+
 
 function handleStyleFloat(fieldName, layer, styleFloat) {
-  if (_isString(styleFloat)) {
+  if (isString(styleFloat)) {
+    // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleFloat, function (value) {
       return value;
     });
-  } else if (_isNumber(styleFloat)) {
+  } else if (isNumber(styleFloat)) {
+    // 传入 number、默认值处理
     registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
   } else if (Array.isArray(styleFloat) && styleFloat.length === 2) {
-    if (_isString(styleFloat[0]) && _isFunction(styleFloat[1])) {
+    // 传入的 styleFloat 是长度为 2 的数组
+    if (isString(styleFloat[0]) && isFunction(styleFloat[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
-    } else if (_isString(styleFloat[0]) && Array.isArray(styleFloat[1]) && _isNumber(styleFloat[1][0]) && _isNumber(styleFloat[1][1])) {
+    } else if (isString(styleFloat[0]) && Array.isArray(styleFloat[1]) && isNumber(styleFloat[1][0]) && isNumber(styleFloat[1][1])) {
+      // 字段映射 [string, [start: number, end: number]]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
     } else {
+      // 兼容
       registerStyleAttribute(fieldName, layer, [1.0], undefined);
     }
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, [1.0], undefined);
   }
 }
+/**
+ * 根据传入参数 offsets 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleOffsets
+ */
+
 
 function handleStyleOffsets(fieldName, layer, styleOffsets) {
-  if (_isString(styleOffsets)) {
+  if (isString(styleOffsets)) {
+    // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
       return value;
     });
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && _isString(styleOffsets[0]) && _isFunction(styleOffsets[1])) {
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && isString(styleOffsets[0]) && isFunction(styleOffsets[1])) {
+    // 字段回调函数 [string, callback]
     registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]);
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && _isNumber(styleOffsets[0]) && _isNumber(styleOffsets[1])) {
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && isNumber(styleOffsets[0]) && isNumber(styleOffsets[1])) {
+    // 字段映射 [string, [start: number, end: number]]
     registerStyleAttribute(fieldName, layer, styleOffsets, undefined);
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, [0, 0], undefined);
   }
 }
+/**
+ * 根据传入参数 stroke / color 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleColor
+ */
+
 
 function handleStyleColor(fieldName, layer, styleColor) {
-  if (_isString(styleColor)) {
+  if (isString(styleColor)) {
+    // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
     registerStyleAttribute(fieldName, layer, styleColor, undefined);
   } else if (Array.isArray(styleColor) && styleColor.length === 2) {
-    if (_isString(styleColor[0]) && _isFunction(styleColor[1])) {
+    // 传入的 styleColor 是长度为 2 的数组
+    if (isString(styleColor[0]) && isFunction(styleColor[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
-    } else if (_isString(styleColor[0]) && Array.isArray(styleColor[1]) && styleColor[1].length > 0) {
+    } else if (isString(styleColor[0]) && Array.isArray(styleColor[1]) && styleColor[1].length > 0) {
+      // 字段映射 [string, [start: string, end: string]]
       registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
     } else {
+      // 兼容
       registerStyleAttribute(fieldName, layer, '#fff', undefined);
     }
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, '#fff', undefined);
   }
 }
 
-export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };
-//# sourceMappingURL=dataMappingStyle.js.map
+export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };

package/es/utils/extrude_polyline.d.ts

@@ -31,6 +31,20 @@ export default class ExtrudePolyline {
     private totalDistance;
     private currentIndex;
     constructor(opts?: Partial<IExtrudeLineOption>);
+    simpleExtrude(points: number[][]): {
+        positions: number[];
+        indices: number[];
+        normals: number[];
+        startIndex: number;
+        indexes: number[];
+    };
+    simpleExtrude_gaode2(points: number[][], originPoints: number[][]): {
+        positions: number[];
+        indices: number[];
+        normals: number[];
+        startIndex: number;
+        indexes: number[];
+    };
     extrude_gaode2(points: number[][], originPoints: number[][]): {
         positions: number[];
         indices: number[];
@@ -45,6 +59,7 @@ export default class ExtrudePolyline {
         startIndex: number;
         indexes: number[];
     };
+    private simpleSegment;
     private segment_gaode2;
     private segment;
     private extrusions;