@antv/l7-layers 2.21.1 → 2.21.3

package/lib/tile/tile/VectorTile.js

@@ -5,136 +5,91 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _Tile2 = _interopRequireDefault(require("./Tile"));
+var _Tile = _interopRequireDefault(require("./Tile"));
 var _util = require("./util");
-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; } }
-var VectorTile = exports.default = /*#__PURE__*/function (_Tile) {
-  (0, _inherits2.default)(VectorTile, _Tile);
-  var _super = _createSuper(VectorTile);
-  function VectorTile() {
-    (0, _classCallCheck2.default)(this, VectorTile);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(VectorTile, [{
-    key: "initTileLayer",
-    value: function () {
-      var _initTileLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var attributes, layerOptions, vectorLayer, sourceOptions, layer;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              attributes = this.parent.getLayerAttributeConfig();
-              layerOptions = this.getLayerOptions();
-              vectorLayer = (0, _util.getTileLayer)(this.parent.type);
-              sourceOptions = this.getSourceOption();
-              if (sourceOptions) {
-                _context.next = 8;
-                break;
-              }
-              this.isLoaded = true;
-              this.emit('loaded');
-              return _context.abrupt("return");
-            case 8:
-              layer = new vectorLayer((0, _objectSpread2.default)({}, layerOptions)).source(sourceOptions.data, sourceOptions.options); // 初始化数据映射
-              Object.keys(attributes).forEach(function (type) {
-                var _attributes$attr, _attributes$attr2;
-                var attr = type;
-                // @ts-ignore
-                layer[attr]((_attributes$attr = attributes[attr]) === null || _attributes$attr === void 0 ? void 0 : _attributes$attr.field, (_attributes$attr2 = attributes[attr]) === null || _attributes$attr2 === void 0 ? void 0 : _attributes$attr2.values);
-              });
-              _context.next = 12;
-              return this.addLayer(layer);
-            case 12:
-              if (!layerOptions.tileMask) {
-                _context.next = 15;
-                break;
-              }
-              _context.next = 15;
-              return this.addTileMask();
-            case 15:
-              this.setLayerMinMaxZoom(layer);
-              this.isLoaded = true;
-              this.emit('loaded');
-            case 18:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function initTileLayer() {
-        return _initTileLayer.apply(this, arguments);
+class VectorTile extends _Tile.default {
+  initTileLayer() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const attributes = _this.parent.getLayerAttributeConfig();
+      const layerOptions = _this.getLayerOptions();
+      const vectorLayer = (0, _util.getTileLayer)(_this.parent.type);
+      const sourceOptions = _this.getSourceOption();
+      if (!sourceOptions) {
+        _this.isLoaded = true;
+        _this.emit('loaded');
+        return;
+      }
+      const layer = new vectorLayer((0, _objectSpread2.default)({}, layerOptions)).source(sourceOptions.data, sourceOptions.options);
+
+      // 初始化数据映射
+      Object.keys(attributes).forEach(type => {
+        var _attributes$attr, _attributes$attr2;
+        const attr = type;
+        // @ts-ignore
+        layer[attr]((_attributes$attr = attributes[attr]) === null || _attributes$attr === void 0 ? void 0 : _attributes$attr.field, (_attributes$attr2 = attributes[attr]) === null || _attributes$attr2 === void 0 ? void 0 : _attributes$attr2.values);
+      });
+      yield _this.addLayer(layer);
+      if (layerOptions.tileMask) {
+        // 瓦片数据裁剪
+        yield _this.addTileMask();
       }
-      return initTileLayer;
-    }()
-  }, {
-    key: "getSourceOption",
-    value: function getSourceOption() {
-      var rawSource = this.parent.getSource();
-      var _this$parent$getLayer = this.parent.getLayerConfig(),
-        _this$parent$getLayer2 = _this$parent$getLayer.sourceLayer,
-        sourceLayer = _this$parent$getLayer2 === void 0 ? 'defaultLayer' : _this$parent$getLayer2,
-        _this$parent$getLayer3 = _this$parent$getLayer.featureId,
-        featureId = _this$parent$getLayer3 === void 0 ? 'id' : _this$parent$getLayer3;
-      var features = this.getFeatures(sourceLayer);
-      return {
-        data: {
-          type: 'FeatureCollection',
-          features: features
+      _this.setLayerMinMaxZoom(layer);
+      _this.isLoaded = true;
+      _this.emit('loaded');
+    })();
+  }
+  getSourceOption() {
+    const rawSource = this.parent.getSource();
+    const {
+      sourceLayer = 'defaultLayer',
+      featureId = 'id'
+    } = this.parent.getLayerConfig();
+    const features = this.getFeatures(sourceLayer);
+    return {
+      data: {
+        type: 'FeatureCollection',
+        features
+      },
+      options: {
+        parser: {
+          type: 'geojson',
+          featureId
         },
-        options: {
-          parser: {
-            type: 'geojson',
-            featureId: featureId
-          },
-          transforms: rawSource.transforms
-        }
-      };
-    }
-  }, {
-    key: "setLayerMinMaxZoom",
-    value: function setLayerMinMaxZoom(layer) {
-      // 文本图层设置，可见范围
-      if (layer.getModelType() === 'text') {
-        layer.updateLayerConfig({
-          maxZoom: this.z + 1,
-          minZoom: this.z - 1
-        });
+        transforms: rawSource.transforms
       }
+    };
+  }
+  setLayerMinMaxZoom(layer) {
+    // 文本图层设置，可见范围
+    if (layer.getModelType() === 'text') {
+      layer.updateLayerConfig({
+        maxZoom: this.z + 1,
+        minZoom: this.z - 1
+      });
     }
-    // 获取瓦片数据
-  }, {
-    key: "getFeatures",
-    value: function getFeatures(sourceLayer) {
-      var source = this.sourceTile.data;
-      return source.getTileData(sourceLayer);
-    }
+  }
+  // 获取瓦片数据
 
-    /**
-     * 在一个 Tile 中可能存在一个相同 ID 的 feature
-     * @param id
-     * @returns
-     */
-  }, {
-    key: "getFeatureById",
-    value: function getFeatureById(id) {
-      var layer = this.getMainLayer();
-      if (!layer) {
-        return [];
-      }
-      var res = layer.getSource().data.dataArray.filter(function (d) {
-        return d._id === id;
-      });
-      return res;
+  getFeatures(sourceLayer) {
+    const source = this.sourceTile.data;
+    return source.getTileData(sourceLayer);
+  }
+
+  /**
+   * 在一个 Tile 中可能存在一个相同 ID 的 feature
+   * @param id
+   * @returns
+   */
+  getFeatureById(id) {
+    const layer = this.getMainLayer();
+    if (!layer) {
+      return [];
     }
-  }]);
-  return VectorTile;
-}(_Tile2.default);
+    const res = layer.getSource().data.dataArray.filter(d => d._id === id);
+    return res;
+  }
+}
+exports.default = VectorTile;

package/lib/tile/tile/index.d.ts

@@ -0,0 +1,12 @@
+import type { ILayer } from '@antv/l7-core';
+import DebugTile from './DebugTile';
+import ImageTile from './ImageTile';
+import MaskLayer from './MaskTile';
+import RasterRGBTile from './RasterRGBTile';
+import RasterTerrainRGBTile from './RasterTerrainRGBTile';
+import RasterTile from './RasterTile';
+import VectorTile from './VectorTile';
+export type TileType = 'VectorTile' | 'DebugTile' | 'PolygonLayer' | 'PointLayer' | 'LineLayer' | 'RasterLayer' | 'image' | 'MaskLayer' | 'TileDebugLayer';
+export declare function getTileFactory(layer: ILayer): typeof VectorTile | typeof DebugTile | typeof MaskLayer | typeof RasterRGBTile | typeof RasterTile | typeof RasterTerrainRGBTile | typeof ImageTile;
+export * from '../interface';
+export * from './Tile';

package/lib/tile/tile/index.js

@@ -23,7 +23,7 @@ Object.keys(_interface).forEach(function (key) {
   if (key in exports && exports[key] === _interface[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _interface[key];
     }
   });
@@ -35,13 +35,13 @@ Object.keys(_Tile).forEach(function (key) {
   if (key in exports && exports[key] === _Tile[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _Tile[key];
     }
   });
 });
 function getTileFactory(layer) {
-  var tileType = layer.type;
+  const tileType = layer.type;
   switch (tileType) {
     case 'PolygonLayer':
       return _VectorTile.default;
@@ -54,7 +54,9 @@ function getTileFactory(layer) {
     case 'MaskLayer':
       return _MaskTile.default;
     case 'RasterLayer':
-      var dataType = layer.getSource().parser.dataType;
+      const {
+        dataType
+      } = layer.getSource().parser;
       switch (dataType) {
         case _l7Core.RasterTileType.RGB:
         case _l7Core.RasterTileType.CUSTOMRGB:

package/lib/tile/tile/util.d.ts

@@ -0,0 +1,5 @@
+import LineLayer from '../../line';
+import PointLayer from '../../point/index';
+import PolygonLayer from '../../polygon';
+export declare function getTileLayer(type: string): typeof PolygonLayer | typeof LineLayer | typeof PointLayer;
+export declare function isNeedMask(type: string): boolean;

package/lib/tile/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const ProxyFuncs: string[];

package/lib/tile/utils/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ProxyFuncs = void 0;
 // TileLayer 需要代理的子图层的方法
 // 一般都是在 BaseLayer 上的方法
-var ProxyFuncs = exports.ProxyFuncs = [
+const ProxyFuncs = exports.ProxyFuncs = [
 /**
  * 1. 需要作用到所属子图层才会生效的方法
  * 2. 不需要主动重新创建 model 的方法

package/lib/tile/utils/utils.d.ts

@@ -0,0 +1,8 @@
+import type { ILayer } from '@antv/l7-core';
+export declare const tileVectorParser: string[];
+/**
+ * 判断当前图层是否是瓦片图层
+ * @param layer
+ * @returns
+ */
+export declare function isTileGroup(layer: ILayer): boolean;

package/lib/tile/utils/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isTileGroup = isTileGroup;
 exports.tileVectorParser = void 0;
-var tileVectorParser = exports.tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
+const tileVectorParser = exports.tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
 
 /**
  * 判断当前图层是否是瓦片图层
@@ -13,6 +13,6 @@ var tileVectorParser = exports.tileVectorParser = ['mvt', 'geojsonvt', 'testTile
  * @returns
  */
 function isTileGroup(layer) {
-  var source = layer.getSource();
+  const source = layer.getSource();
   return tileVectorParser.includes(source.parser.type);
 }

package/lib/utils/blend.d.ts

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

package/lib/utils/blend.js

@@ -1,58 +1,63 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlendTypes = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
-var BlendTypes = exports.BlendTypes = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _l7Core.BlendType.additive, {
-  enable: true,
-  func: {
-    srcRGB: _l7Core.gl.ONE,
-    dstRGB: _l7Core.gl.ONE,
-    srcAlpha: 1,
-    dstAlpha: 1
-  }
-}), _l7Core.BlendType.none, {
-  enable: false
-}), _l7Core.BlendType.normal, {
-  enable: true,
-  func: {
-    srcRGB: _l7Core.gl.SRC_ALPHA,
-    dstRGB: _l7Core.gl.ONE_MINUS_SRC_ALPHA,
-    srcAlpha: 1,
-    dstAlpha: 1
-  }
-}), _l7Core.BlendType.subtractive, {
-  enable: true,
-  func: {
-    srcRGB: _l7Core.gl.ONE,
-    dstRGB: _l7Core.gl.ONE,
-    srcAlpha: _l7Core.gl.ZERO,
-    dstAlpha: _l7Core.gl.ONE_MINUS_SRC_COLOR
+const BlendTypes = exports.BlendTypes = {
+  [_l7Core.BlendType.additive]: {
+    enable: true,
+    func: {
+      srcRGB: _l7Core.gl.ONE,
+      dstRGB: _l7Core.gl.ONE,
+      srcAlpha: 1,
+      dstAlpha: 1
+    }
   },
-  equation: {
-    rgb: _l7Core.gl.FUNC_SUBTRACT,
-    alpha: _l7Core.gl.FUNC_SUBTRACT
-  }
-}), _l7Core.BlendType.max, {
-  enable: true,
-  func: {
-    srcRGB: _l7Core.gl.ONE,
-    dstRGB: _l7Core.gl.ONE
+  [_l7Core.BlendType.none]: {
+    enable: false
   },
-  equation: {
-    rgb: _l7Core.gl.MAX_EXT
-  }
-}), _l7Core.BlendType.min, {
-  enable: true,
-  func: {
-    srcRGB: _l7Core.gl.ONE,
-    dstRGB: _l7Core.gl.ONE
+  [_l7Core.BlendType.normal]: {
+    enable: true,
+    func: {
+      srcRGB: _l7Core.gl.SRC_ALPHA,
+      dstRGB: _l7Core.gl.ONE_MINUS_SRC_ALPHA,
+      srcAlpha: 1,
+      dstAlpha: 1
+    }
+  },
+  [_l7Core.BlendType.subtractive]: {
+    enable: true,
+    func: {
+      srcRGB: _l7Core.gl.ONE,
+      dstRGB: _l7Core.gl.ONE,
+      srcAlpha: _l7Core.gl.ZERO,
+      dstAlpha: _l7Core.gl.ONE_MINUS_SRC_COLOR
+    },
+    equation: {
+      rgb: _l7Core.gl.FUNC_SUBTRACT,
+      alpha: _l7Core.gl.FUNC_SUBTRACT
+    }
+  },
+  [_l7Core.BlendType.max]: {
+    enable: true,
+    func: {
+      srcRGB: _l7Core.gl.ONE,
+      dstRGB: _l7Core.gl.ONE
+    },
+    equation: {
+      rgb: _l7Core.gl.MAX_EXT
+    }
   },
-  equation: {
-    rgb: _l7Core.gl.MIN_EXT
+  [_l7Core.BlendType.min]: {
+    enable: true,
+    func: {
+      srcRGB: _l7Core.gl.ONE,
+      dstRGB: _l7Core.gl.ONE
+    },
+    equation: {
+      rgb: _l7Core.gl.MIN_EXT
+    }
   }
-});
+};

package/lib/utils/collision-index.d.ts

@@ -0,0 +1,47 @@
+export interface ICollisionBox {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    anchorPointX: number;
+    anchorPointY: number;
+}
+/**
+ * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
+ * @see https://zhuanlan.zhihu.com/p/74373214
+ */
+export default class CollisionIndex {
+    private width;
+    private height;
+    private grid;
+    private viewportPadding;
+    private screenRightBoundary;
+    private screenBottomBoundary;
+    private gridRightBoundary;
+    private gridBottomBoundary;
+    constructor(width: number, height: number);
+    placeCollisionBox(collisionBox: ICollisionBox): {
+        box: number[];
+    };
+    insertCollisionBox(box: number[], featureIndex: number): void;
+    /**
+     * 后续碰撞检测都需要投影到 viewport 坐标系
+     * @param {THREE.Matrix4} mvpMatrix mvp矩阵
+     * @param {number} x P20 平面坐标X
+     * @param {number} y P20 平面坐标Y
+     * @return {Point} projectedPoint
+     */
+    project(mvpMatrix: number[], x: number, y: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * 判断包围盒是否在整个网格内，需要加上 buffer
+     * @param {number} x1 x1
+     * @param {number} y1 y1
+     * @param {number} x2 x2
+     * @param {number} y2 y2
+     * @return {Point} isInside
+     */
+    isInsideGrid(x1: number, y1: number, x2: number, y2: number): boolean;
+}

package/lib/utils/collision-index.js

@@ -5,21 +5,25 @@ 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 _glMatrix = require("gl-matrix");
 var _gridIndex = _interopRequireDefault(require("./grid-index"));
 // @mapbox/grid-index 并没有类似 hitTest 的单纯获取碰撞检测结果的方法，query 将导致计算大量多余的包围盒结果，因此使用改良版
+
 /**
  * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
  * @see https://zhuanlan.zhihu.com/p/74373214
  */
-var CollisionIndex = exports.default = /*#__PURE__*/function () {
-  function CollisionIndex(width, height) {
-    (0, _classCallCheck2.default)(this, CollisionIndex);
+class CollisionIndex {
+  constructor(width, height) {
+    (0, _defineProperty2.default)(this, "width", void 0);
+    (0, _defineProperty2.default)(this, "height", void 0);
+    (0, _defineProperty2.default)(this, "grid", void 0);
     (0, _defineProperty2.default)(this, "viewportPadding", 100);
+    (0, _defineProperty2.default)(this, "screenRightBoundary", void 0);
+    (0, _defineProperty2.default)(this, "screenBottomBoundary", void 0);
+    (0, _defineProperty2.default)(this, "gridRightBoundary", void 0);
+    (0, _defineProperty2.default)(this, "gridBottomBoundary", void 0);
     this.width = width;
     this.height = height;
     this.viewportPadding = Math.max(width, height);
@@ -30,72 +34,63 @@ var CollisionIndex = exports.default = /*#__PURE__*/function () {
     this.gridRightBoundary = width + 2 * this.viewportPadding;
     this.gridBottomBoundary = height + 2 * this.viewportPadding;
   }
-  (0, _createClass2.default)(CollisionIndex, [{
-    key: "placeCollisionBox",
-    value: function placeCollisionBox(collisionBox) {
-      // const projectedPoint = this.project(
-      //   mvpMatrix,
-      //   collisionBox.anchorPointX,
-      //   collisionBox.anchorPointY,
-      // );
+  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: []
-        };
-      }
+    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)) {
       return {
-        box: [tlX, tlY, brX, brY]
-      };
-    }
-  }, {
-    key: "insertCollisionBox",
-    value: function insertCollisionBox(box, featureIndex) {
-      var key = {
-        featureIndex: featureIndex
+        box: []
       };
-      this.grid.insert(key, box[0], box[1], box[2], box[3]);
     }
+    return {
+      box: [tlX, tlY, brX, brY]
+    };
+  }
+  insertCollisionBox(box, featureIndex) {
+    const key = {
+      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
-      };
-    }
+  /**
+   * 后续碰撞检测都需要投影到 viewport 坐标系
+   * @param {THREE.Matrix4} mvpMatrix mvp矩阵
+   * @param {number} x P20 平面坐标X
+   * @param {number} y P20 平面坐标Y
+   * @return {Point} projectedPoint
+   */
+  project(mvpMatrix, x, y) {
+    const point = _glMatrix.vec4.fromValues(x, y, 0, 1);
+    const out = _glMatrix.vec4.create();
+    // @ts-ignore
+    const mat = _glMatrix.mat4.fromValues(...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;
-}();
+  /**
+   * 判断包围盒是否在整个网格内，需要加上 buffer
+   * @param {number} x1 x1
+   * @param {number} y1 y1
+   * @param {number} x2 x2
+   * @param {number} y2 y2
+   * @return {Point} isInside
+   */
+  isInsideGrid(x1, y1, x2, y2) {
+    return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
+  }
+}
+exports.default = CollisionIndex;