@antv/l7-layers 2.9.25-alpha.0 → 2.9.26-alpha.1

package/lib/utils/collision-index.js

@@ -1,75 +1,118 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/utils/collision-index.ts
-var collision_index_exports = {};
-__export(collision_index_exports, {
-  default: () => CollisionIndex
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(collision_index_exports);
-var import_gl_matrix = require("gl-matrix");
-var import_grid_index = __toESM(require("./grid-index"));
-var CollisionIndex = class {
-  constructor(width, height) {
-    this.viewportPadding = 100;
+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 _glMatrix = require("gl-matrix");
+
+var _gridIndex = _interopRequireDefault(require("./grid-index"));
+
+// @mapbox/grid-index 并没有类似 hitTest 的单纯获取碰撞检测结果的方法，query 将导致计算大量多余的包围盒结果，因此使用改良版
+
+/**
+ * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
+ * @see https://zhuanlan.zhihu.com/p/74373214
+ */
+var CollisionIndex = /*#__PURE__*/function () {
+  function CollisionIndex(width, height) {
+    (0, _classCallCheck2.default)(this, CollisionIndex);
+    (0, _defineProperty2.default)(this, "viewportPadding", 100);
     this.width = width;
     this.height = height;
-    this.viewportPadding = Math.max(width, height);
-    this.grid = new import_grid_index.default(width + this.viewportPadding, height + this.viewportPadding, 25);
+    this.viewportPadding = Math.max(width, height); // 创建网格索引
+
+    this.grid = new _gridIndex.default(width + this.viewportPadding, height + this.viewportPadding, 25);
     this.screenRightBoundary = width + this.viewportPadding;
     this.screenBottomBoundary = height + this.viewportPadding;
     this.gridRightBoundary = width + 2 * this.viewportPadding;
     this.gridBottomBoundary = height + 2 * this.viewportPadding;
   }
-  placeCollisionBox(collisionBox) {
-    const tlX = collisionBox.x1 + collisionBox.anchorPointX + this.viewportPadding;
-    const tlY = collisionBox.y1 + collisionBox.anchorPointY + this.viewportPadding;
-    const brX = collisionBox.x2 + collisionBox.anchorPointX + this.viewportPadding;
-    const brY = collisionBox.y2 + collisionBox.anchorPointY + this.viewportPadding;
-    if (!this.isInsideGrid(tlX, tlY, brX, brY) || this.grid.hitTest(tlX, tlY, brX, brY)) {
+
+  (0, _createClass2.default)(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;
+      var brY = collisionBox.y2 + collisionBox.anchorPointY + this.viewportPadding;
+
+      if (!this.isInsideGrid(tlX, tlY, brX, brY) || this.grid.hitTest(tlX, tlY, brX, brY)) {
+        return {
+          box: []
+        };
+      }
+
       return {
-        box: []
+        box: [tlX, tlY, brX, brY]
       };
     }
-    return {
-      box: [tlX, tlY, brX, brY]
-    };
-  }
-  insertCollisionBox(box, featureIndex) {
-    const key = { featureIndex };
-    this.grid.insert(key, box[0], box[1], box[2], box[3]);
-  }
-  project(mvpMatrix, x, y) {
-    const point = import_gl_matrix.vec4.fromValues(x, y, 0, 1);
-    const out = import_gl_matrix.vec4.create();
-    const mat = import_gl_matrix.mat4.fromValues(...mvpMatrix);
-    import_gl_matrix.vec4.transformMat4(out, point, mat);
-    return {
-      x: (out[0] / out[3] + 1) / 2 * this.width + this.viewportPadding,
-      y: (-out[1] / out[3] + 1) / 2 * this.height + this.viewportPadding
-    };
-  }
-  isInsideGrid(x1, y1, x2, y2) {
-    return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+  }, {
+    key: "insertCollisionBox",
+    value: function insertCollisionBox(box, featureIndex) {
+      var key = {
+        featureIndex: featureIndex
+      };
+      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 = _glMatrix.vec4.fromValues(x, y, 0, 1);
+
+      var out = _glMatrix.vec4.create(); // @ts-ignore
+
+
+      var mat = _glMatrix.mat4.fromValues.apply(_glMatrix.mat4, (0, _toConsumableArray2.default)(mvpMatrix));
+
+      _glMatrix.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) {
+      return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
+    }
+  }]);
+  return CollisionIndex;
+}();
+
+exports.default = CollisionIndex;

package/lib/utils/dataMappingStyle.js

@@ -1,106 +1,151 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/utils/dataMappingStyle.ts
-var dataMappingStyle_exports = {};
-__export(dataMappingStyle_exports, {
-  handleStyleColor: () => handleStyleColor,
-  handleStyleDataMapping: () => handleStyleDataMapping,
-  handleStyleFloat: () => handleStyleFloat
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(dataMappingStyle_exports);
-var import_lodash = require("lodash");
+exports.handleStyleColor = handleStyleColor;
+exports.handleStyleDataMapping = handleStyleDataMapping;
+exports.handleStyleFloat = handleStyleFloat;
+
+var _lodash = require("lodash");
+
+// 画布默认的宽度
+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) {
-    handleStyleFloat("opacity", layer, configToUpdate.opacity);
+    // 处理 style 中 opacity 属性的数据映射
+    handleStyleFloat('opacity', layer, configToUpdate.opacity);
   }
+
   if (configToUpdate.strokeWidth) {
-    handleStyleFloat("strokeWidth", layer, configToUpdate.strokeWidth);
+    // 处理 style 中 strokeWidth 属性的数据映射
+    handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
   }
+
   if (configToUpdate.strokeOpacity) {
-    handleStyleFloat("strokeOpacity", layer, configToUpdate.strokeOpacity);
+    // 处理 style 中 strokeOpacity 属性的数据映射
+    handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
   }
+
   if (configToUpdate.stroke) {
-    handleStyleColor("stroke", layer, configToUpdate.stroke);
+    // 处理 style 中 stroke (strokeColor) 属性的数据映射
+    handleStyleColor('stroke', layer, configToUpdate.stroke);
   }
+
   if (configToUpdate.offsets) {
-    handleStyleOffsets("offsets", layer, configToUpdate.offsets);
+    // 处理 style 中 offsets 属性的数据映射
+    handleStyleOffsets('offsets', layer, configToUpdate.offsets);
   }
+
   if (configToUpdate.textOffset) {
-    handleStyleOffsets("textOffset", layer, configToUpdate.textOffset);
+    // 处理 style 中 textOffset 属性的数据映射
+    handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
   }
+
   if (configToUpdate.thetaOffset) {
-    handleStyleFloat("thetaOffset", layer, configToUpdate.thetaOffset);
+    // 处理 style 中 thetaOffset 属性的数据映射
+    handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
   }
 }
+/**
+ * 根据传入参数 float 的类型和值做相应的操作
+ */
+
+
 function handleStyleFloat(fieldName, layer, styleFloat) {
-  if ((0, import_lodash.isString)(styleFloat)) {
-    registerStyleAttribute(fieldName, layer, styleFloat, (value) => {
+  if ((0, _lodash.isString)(styleFloat)) {
+    // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
+    registerStyleAttribute(fieldName, layer, styleFloat, function (value) {
       return value;
     });
-  } else if ((0, import_lodash.isNumber)(styleFloat)) {
-    registerStyleAttribute(fieldName, layer, [styleFloat], void 0);
+  } else if ((0, _lodash.isNumber)(styleFloat)) {
+    // 传入 number、默认值处理
+    registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
   } else if (Array.isArray(styleFloat) && styleFloat.length === 2) {
-    if ((0, import_lodash.isString)(styleFloat[0]) && (0, import_lodash.isFunction)(styleFloat[1])) {
+    // 传入的 styleFloat 是长度为 2 的数组
+    if ((0, _lodash.isString)(styleFloat[0]) && (0, _lodash.isFunction)(styleFloat[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
-    } else if ((0, import_lodash.isString)(styleFloat[0]) && Array.isArray(styleFloat[1]) && (0, import_lodash.isNumber)(styleFloat[1][0]) && (0, import_lodash.isNumber)(styleFloat[1][1])) {
+    } else if ((0, _lodash.isString)(styleFloat[0]) && Array.isArray(styleFloat[1]) && (0, _lodash.isNumber)(styleFloat[1][0]) && (0, _lodash.isNumber)(styleFloat[1][1])) {
+      // 字段映射 [string, [start: number, end: number]]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
     } else {
-      registerStyleAttribute(fieldName, layer, [1], void 0);
+      // 兼容
+      registerStyleAttribute(fieldName, layer, [1.0], undefined);
     }
   } else {
-    registerStyleAttribute(fieldName, layer, [1], void 0);
+    // 兼容
+    registerStyleAttribute(fieldName, layer, [1.0], undefined);
   }
 }
+/**
+ * 根据传入参数 offsets 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleOffsets
+ */
+
+
 function handleStyleOffsets(fieldName, layer, styleOffsets) {
-  if ((0, import_lodash.isString)(styleOffsets)) {
-    registerStyleAttribute(fieldName, layer, styleOffsets, (value) => {
+  if ((0, _lodash.isString)(styleOffsets)) {
+    // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
+    registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
       return value;
     });
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && (0, import_lodash.isString)(styleOffsets[0]) && (0, import_lodash.isFunction)(styleOffsets[1])) {
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && (0, _lodash.isString)(styleOffsets[0]) && (0, _lodash.isFunction)(styleOffsets[1])) {
+    // 字段回调函数 [string, callback]
     registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]);
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && (0, import_lodash.isNumber)(styleOffsets[0]) && (0, import_lodash.isNumber)(styleOffsets[1])) {
-    registerStyleAttribute(fieldName, layer, styleOffsets, void 0);
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && (0, _lodash.isNumber)(styleOffsets[0]) && (0, _lodash.isNumber)(styleOffsets[1])) {
+    // 字段映射 [string, [start: number, end: number]]
+    registerStyleAttribute(fieldName, layer, styleOffsets, undefined);
   } else {
-    registerStyleAttribute(fieldName, layer, [0, 0], void 0);
+    // 兼容
+    registerStyleAttribute(fieldName, layer, [0, 0], undefined);
   }
 }
+/**
+ * 根据传入参数 stroke / color 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleColor
+ */
+
+
 function handleStyleColor(fieldName, layer, styleColor) {
-  if ((0, import_lodash.isString)(styleColor)) {
-    registerStyleAttribute(fieldName, layer, styleColor, void 0);
+  if ((0, _lodash.isString)(styleColor)) {
+    // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
+    registerStyleAttribute(fieldName, layer, styleColor, undefined);
   } else if (Array.isArray(styleColor) && styleColor.length === 2) {
-    if ((0, import_lodash.isString)(styleColor[0]) && (0, import_lodash.isFunction)(styleColor[1])) {
+    // 传入的 styleColor 是长度为 2 的数组
+    if ((0, _lodash.isString)(styleColor[0]) && (0, _lodash.isFunction)(styleColor[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
-    } else if ((0, import_lodash.isString)(styleColor[0]) && Array.isArray(styleColor[1]) && styleColor[1].length > 0) {
+    } else if ((0, _lodash.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", void 0);
+      // 兼容
+      registerStyleAttribute(fieldName, layer, '#fff', undefined);
     }
   } else {
-    registerStyleAttribute(fieldName, layer, "#fff", void 0);
+    // 兼容
+    registerStyleAttribute(fieldName, layer, '#fff', undefined);
   }
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  handleStyleColor,
-  handleStyleDataMapping,
-  handleStyleFloat
-});
+}