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

package/es/tile/utils.js

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { createLayerContainer } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+export var tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
+export function isVectorTile(parserType) {
+  return tileVectorParser.indexOf(parserType) >= 0;
+}
+export function registerLayers(parentLayer, layers) {
+  layers.map(function (layer) {
+    var container = createLayerContainer(parentLayer.sceneContainer);
+    layer.setContainer(container, parentLayer.sceneContainer);
+    layer.init();
+  });
+}
+export function getLayerShape(layerType, layer) {
+  var _layerShape$scale;
+
+  var layerShape = layer.getAttribute('shape');
+
+  if (layerShape && (_layerShape$scale = layerShape.scale) !== null && _layerShape$scale !== void 0 && _layerShape$scale.field) {
+    var _layerShape$scale2;
+
+    if (((_layerShape$scale2 = layerShape.scale) === null || _layerShape$scale2 === void 0 ? void 0 : _layerShape$scale2.values) === 'text') {
+      return [layerShape.scale.field, layerShape.scale.values];
+    }
+
+    return layerShape.scale.field;
+  }
+
+  switch (layerType) {
+    case 'PolygonLayer':
+      return 'fill';
+
+    case 'LineLayer':
+      return 'tileline';
+
+    case 'PointLayer':
+      return 'circle';
+
+    case 'RasterLayer':
+      return 'image';
+
+    default:
+      return '';
+  }
+}
+export function getMaskValue(layerType, mask) {
+  switch (layerType) {
+    case 'PolygonLayer':
+      return true;
+
+    case 'LineLayer':
+      return true;
+
+    case 'PointLayer':
+      return false;
+
+    case 'RasterLayer':
+      return mask;
+
+    default:
+      return mask;
+  }
+}
+export function getContainerSize(container) {
+  if (container.getContext) {
+    return {
+      width: container.width / DOM.DPR,
+      height: container.height / DOM.DPR
+    };
+  } else {
+    return container.getBoundingClientRect();
+  }
+}
+export function readRasterValue(tile, mapService, x, y) {
+  var _tile$bboxPolygon, _tile$data, _tile$data2, _tile$data3;
+
+  var bbox = (tile === null || tile === void 0 ? void 0 : (_tile$bboxPolygon = tile.bboxPolygon) === null || _tile$bboxPolygon === void 0 ? void 0 : _tile$bboxPolygon.bbox) || [0, 0, 10, -10];
+
+  var _bbox = _slicedToArray(bbox, 4),
+      _bbox$ = _bbox[0],
+      minLng = _bbox$ === void 0 ? 0 : _bbox$,
+      _bbox$2 = _bbox[1],
+      minLat = _bbox$2 === void 0 ? 0 : _bbox$2,
+      _bbox$3 = _bbox[2],
+      maxLng = _bbox$3 === void 0 ? 10 : _bbox$3,
+      _bbox$4 = _bbox[3],
+      maxLat = _bbox$4 === void 0 ? -10 : _bbox$4;
+
+  var tileXY = mapService.lngLatToContainer([minLng, minLat]);
+  var tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
+  var tilePixelWidth = tileMaxXY.x - tileXY.x;
+  var tilePixelHeight = tileXY.y - tileMaxXY.y;
+  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);
+  var indexY = Math.floor(pos[1] * tileHeight);
+  var index = Math.max(0, indexY - 1) * tileWidth + indexX;
+  var data = tile === null || tile === void 0 ? void 0 : (_tile$data3 = tile.data) === null || _tile$data3 === void 0 ? void 0 : _tile$data3.data[index];
+  return data;
+}
+export function readPixel(x, y, rendererService) {
+  var readPixels = rendererService.readPixels,
+      getContainer = rendererService.getContainer;
+  var xInDevicePixel = x * DOM.DPR;
+  var yInDevicePixel = y * DOM.DPR;
+
+  var _getContainerSize = getContainerSize(getContainer()),
+      width = _getContainerSize.width,
+      height = _getContainerSize.height;
+
+  width *= DOM.DPR;
+  height *= DOM.DPR;
+
+  if (xInDevicePixel > width - 1 * DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * DOM.DPR || yInDevicePixel < 0) {
+    return false;
+  }
+
+  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;
+}

package/es/utils/blend.d.ts

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

package/es/utils/blend.js

@@ -0,0 +1,54 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _BlendTypes;
+
+import { BlendType, gl } from '@antv/l7-core';
+export var BlendTypes = (_BlendTypes = {}, _defineProperty(_BlendTypes, BlendType.additive, {
+  enable: true,
+  func: {
+    srcRGB: gl.ONE,
+    dstRGB: gl.ONE,
+    srcAlpha: 1,
+    dstAlpha: 1
+  }
+}), _defineProperty(_BlendTypes, BlendType.none, {
+  enable: false
+}), _defineProperty(_BlendTypes, BlendType.normal, {
+  enable: true,
+  func: {
+    srcRGB: gl.SRC_ALPHA,
+    dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+    srcAlpha: 1,
+    dstAlpha: 1
+  }
+}), _defineProperty(_BlendTypes, BlendType.subtractive, {
+  enable: true,
+  func: {
+    srcRGB: gl.ONE,
+    dstRGB: gl.ONE,
+    srcAlpha: gl.ZERO,
+    dstAlpha: gl.ONE_MINUS_SRC_COLOR
+  },
+  equation: {
+    rgb: gl.FUNC_SUBTRACT,
+    alpha: gl.FUNC_SUBTRACT
+  }
+}), _defineProperty(_BlendTypes, BlendType.max, {
+  enable: true,
+  func: {
+    srcRGB: gl.ONE,
+    dstRGB: gl.ONE
+  },
+  equation: {
+    rgb: gl.MAX_EXT
+  }
+}), _defineProperty(_BlendTypes, BlendType.min, {
+  enable: true,
+  func: {
+    srcRGB: gl.ONE,
+    dstRGB: gl.ONE
+  },
+  equation: {
+    rgb: gl.MIN_EXT
+  }
+}), _BlendTypes);

package/es/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/es/utils/collision-index.js

@@ -0,0 +1,102 @@
+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";
+/**
+ * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
+ * @see https://zhuanlan.zhihu.com/p/74373214
+ */
+
+var CollisionIndex = /*#__PURE__*/function () {
+  function CollisionIndex(width, height) {
+    _classCallCheck(this, CollisionIndex);
+
+    _defineProperty(this, "viewportPadding", 100);
+
+    this.width = width;
+    this.height = 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;
+    this.gridRightBoundary = width + 2 * this.viewportPadding;
+    this.gridBottomBoundary = height + 2 * this.viewportPadding;
+  }
+
+  _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;
+      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: [tlX, tlY, brX, brY]
+      };
+    }
+  }, {
+    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 = vec4.fromValues(x, y, 0, 1);
+      var out = vec4.create(); // @ts-ignore
+
+      var mat = mat4.fromValues.apply(mat4, _toConsumableArray(mvpMatrix));
+      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;
+}();
+
+export { CollisionIndex as default };

package/es/utils/dataMappingStyle.d.ts

@@ -0,0 +1,31 @@
+import { ILayer } from '@antv/l7-core';
+/**
+ * 该文件中的工具方法主要用于对 style 中的属性进行 数据映射
+ */
+interface IConfigToUpdate {
+    thetaOffset?: any;
+    opacity?: any;
+    strokeOpacity?: any;
+    stroke?: any;
+    strokeWidth?: any;
+    offsets?: any;
+    textOffset?: any;
+}
+/**
+ * 当样式发生变化时判断是否需要进行数据映射
+ * @param configToUpdate
+ * @param layer
+ */
+declare function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any): void;
+/**
+ * 根据传入参数 float 的类型和值做相应的操作
+ */
+declare function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any): void;
+/**
+ * 根据传入参数 stroke / color 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleColor
+ */
+declare function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any): void;
+export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };

package/es/utils/dataMappingStyle.js

@@ -0,0 +1,147 @@
+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)) {
+    // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
+    registerStyleAttribute(fieldName, layer, styleFloat, function (value) {
+      return value;
+    });
+  } else if (isNumber(styleFloat)) {
+    // 传入 number、默认值处理
+    registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
+  } else if (Array.isArray(styleFloat) && styleFloat.length === 2) {
+    // 传入的 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])) {
+      // 字段映射 [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)) {
+    // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
+    registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
+      return value;
+    });
+  } 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])) {
+    // 字段映射 [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)) {
+    // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
+    registerStyleAttribute(fieldName, layer, styleColor, undefined);
+  } else if (Array.isArray(styleColor) && styleColor.length === 2) {
+    // 传入的 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) {
+      // 字段映射 [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 };

package/es/utils/extrude_polyline.d.ts

@@ -0,0 +1,67 @@
+import { vec2 } from 'gl-matrix';
+export declare function computeMiter(lineTangent: vec2, miter: vec2, start: vec2, end: vec2, halfThick: number): [number, vec2];
+export declare function computeNormal(out: vec2, dir: vec2): vec2;
+export declare function direction(out: vec2, a: vec2, b: vec2): vec2;
+export interface IExtrudeLineOption {
+    join: string;
+    cap: string;
+    dash: boolean;
+    closed: boolean;
+    indexOffset: number;
+    miterLimit: number;
+    thickness: number;
+}
+export default class ExtrudePolyline {
+    complex: {
+        positions: number[];
+        indices: number[];
+        normals: number[];
+        startIndex: number;
+        indexes: number[];
+    };
+    private join;
+    private cap;
+    private miterLimit;
+    private thickness;
+    private normal;
+    private lastFlip;
+    private miter;
+    private started;
+    private dash;
+    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[];
+        normals: number[];
+        startIndex: number;
+        indexes: number[];
+    };
+    extrude(points: number[][]): {
+        positions: number[];
+        indices: number[];
+        normals: number[];
+        startIndex: number;
+        indexes: number[];
+    };
+    private simpleSegment;
+    private segment_gaode2;
+    private segment;
+    private extrusions;
+    private lineSegmentDistance;
+}