@antv/l7-layers 2.10.3 → 2.10.4

package/es/tile/tileLayer/TileLayer.js

@@ -0,0 +1,198 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import { TileLayerManager } from "../manager/layerManager";
+import { Base } from "./base";
+import { setSelect, setHighlight, setPickState as _setPickState, clearPickState as _clearPickState } from "../interaction/utils";
+export var TileLayer = /*#__PURE__*/function (_Base) {
+  _inherits(TileLayer, _Base);
+
+  var _super = _createSuper(TileLayer);
+
+  function TileLayer(_ref) {
+    var _parentSource$data;
+
+    var _this;
+
+    var parent = _ref.parent,
+        rendererService = _ref.rendererService,
+        mapService = _ref.mapService,
+        layerService = _ref.layerService,
+        pickingService = _ref.pickingService,
+        transforms = _ref.transforms;
+
+    _classCallCheck(this, TileLayer);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "pickColors", {
+      select: null,
+      active: null
+    });
+
+    var parentSource = parent.getSource();
+
+    var _ref2 = (parentSource === null || parentSource === void 0 ? void 0 : (_parentSource$data = parentSource.data) === null || _parentSource$data === void 0 ? void 0 : _parentSource$data.tilesetOptions) || {},
+        sourceLayer = _ref2.sourceLayer;
+
+    _this.sourceLayer = sourceLayer;
+    _this.parent = parent;
+    _this.mapService = mapService;
+    _this.layerService = layerService;
+    _this.tileLayerManager = new TileLayerManager(parent, mapService, rendererService, pickingService, transforms);
+
+    _this.initTileSetManager();
+
+    _this.bindSubLayerEvent();
+
+    _this.bindSubLayerPick();
+
+    _this.scaleField = _this.parent.getScaleOptions();
+    return _this;
+  }
+
+  _createClass(TileLayer, [{
+    key: "children",
+    get: function get() {
+      return this.tileLayerManager.children;
+    }
+  }, {
+    key: "clearPick",
+    value: function clearPick(type) {
+      // Tip: 瓦片只有在 mousemove 的时候需要设置清除
+      if (type === 'mousemove') {
+        this.tileLayerManager.tilePickService.clearPick();
+      }
+    }
+    /**
+     * 清除 select 的选中状态
+     */
+
+  }, {
+    key: "clearPickState",
+    value: function clearPickState() {
+      _clearPickState(this.children);
+    }
+    /**
+     * 瓦片图层独立的拾取逻辑
+     * @param target
+     * @returns
+     */
+
+  }, {
+    key: "pickLayers",
+    value: function pickLayers(target) {
+      return this.tileLayerManager.pickLayers(target);
+    }
+  }, {
+    key: "setPickState",
+    value: function setPickState(layers) {
+      _setPickState(layers, this.pickColors);
+    }
+  }, {
+    key: "bindSubLayerPick",
+    value: function bindSubLayerPick() {
+      var _this2 = this;
+
+      this.tileLayerManager.tilePickService.on('pick', function (e) {
+        // @ts-ignore
+        var _e$pickedColors = _slicedToArray(e.pickedColors, 3),
+            r = _e$pickedColors[0],
+            g = _e$pickedColors[1],
+            b = _e$pickedColors[2];
+
+        if (e.type === 'click') {
+          var restLayers = _this2.children.filter(function (child) {
+            return child.inited && child.isVisible() && child.isVector;
+          }).filter(function (child) {
+            return child !== e.layer;
+          });
+
+          var renderList = _this2.layerService.getRenderList();
+
+          var color = setSelect(restLayers, [r, g, b], renderList);
+          _this2.pickColors.select = color;
+        } else {
+          setHighlight(_this2.children, [r, g, b]);
+          _this2.pickColors.active = [r, g, b];
+        }
+      });
+      this.tileLayerManager.tilePickService.on('unpick', function () {
+        _this2.pickColors.active = null;
+      });
+    }
+  }, {
+    key: "bindSubLayerEvent",
+    value: function bindSubLayerEvent() {
+      var _this3 = this;
+
+      /**
+       * layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
+       * layer.on('mouseenter', (ev) => {}); // 鼠标进入图层要素
+       * layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
+       * layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
+       * layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
+       * layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
+       * layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
+       *
+       *  鼠标在图层外的事件
+       * layer.on('unclick', (ev) => {}); // 图层外点击
+       * layer.on('unmousemove', (ev) => {}); // 图层外移动
+       * layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
+       * layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
+       * layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
+       * layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
+       */
+      this.parent.on('subLayerClick', function (e) {
+        _this3.parent.emit('click', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerMouseMove', function (e) {
+        return _this3.parent.emit('mousemove', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerMouseUp', function (e) {
+        return _this3.parent.emit('mouseup', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerMouseEnter', function (e) {
+        return _this3.parent.emit('mouseenter', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerMouseOut', function (e) {
+        return _this3.parent.emit('mouseout', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerMouseDown', function (e) {
+        return _this3.parent.emit('mousedown', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerContextmenu', function (e) {
+        return _this3.parent.emit('contextmenu', _objectSpread({}, e));
+      }); // vector layer 图层外事件
+
+      this.parent.on('subLayerUnClick', function (e) {
+        return _this3.parent.emit('unclick', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerUnMouseMove', function (e) {
+        return _this3.parent.emit('unmousemove', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerUnMouseUp', function (e) {
+        return _this3.parent.emit('unmouseup', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerUnMouseDown', function (e) {
+        return _this3.parent.emit('unmousedown', _objectSpread({}, e));
+      });
+      this.parent.on('subLayerUnContextmenu', function (e) {
+        return _this3.parent.emit('uncontextmenu', _objectSpread({}, e));
+      });
+    }
+  }]);
+
+  return TileLayer;
+}(Base);

package/es/tile/tileLayer/base.d.ts

@@ -0,0 +1,33 @@
+import { ILayer, IMapService, ILayerService } from '@antv/l7-core';
+import { Tile, TilesetManager } from '@antv/l7-utils';
+export declare class Base {
+    tileLayerManager: any;
+    get children(): any;
+    sourceLayer: string;
+    parent: ILayer;
+    initedTileset: boolean;
+    tilesetManager: TilesetManager | undefined;
+    scaleField: any;
+    protected mapService: IMapService;
+    protected layerService: ILayerService;
+    protected lastViewStates: {
+        zoom: number;
+        latLonBounds: [number, number, number, number];
+    };
+    protected mapchange(): void;
+    protected getCurrentView(): {
+        latLonBounds: [number, number, number, number];
+        zoom: number;
+    };
+    protected initTileSetManager(): void;
+    private bindTilesetEvent;
+    render(): void;
+    viewchange: import("lodash").DebouncedFunc<() => void>;
+    tileLoaded(tile: Tile): void;
+    tileError(error: Error): void;
+    destroy(): void;
+    tileUnLoad(tile: Tile): void;
+    tileUpdate(): void;
+    isTileReady(tile: Tile): boolean;
+    setPickState(layers: ILayer[]): void;
+}

package/es/tile/tileLayer/base.js

@@ -0,0 +1,212 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { debounce } from 'lodash';
+import { updateTileVisible } from "../utils";
+export var Base = /*#__PURE__*/function () {
+  function Base() {
+    _classCallCheck(this, Base);
+
+    _defineProperty(this, "initedTileset", false);
+
+    _defineProperty(this, "viewchange", debounce(this.mapchange, 200));
+  }
+
+  _createClass(Base, [{
+    key: "children",
+    get: function get() {
+      return this.tileLayerManager.children;
+    }
+  }, {
+    key: "mapchange",
+    value: function mapchange() {
+      var _this$tilesetManager;
+
+      var _this$getCurrentView = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView.latLonBounds,
+          zoom = _this$getCurrentView.zoom;
+
+      if (this.mapService.version === 'GAODE1.x') {
+        var _this$parent$getLayer = this.parent.getLayerConfig(),
+            visible = _this$parent$getLayer.visible;
+
+        if (zoom < 3 && visible) {
+          this.parent.updateLayerConfig({
+            visible: false
+          });
+          this.layerService.reRender();
+        } else if (zoom >= 3 && !visible) {
+          this.parent.updateLayerConfig({
+            visible: true
+          });
+          this.layerService.reRender();
+        }
+      }
+
+      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.latLonBounds.toString() === latLonBounds.toString()) {
+        return;
+      }
+
+      this.lastViewStates = {
+        zoom: zoom,
+        latLonBounds: latLonBounds
+      };
+      (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 ? void 0 : _this$tilesetManager.throttleUpdate(zoom, latLonBounds);
+    }
+  }, {
+    key: "getCurrentView",
+    value: function getCurrentView() {
+      var bounds = this.mapService.getBounds();
+      var latLonBounds = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
+      var zoom = this.mapService.getZoom();
+      return {
+        latLonBounds: latLonBounds,
+        zoom: zoom
+      };
+    }
+  }, {
+    key: "initTileSetManager",
+    value: function initTileSetManager() {
+      var _this$tilesetManager2;
+
+      var source = this.parent.getSource();
+      this.tilesetManager = source.tileset;
+
+      if (!this.initedTileset) {
+        this.bindTilesetEvent();
+        this.initedTileset = true;
+      }
+
+      var _this$getCurrentView2 = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView2.latLonBounds,
+          zoom = _this$getCurrentView2.zoom;
+
+      (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.update(zoom, latLonBounds);
+    }
+  }, {
+    key: "bindTilesetEvent",
+    value: function bindTilesetEvent() {
+      var _this = this;
+
+      if (!this.tilesetManager) {
+        return;
+      } // 瓦片数据加载成功
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+      this.tilesetManager.on('tile-loaded', function (tile) {// 将事件抛出，图层上可以监听使用
+      }); // 瓦片数据从缓存删除或被执行重新加载
+
+      this.tilesetManager.on('tile-unload', function (tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileUnLoad(tile);
+      }); // 瓦片数据加载失败
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+      this.tilesetManager.on('tile-error', function (error, tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileError(error);
+      }); // 瓦片显隐状态更新
+
+      this.tilesetManager.on('tile-update', function () {
+        _this.tileUpdate();
+      }); // 地图视野发生改变
+
+      this.mapService.on('zoomend', function () {
+        return _this.viewchange();
+      });
+      this.mapService.on('moveend', function () {
+        return _this.viewchange();
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      this.tileLayerManager.render();
+    } //  防抖操作
+
+  }, {
+    key: "tileLoaded",
+    value: // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function tileLoaded(tile) {//
+    }
+  }, {
+    key: "tileError",
+    value: function tileError(error) {
+      console.warn('error:', error);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$tilesetManager3;
+
+      (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 ? void 0 : _this$tilesetManager3.destroy();
+      this.tileLayerManager.destroy();
+    }
+  }, {
+    key: "tileUnLoad",
+    value: function tileUnLoad(tile) {
+      this.tileLayerManager.removeTile(tile);
+    }
+  }, {
+    key: "tileUpdate",
+    value: function tileUpdate() {
+      var _this2 = this;
+
+      if (!this.tilesetManager) {
+        return;
+      }
+
+      this.tilesetManager.tiles.filter(function (tile) {
+        return tile.isLoaded;
+      }).map(function (tile) {
+        if (!_this2.isTileReady(tile)) return;
+
+        if (!_this2.tileLayerManager.hasTile(tile)) {
+          var _this2$tileLayerManag = _this2.tileLayerManager.addTile(tile),
+              layers = _this2$tileLayerManag.layers;
+
+          _this2.setPickState(layers);
+        } else {
+          if (!tile.isVisibleChange) {
+            return;
+          }
+
+          var _layers = _this2.tileLayerManager.getChildren(tile.layerIDList);
+
+          updateTileVisible(tile, _layers, _this2.layerService);
+
+          _this2.setPickState(_layers);
+        }
+      });
+
+      if (this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
+        this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
+      }
+    }
+  }, {
+    key: "isTileReady",
+    value: function isTileReady(tile) {
+      var _tile$data;
+
+      if ((_tile$data = tile.data) !== null && _tile$data !== void 0 && _tile$data.layers && this.sourceLayer) {
+        // vector
+        var vectorTileLayer = tile.data.layers[this.sourceLayer];
+        var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
+
+        if (!(Array.isArray(features) && features.length > 0)) {
+          return false;
+        }
+      }
+
+      return true;
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  }, {
+    key: "setPickState",
+    value: function setPickState(layers) {}
+  }]);
+
+  return Base;
+}();

package/es/tile/utils.d.ts

@@ -1,4 +1,5 @@
-import { ILayer } from '@antv/l7-core';
+import { ILayer, ILayerService } from '@antv/l7-core';
+import { Tile } from '@antv/l7-utils';
 export declare const tileVectorParser: string[];
 /**
  * 判断当前图层是否是瓦片图层
@@ -6,7 +7,16 @@ export declare const tileVectorParser: string[];
  * @returns
  */
 export declare function isTileGroup(layer: ILayer): boolean;
+export declare function isVectorTile(parserType: string): boolean;
+export declare function registerLayers(parentLayer: ILayer, layers: ILayer[]): void;
+export declare function getLayerShape(layerType: string, layer: ILayer): string | string[];
+export declare function getMaskValue(layerType: string, mask: boolean): boolean;
 export declare function getContainerSize(container: HTMLCanvasElement | HTMLElement): DOMRect | {
     width: number;
     height: number;
 };
+export declare function isTileLoaded(tile: Tile): boolean;
+export declare function isTileChildLoaded(tile: Tile): boolean;
+export declare function isTileParentLoaded(tile: Tile): boolean;
+export declare function tileAllLoad(tile: Tile, callback: () => void): void;
+export declare function updateTileVisible(tile: Tile, layers: ILayer[], layerService: ILayerService): void;

package/es/tile/utils.js

@@ -1,4 +1,6 @@
+import { createLayerContainer } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
+import { updateLayersConfig } from "./style/utils";
 export var tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
 /**
  * 判断当前图层是否是瓦片图层
@@ -10,6 +12,66 @@ export function isTileGroup(layer) {
   var source = layer.getSource();
   return tileVectorParser.includes(source.parser.type);
 }
+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 {
@@ -19,4 +81,71 @@ export function getContainerSize(container) {
   } else {
     return container.getBoundingClientRect();
   }
+}
+export function isTileLoaded(tile) {
+  return tile.layerIDList.length === tile.loadedLayers;
+}
+export function isTileChildLoaded(tile) {
+  var children = tile.children;
+  return children.filter(function (child) {
+    return isTileLoaded(child);
+  }).length === children.length;
+}
+export function isTileParentLoaded(tile) {
+  var parent = tile.parent;
+
+  if (!parent) {
+    return true;
+  } else {
+    return isTileLoaded(parent);
+  }
+}
+export function tileAllLoad(tile, callback) {
+  var timer = window.setInterval(function () {
+    var tileLoaded = isTileLoaded(tile);
+    var tileChildLoaded = isTileChildLoaded(tile);
+    var tileParentLoaded = isTileParentLoaded(tile);
+
+    if (tileLoaded && tileChildLoaded && tileParentLoaded) {
+      callback();
+      window.clearInterval(timer);
+    }
+  }, 36);
+}
+
+function dispatchTileVisibleChange(tile, callback) {
+  if (tile.isVisible) {
+    callback();
+  } else {
+    tileAllLoad(tile, function () {
+      callback();
+    });
+  }
+}
+
+function updateImmediately(layers) {
+  var immediately = true;
+  layers.map(function (layer) {
+    if (layer.type !== 'PointLayer') {
+      immediately = false;
+    }
+  });
+  return immediately;
+}
+
+export function updateTileVisible(tile, layers, layerService) {
+  if (layers.length === 0) {
+    return;
+  }
+
+  if (updateImmediately(layers)) {
+    updateLayersConfig(layers, 'visible', tile.isVisible);
+    layerService.reRender();
+    return;
+  }
+
+  dispatchTileVisibleChange(tile, function () {
+    updateLayersConfig(layers, 'visible', tile.isVisible);
+    layerService.reRender();
+  });
 }

package/es/utils/dataMappingStyle.d.ts

@@ -16,16 +16,16 @@ interface IConfigToUpdate {
  * @param configToUpdate
  * @param layer
  */
-declare function styleDataMapping(configToUpdate: IConfigToUpdate, layer: any): void;
+declare function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any): void;
 /**
  * 根据传入参数 float 的类型和值做相应的操作
  */
-declare function floatStyleMapping(fieldName: string, layer: ILayer, styleFloat: any): void;
+declare function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any): void;
 /**
  * 根据传入参数 stroke / color 的类型和值做相应的操作
  * @param fieldName
  * @param layer
  * @param styleColor
  */
-declare function colorStyleMapping(fieldName: string, layer: ILayer, styleColor: any): void;
-export { styleDataMapping, floatStyleMapping, colorStyleMapping };
+declare function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any): void;
+export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };