@antv/l7-layers 2.25.7 → 2.25.10

package/es/raster/shaders/terrain/terrain_rgb_vert.glsl

@@ -0,0 +1,19 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_unpack;
+  vec2 u_domain;
+  float u_opacity;
+  float u_noDataValue;
+  float u_clampLow;
+  float u_clampHigh;
+};
+out vec2 v_texCoord;
+#pragma include "projection"
+
+void main() {
+  v_texCoord = a_Uv;
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));
+}

package/es/shader/minify_frag.glsl

@@ -0,0 +1,11 @@
+layout(std140) uniform commonUniorm {
+  vec4 u_color;
+  float u_opacity;
+};
+
+out vec4 outputColor;
+
+void main() {
+  outputColor = u_color;
+  outputColor.a *= u_opacity;
+}

package/es/shader/minify_picking_frag.glsl

@@ -0,0 +1,10 @@
+uniform float u_opacity : 1.0;
+varying vec4 v_color;
+
+#pragma include "picking"
+
+void main() {
+  gl_FragColor = v_color;
+  gl_FragColor.a *= u_opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/tile/core/BaseLayer.d.ts

@@ -0,0 +1,50 @@
+import type { IInteractionTarget, ILayer, ILayerService, IMapService, IPickingService, IRendererService } from '@antv/l7-core';
+import type { SourceTile, TilesetManager } from '@antv/l7-utils';
+import { TileLayerService } from '../service/TileLayerService';
+import { TilePickService } from '../service/TilePickService';
+export default class BaseTileLayer {
+    private parent;
+    tileLayerService: TileLayerService;
+    protected mapService: IMapService;
+    protected layerService: ILayerService;
+    protected rendererService: IRendererService;
+    protected pickingService: IPickingService;
+    protected tilePickService: TilePickService;
+    tilesetManager: TilesetManager;
+    initedTileset: boolean;
+    protected lastViewStates: {
+        zoom: number;
+        minLng: number;
+        minLat: number;
+        maxLng: number;
+        maxLat: number;
+    };
+    constructor(parent: ILayer);
+    protected initTileSetManager(): void;
+    protected mapchange: () => void;
+    protected getCurrentView(): {
+        latLonBounds: [number, number, number, number];
+        zoom: number;
+    };
+    private bindTilesetEvent;
+    render(): void;
+    getLayers(): ILayer[];
+    getTiles(): import("@antv/l7-core").ITile[];
+    getTile(key: string): import("@antv/l7-core").ITile | undefined;
+    viewchange: import("@antv/l7-utils").DebouncedFunc<() => void>;
+    tileLoaded(tile: SourceTile): void;
+    tileError(error: Error): void;
+    destroy(): void;
+    reload(): void;
+    tileUnLoad(tile: SourceTile): void;
+    tileUpdate(): Promise<void>;
+    setPickState(layers: ILayer[]): void;
+    pickRender(target: IInteractionTarget): void;
+    selectFeature(pickedColors: Uint8Array | undefined): void;
+    highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
+    /**
+     * 实现 TileLayer 对子图层方法的代理
+     * @param parent
+     */
+    private proxy;
+}

package/es/tile/core/BaseLayer.js

@@ -0,0 +1,256 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { lodashUtil } from '@antv/l7-utils';
+import { TileLayerService } from "../service/TileLayerService";
+import { TilePickService } from "../service/TilePickService";
+import { getTileFactory } from "../tile";
+import { ProxyFuncs } from "../utils/constants";
+const {
+  debounce
+} = lodashUtil;
+export default class BaseTileLayer {
+  constructor(parent) {
+    _defineProperty(this, "parent", void 0);
+    _defineProperty(this, "tileLayerService", void 0);
+    _defineProperty(this, "mapService", void 0);
+    _defineProperty(this, "layerService", void 0);
+    _defineProperty(this, "rendererService", void 0);
+    _defineProperty(this, "pickingService", void 0);
+    _defineProperty(this, "tilePickService", void 0);
+    _defineProperty(this, "tilesetManager", void 0);
+    // 瓦片数据管理器
+    _defineProperty(this, "initedTileset", false);
+    // 瓦片是否加载成功
+    _defineProperty(this, "lastViewStates", void 0);
+    _defineProperty(this, "mapchange", () => {
+      var _this$tilesetManager;
+      // 图层不可见时，不触发加载瓦片
+      if (this.parent.isVisible() === false) {
+        return;
+      }
+      const {
+        latLonBounds,
+        zoom
+      } = this.getCurrentView();
+
+      // 使用数值比较替代字符串比较，更高效
+      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.minLng === latLonBounds[0] && this.lastViewStates.minLat === latLonBounds[1] && this.lastViewStates.maxLng === latLonBounds[2] && this.lastViewStates.maxLat === latLonBounds[3]) {
+        return;
+      }
+      this.lastViewStates = {
+        zoom,
+        minLng: latLonBounds[0],
+        minLat: latLonBounds[1],
+        maxLng: latLonBounds[2],
+        maxLat: latLonBounds[3]
+      };
+      (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 || _this$tilesetManager.throttleUpdate(zoom, latLonBounds);
+    });
+    //  防抖操作
+    _defineProperty(this, "viewchange", debounce(this.mapchange, 24));
+    this.parent = parent;
+    const container = this.parent.getContainer();
+    this.rendererService = container.rendererService;
+    this.layerService = container.layerService;
+    this.mapService = container.mapService;
+    this.pickingService = container.pickingService;
+
+    // 初始化瓦片管理服务
+    this.tileLayerService = new TileLayerService({
+      rendererService: this.rendererService,
+      layerService: this.layerService,
+      parent
+    });
+    // 初始化拾取服务
+    this.tilePickService = new TilePickService({
+      tileLayerService: this.tileLayerService,
+      layerService: this.layerService,
+      parent
+    });
+
+    // 重置
+    this.parent.setLayerPickService(this.tilePickService);
+    this.proxy(parent);
+    this.initTileSetManager();
+  }
+  initTileSetManager() {
+    var _this$tilesetManager2;
+    const source = this.parent.getSource();
+    this.tilesetManager = source.tileset;
+    if (!this.initedTileset) {
+      this.bindTilesetEvent();
+      this.initedTileset = true;
+    }
+
+    // 图层不可见时，不触发加载瓦片
+    if (this.parent.isVisible() === false) {
+      return;
+    }
+    const {
+      latLonBounds,
+      zoom
+    } = this.getCurrentView();
+    (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 || _this$tilesetManager2.update(zoom, latLonBounds);
+  }
+  getCurrentView() {
+    const bounds = this.mapService.getBounds();
+    const latLonBounds = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
+    const zoom = this.mapService.getZoom();
+    return {
+      latLonBounds,
+      zoom
+    };
+  }
+  bindTilesetEvent() {
+    // 瓦片数据加载成功
+
+    this.tilesetManager.on('tile-loaded', tile => {
+      // 将事件抛出，图层上可以监听使用
+    });
+
+    // 瓦片数据从缓存删除或被执行重新加载
+    this.tilesetManager.on('tile-unload', tile => {
+      // 将事件抛出，图层上可以监听使用
+      this.tileUnLoad(tile);
+    });
+
+    // 瓦片数据加载失败
+
+    this.tilesetManager.on('tile-error', (error, tile) => {
+      // 将事件抛出，图层上可以监听使用
+      this.tileError(error);
+    });
+
+    // 瓦片显隐状态更新
+    this.tilesetManager.on('tile-update', () => {
+      this.tileUpdate();
+    });
+
+    // 地图视野发生改变
+    this.mapService.on('zoomend', this.mapchange);
+    this.mapService.on('moveend', this.viewchange);
+  }
+  render() {
+    this.tileLayerService.render();
+  }
+  getLayers() {
+    return this.tileLayerService.getLayers();
+  }
+  getTiles() {
+    return this.tileLayerService.getTiles();
+  }
+  getTile(key) {
+    return this.tileLayerService.getTile(key);
+  }
+  tileLoaded(tile) {
+    //
+  }
+  tileError(error) {
+    console.warn('error:', error);
+  }
+  destroy() {
+    var _this$tilesetManager3;
+    this.mapService.off('zoomend', this.mapchange);
+    this.mapService.off('moveend', this.viewchange);
+    (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 || _this$tilesetManager3.destroy();
+    this.tileLayerService.destroy();
+  }
+  // 重新加载
+  reload() {
+    var _this$tilesetManager4;
+    // 瓦片重新加载
+    this.tilesetManager.clear();
+    const {
+      latLonBounds,
+      zoom
+    } = this.getCurrentView();
+    (_this$tilesetManager4 = this.tilesetManager) === null || _this$tilesetManager4 === void 0 || _this$tilesetManager4.update(zoom, latLonBounds);
+  }
+  tileUnLoad(tile) {
+    this.tileLayerService.removeTile(tile.key);
+  }
+  tileUpdate() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      if (!_this.tilesetManager) {
+        return;
+      }
+      const minZoom = _this.parent.getMinZoom();
+      const maxZoom = _this.parent.getMaxZoom();
+
+      // 合并 filter 操作，减少中间数组创建
+      const tiles = _this.tilesetManager.tiles.filter(tile => tile.isLoaded &&
+      // 过滤未加载完成的
+      tile.isVisibleChange &&
+      // 过滤未发生变化的
+      tile.data &&
+      //
+      tile.z >= minZoom && tile.z < maxZoom // 过滤不可见层级
+      );
+      yield Promise.all(tiles.map( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(function* (tile) {
+          // 未加载瓦片
+          if (!_this.tileLayerService.hasTile(tile.key)) {
+            const tileInstance = getTileFactory(_this.parent);
+            const tileLayer = new tileInstance(tile, _this.parent);
+            yield tileLayer.initTileLayer();
+            _this.tilePickService.setPickState();
+            if (tileLayer.getLayers().length !== 0) {
+              _this.tileLayerService.addTile(tileLayer);
+              _this.tileLayerService.updateTileVisible(tile);
+              _this.layerService.reRender();
+            }
+          } else {
+            // 已加载瓦片
+            _this.tileLayerService.updateTileVisible(tile);
+            _this.tilePickService.setPickState();
+            _this.layerService.reRender();
+          }
+        });
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }()));
+      if (_this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
+        _this.parent.emit('tiles-loaded', _this.tilesetManager.currentTiles);
+      }
+    })();
+  }
+  setPickState(layers) {
+    return;
+  }
+  pickRender(target) {
+    this.tilePickService.pickRender(target);
+  }
+  selectFeature(pickedColors) {
+    this.tilePickService.selectFeature(pickedColors);
+  }
+  highlightPickedFeature(pickedColors) {
+    this.tilePickService.highlightPickedFeature(pickedColors);
+  }
+
+  /**
+   * 实现 TileLayer 对子图层方法的代理
+   * @param parent
+   */
+  proxy(parent) {
+    ProxyFuncs.forEach(func => {
+      // @ts-ignore
+      const oldStyleFunc = parent[func].bind(parent);
+      // @ts-ignore
+      parent[func] = (...args) => {
+        oldStyleFunc(...args);
+        this.getLayers().map(child => {
+          // @ts-ignore
+          child[func](...args);
+        });
+        // Tip: 目前在更新 RasterData 的 colorTexture 的时候需要额外优化
+        if (func === 'style') {
+          this.getTiles().forEach(tile => tile.styleUpdate(...args));
+        }
+        return parent;
+      };
+    });
+  }
+}

package/es/tile/core/TileDebugLayer.d.ts

@@ -0,0 +1,15 @@
+import BaseLayer from '../../core/BaseLayer';
+import type { IBaseLayerStyleOptions } from '../../core/interface';
+export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
+    type: string;
+    zIndex: number;
+    defaultSourceConfig: {
+        data: never[];
+        options: {
+            parser: {
+                type: string;
+            };
+        };
+    };
+    buildModels(): Promise<void>;
+}

package/es/tile/core/TileDebugLayer.js

@@ -0,0 +1,23 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import BaseLayer from "../../core/BaseLayer";
+export default class TileDebugLayer extends BaseLayer {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "type", 'TileDebugLayer');
+    _defineProperty(this, "zIndex", 10000);
+    _defineProperty(this, "defaultSourceConfig", {
+      data: [],
+      options: {
+        parser: {
+          type: 'testTile'
+        }
+      }
+    });
+  }
+  buildModels() {
+    return _asyncToGenerator(function* () {
+      return;
+    })();
+  }
+}

package/es/tile/interaction/getRasterData.d.ts

@@ -0,0 +1,4 @@
+import type { IMapService, IRendererService } from '@antv/l7-core';
+import type { SourceTile } from '@antv/l7-utils';
+export declare function readRasterValue(tile: SourceTile, mapService: IMapService, x: number, y: number): any;
+export declare function readPixel(x: number, y: number, rendererService: IRendererService): false | Uint8Array;

package/es/tile/interaction/getRasterData.js

@@ -0,0 +1,45 @@
+import { DOM } from '@antv/l7-utils';
+export function readRasterValue(tile, mapService, x, y) {
+  var _tile$bboxPolygon, _tile$data, _tile$data2, _tile$data3;
+  const bbox = (tile === null || tile === void 0 || (_tile$bboxPolygon = tile.bboxPolygon) === null || _tile$bboxPolygon === void 0 ? void 0 : _tile$bboxPolygon.bbox) || [0, 0, 10, -10];
+  const [minLng = 0, minLat = 0, maxLng = 10, maxLat = -10] = bbox;
+  const tileXY = mapService.lngLatToContainer([minLng, minLat]);
+  const tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
+  const tilePixelWidth = tileMaxXY.x - tileXY.x;
+  const tilePixelHeight = tileXY.y - tileMaxXY.y;
+  const pos = [(x - tileXY.x) / tilePixelWidth,
+  // x
+  (y - tileMaxXY.y) / tilePixelHeight // y
+  ];
+  const tileWidth = (tile === null || tile === void 0 || (_tile$data = tile.data) === null || _tile$data === void 0 ? void 0 : _tile$data.width) || 1;
+  const tileHeight = (tile === null || tile === void 0 || (_tile$data2 = tile.data) === null || _tile$data2 === void 0 ? void 0 : _tile$data2.height) || 1;
+  const indexX = Math.floor(pos[0] * tileWidth);
+  const indexY = Math.floor(pos[1] * tileHeight);
+  const index = Math.max(0, indexY - 1) * tileWidth + indexX;
+  const data = tile === null || tile === 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) {
+  const {
+    readPixels,
+    getViewportSize
+  } = rendererService;
+  const xInDevicePixel = x * DOM.DPR;
+  const yInDevicePixel = y * DOM.DPR;
+  const {
+    width,
+    height
+  } = getViewportSize();
+  if (xInDevicePixel > width - 1 * DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * DOM.DPR || yInDevicePixel < 0) {
+    return false;
+  }
+  const 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/tile/interaction/utils.d.ts

@@ -0,0 +1,11 @@
+import type { ILayer } from '@antv/l7-core';
+export declare function clearPickState(layers: ILayer[]): void;
+export declare function setSelect(layers: ILayer[], pickedColors: any, renderList: ILayer[]): undefined;
+export declare function setHighlight(layers: ILayer[], pickedColors: any): void;
+export declare function setPickState(layers: ILayer[], pickColors: {
+    select: any;
+    active: any;
+}): void;
+export declare function selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined): void;
+export declare function setFeatureSelect(color: any, layers: ILayer[]): void;
+export declare function setFeatureActive(color: any, layers: ILayer[]): void;

package/es/tile/interaction/utils.js

@@ -0,0 +1,69 @@
+import { decodePickingColor } from '@antv/l7-utils';
+export function clearPickState(layers) {
+  layers.filter(layer => layer.inited && layer.isVisible()).filter(layer => layer.getCurrentSelectedId() !== null).map(layer => {
+    selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+    layer.setCurrentSelectedId(null);
+  });
+}
+export function setSelect(layers, pickedColors, renderList) {
+  const selectedId = decodePickingColor(pickedColors);
+  let pickColor;
+  layers.map(layer => {
+    if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
+      selectFeature(layer, pickedColors);
+      layer.setCurrentSelectedId(selectedId);
+      pickColor = pickedColors;
+    } else {
+      selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
+      layer.setCurrentSelectedId(null);
+      pickColor = null;
+    }
+  });
+  // unselect normal layer
+  renderList.filter(layer => layer.inited && layer.isVisible() && layer.needPick('click')).filter(layer => layer.getCurrentSelectedId() !== null).map(layer => {
+    selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+    layer.setCurrentSelectedId(null);
+  });
+  return pickColor;
+}
+export function setHighlight(layers, pickedColors) {
+  const pickId = decodePickingColor(pickedColors);
+  layers.filter(layer => layer.inited && layer.isVisible())
+  // @ts-ignore
+  .filter(layer => layer.getPickID() !== pickId).map(layer => {
+    // @ts-ignore
+    layer.setPickID(pickId);
+    layer.hooks.beforeHighlight.call(pickedColors);
+  });
+}
+export function setPickState(layers, pickColors) {
+  if (pickColors.select) {
+    layers.map(layer => {
+      selectFeature(layer, pickColors.select);
+    });
+  }
+  if (pickColors.active) {
+    layers.filter(layer => layer.inited && layer.isVisible()).map(layer => {
+      layer.hooks.beforeHighlight.call(pickColors.active);
+    });
+  }
+}
+export function selectFeature(layer, pickedColors) {
+  // @ts-ignore
+  const [r, g, b] = pickedColors;
+  layer.hooks.beforeSelect.call([r, g, b]);
+}
+export function setFeatureSelect(color, layers) {
+  const id = decodePickingColor(color);
+  layers.map(layer => {
+    selectFeature(layer, color);
+    layer.setCurrentSelectedId(id);
+  });
+}
+export function setFeatureActive(color, layers) {
+  const id = decodePickingColor(color);
+  layers.map(layer => {
+    layer.hooks.beforeHighlight.call(color);
+    layer.setCurrentPickId(id);
+  });
+}

package/es/tile/interface.d.ts

@@ -0,0 +1,29 @@
+import type { ILayer, IMapService, IRendererService, ISource, ISubLayerInitOptions } from '@antv/l7-core';
+import type { SourceTile } from '@antv/l7-utils';
+export type Timeout = any;
+export type CacheEvent = 'click' | 'mousemove' | 'mouseup' | 'mousedown' | 'contextmenu';
+export interface ITileFactoryOptions {
+    parent: ILayer;
+    mapService: IMapService;
+    rendererService: IRendererService;
+}
+export interface ITileStyles {
+    [key: string]: any;
+}
+export interface ILayerTileConfig {
+    L7Layer?: any;
+    tile: SourceTile;
+    initOptions: ISubLayerInitOptions;
+    vectorTileLayer?: any;
+    source: ISource;
+    needListen?: boolean;
+}
+export interface ITileFactory {
+    loaded: boolean;
+    layers: ILayer[];
+    createTile(tile: SourceTile, initOptions: ISubLayerInitOptions): {
+        layers: ILayer[];
+    };
+    createLayer(option: ILayerTileConfig): ILayer;
+    updateStyle(styles: ITileStyles): string;
+}

package/es/tile/interface.js

@@ -0,0 +1 @@
+export {};

package/es/tile/service/TileLayerService.d.ts

@@ -0,0 +1,58 @@
+import type { ILayer, ILayerService, ILngLat, IRendererService, ITile } from '@antv/l7-core';
+import type { SourceTile } from '@antv/l7-utils';
+interface ITileLayerServiceOptions {
+    rendererService: IRendererService;
+    layerService: ILayerService;
+    parent: ILayer;
+}
+export declare class TileLayerService {
+    /**
+     * tileResource 用于存储瓦片的全局资源
+     */
+    tileResource: Map<any, any>;
+    private rendererService;
+    private layerService;
+    private parent;
+    /**
+     * 使用 Map 存储瓦片实例，查找复杂度从 O(n) 降为 O(1)
+     */
+    private layerTilesMap;
+    /**
+     * 待销毁瓦片队列，用于分帧销毁
+     */
+    private pendingDestroyQueue;
+    private maxDestroyPerFrame;
+    /**
+     * 渲染图层缓存
+     */
+    private renderLayersCache;
+    private renderCacheDirty;
+    constructor({ rendererService, layerService, parent }: ITileLayerServiceOptions);
+    get tiles(): ITile[];
+    /**
+     * 获取待销毁瓦片数量
+     */
+    get pendingDestroyCount(): number;
+    hasTile(tileKey: string): boolean;
+    addTile(tile: ITile): void;
+    getTile(tileKey: string): ITile | undefined;
+    getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined;
+    removeTile(tileKey: string): void;
+    /**
+     * 分帧销毁待销毁队列中的瓦片
+     */
+    processPendingDestroys(): void;
+    /**
+     * 标记渲染缓存为脏
+     */
+    markRenderCacheDirty(): void;
+    updateTileVisible(sourceTile: SourceTile): void;
+    isParentLoaded(sourceTile: SourceTile): boolean;
+    isChildrenLoaded(sourceTile: SourceTile): boolean;
+    render(): Promise<void>;
+    getRenderLayers(): ILayer[];
+    getLayers(): ILayer[];
+    getTiles(): ITile[];
+    destroy(): void;
+}
+export {};