@antv/l7-layers 2.10.3 → 2.10.5

package/es/tile/style/constants.d.ts

@@ -1 +1,13 @@
-export declare const ProxyFuncs: string[];
+/**
+ * 瓦片图层的样式
+ */
+export declare const Attributes: string[];
+export declare type IStyles = 'PointLayer' | 'LineLayer' | 'PolygonLayer' | 'RasterLayer' | 'MaskLayer' | 'TileDebugLayer';
+export declare const styles: {
+    PointLayer: string[];
+    LineLayer: string[];
+    PolygonLayer: string[];
+    RasterLayer: string[];
+    MaskLayer: never[];
+    TileDebugLayer: never[];
+};

package/es/tile/style/constants.js

@@ -1,8 +1,17 @@
-// TileLayer 需要代理的子图层的方法
-// 一般都是在 BaseLayer 上的方法
-export var ProxyFuncs = [
 /**
- * 1. 需要作用到所属子图层才会生效的方法
- * 2. 不需要主动重新创建 model 的方法
+ * 瓦片图层的样式
  */
-'shape', 'color', 'size', 'style', 'animate', 'filter', 'rotate', 'scale', 'setBlend', 'setSelect', 'setActive'];
+export var Attributes = ['size', 'color', 'shape'];
+var common = ['opacity', 'zIndex'];
+var rasterLayer = ['mask', 'rampColors', 'domain', 'clampHigh', 'clampLow', 'pixelConstant', 'pixelConstantR', 'pixelConstantG', 'pixelConstantB', 'pixelConstantRGB'].concat(common);
+var pointLayer = ['stroke', 'strokeWidth', 'strokeOpacity', 'color', 'shape', 'size'].concat(common);
+var lineLayer = ['stroke', 'strokeWidth', 'strokeOpacity', 'color', 'shape', 'size'].concat(common);
+var polygonLayer = ['color', 'shape'].concat(common);
+export var styles = {
+  'PointLayer': pointLayer,
+  'LineLayer': lineLayer,
+  'PolygonLayer': polygonLayer,
+  'RasterLayer': rasterLayer,
+  'MaskLayer': [],
+  'TileDebugLayer': []
+};

package/es/tile/style/utils.d.ts

@@ -1,2 +1,9 @@
-import { ILayer } from '@antv/l7-core';
+import { ILayer, IRendererService, ScaleAttributeType, IScaleValue } from '@antv/l7-core';
+import { IColorRamp } from '@antv/l7-utils';
+export declare function updateTexture(config: IColorRamp, layers: ILayer[], rendererService: IRendererService): import("@antv/l7-core").ITexture2D;
 export declare function updateLayersConfig(layers: ILayer[], key: string, value: any): void;
+export declare function setStyleAttributeField(layer: ILayer, parent: ILayer, style: ScaleAttributeType, value: IScaleValue | undefined | string | string[]): ILayer | undefined;
+export declare function getDefaultStyleAttributeField(layer: ILayer, type: string, style: string): string | string[] | 1;
+export declare function getLayerShape(layerType: string, layer: ILayer): string | string[];
+export declare function parseScaleValue(value: IScaleValue | string, type: string): (string | number | any[])[] | (import("@antv/l7-core").StyleAttributeField | ((...args: any[]) => [] | undefined))[];
+export declare function setScale(layer: ILayer, parent: ILayer): void;

package/es/tile/style/utils.js

@@ -1,4 +1,22 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { generateColorRamp } from '@antv/l7-utils';
+export function updateTexture(config, layers, rendererService) {
+  var createTexture2D = rendererService.createTexture2D;
+  var imageData = generateColorRamp(config);
+  var texture = createTexture2D({
+    data: imageData.data,
+    width: imageData.width,
+    height: imageData.height,
+    flipY: false
+  });
+  layers.map(function (layer) {
+    layer.updateLayerConfig({
+      colorTexture: texture
+    });
+  });
+  return texture;
+}
 export function updateLayersConfig(layers, key, value) {
   layers.map(function (layer) {
     if (key === 'mask') {
@@ -10,4 +28,112 @@ export function updateLayersConfig(layers, key, value) {
       layer.updateLayerConfig(_defineProperty({}, key, value));
     }
   });
+}
+export function setStyleAttributeField(layer, parent, style, value) {
+  if (Array.isArray(value)) {
+    // @ts-ignore
+    layer[style].apply(layer, _toConsumableArray(value));
+    return;
+  }
+
+  if (typeof value === 'string') {
+    layer[style](value);
+    return;
+  }
+
+  var defaultValue = getDefaultStyleAttributeField(layer, parent.type, style);
+
+  if (!value) {
+    layer[style](defaultValue);
+    return layer;
+  }
+
+  var params = parseScaleValue(value, style);
+
+  if (params.length === 0) {
+    layer[style](defaultValue);
+  } else {
+    // @ts-ignore
+    layer[style].apply(layer, _toConsumableArray(params));
+  }
+}
+export function getDefaultStyleAttributeField(layer, type, style) {
+  switch (style) {
+    case 'size':
+      return 1;
+
+    case 'color':
+      return '#fff';
+
+    case 'shape':
+      return getLayerShape(type, layer);
+
+    default:
+      return '';
+  }
+}
+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 parseScaleValue(value, type) {
+  if (type === 'shape') {
+    if (typeof value === 'string') {
+      return [value];
+    } else if (value !== null && value !== void 0 && value.field) {
+      return [value === null || value === void 0 ? void 0 : value.field];
+    } else {
+      return [];
+    }
+  }
+
+  var _ref = value,
+      field = _ref.field,
+      values = _ref.values,
+      callback = _ref.callback;
+
+  if (field && values && Array.isArray(values)) {
+    return [field, values];
+  } else if (field && callback) {
+    return [field, callback];
+  } else if (field) {
+    return [field];
+  }
+
+  return [];
+}
+export function setScale(layer, parent) {
+  var scaleOptions = parent.tileLayer.scaleField;
+  var scaleKeys = Object.keys(scaleOptions);
+  scaleKeys.map(function (key) {
+    layer.scale(key, scaleOptions[key]);
+  });
 }

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

@@ -0,0 +1,45 @@
+import { ILayer, IMapService, IParseDataItem, IRendererService, ISubLayerInitOptions } from '@antv/l7-core';
+import Source from '@antv/l7-source';
+import { Tile, TilesetManager } from '@antv/l7-utils';
+import { ILayerTileConfig, ITileFactory, ITileFactoryOptions, ITileStyles, Timeout } from '../interface';
+export default class TileFactory implements ITileFactory {
+    type: string;
+    parentLayer: ILayer;
+    mapService: IMapService;
+    rendererService: IRendererService;
+    outSideEventTimer: Timeout | null;
+    protected zoomOffset: number;
+    protected tilesetManager: TilesetManager;
+    protected layers: ILayer[];
+    private eventCache;
+    constructor(option: ITileFactoryOptions);
+    createTile(tile: Tile, initOptions: ISubLayerInitOptions): {
+        layers: ILayer[];
+        layerIDList: string[];
+    };
+    getFeatureData(tile: Tile, initOptions: ISubLayerInitOptions): {
+        features: never[];
+        featureId: null;
+        vectorTileLayer: null;
+        source: null;
+    } | {
+        features: any[];
+        featureId: string | undefined;
+        vectorTileLayer: any;
+        source: Source;
+    };
+    createLayer(tileLayerOption: ILayerTileConfig): any;
+    updateStyle(styles: ITileStyles): string;
+    protected getTile(lng: number, lat: number): Tile;
+    private bindVectorEvent;
+    private readRasterTile;
+    private bindRasterEvent;
+    private bindCommonEvent;
+    protected emitEvent(layers: ILayer[]): void;
+    protected emitRasterEvent(layers: ILayer[]): void;
+    protected getCombineFeature(features: IParseDataItem[]): any;
+    protected getFeatureAndEmitEvent(eventName: string, e: any): void;
+    private getAllFeatures;
+    private getLayerInitOption;
+    private handleOutsideEvent;
+}

package/es/tile/tileFactory/base.js

@@ -0,0 +1,403 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 Source from '@antv/l7-source';
+import { setStyleAttributeField, setScale } from "../style/utils";
+import { registerLayers } from "../utils";
+import { readRasterValue } from "../interaction/getRasterData";
+import VectorLayer from "./layers/vectorLayer";
+import * as turf from '@turf/helpers';
+import union from '@turf/union';
+import clone from '@turf/clone';
+import polygonToLineString from '@turf/polygon-to-line';
+var EMPTY_FEATURE_DATA = {
+  features: [],
+  featureId: null,
+  vectorTileLayer: null,
+  source: null
+};
+
+var TileFactory = /*#__PURE__*/function () {
+  // 用于记录图层内事件，辅助判断图层外事件逻辑
+  function TileFactory(option) {
+    _classCallCheck(this, TileFactory);
+
+    _defineProperty(this, "outSideEventTimer", null);
+
+    _defineProperty(this, "eventCache", {
+      click: 0,
+      mousemove: 0,
+      mouseup: 0,
+      mousedown: 0,
+      contextmenu: 0
+    });
+
+    this.parentLayer = option.parent;
+    this.mapService = option.mapService;
+    this.rendererService = option.rendererService;
+    var source = this.parentLayer.getSource();
+    this.zoomOffset = source.parser.zoomOffset || 0;
+    this.tilesetManager = source.tileset;
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  _createClass(TileFactory, [{
+    key: "createTile",
+    value: function createTile(tile, initOptions) {
+      return {
+        layers: [],
+        layerIDList: []
+      };
+    }
+  }, {
+    key: "getFeatureData",
+    value: function getFeatureData(tile, initOptions) {
+      var sourceLayer = initOptions.sourceLayer,
+          featureId = initOptions.featureId,
+          _initOptions$transfor = initOptions.transforms,
+          transforms = _initOptions$transfor === void 0 ? [] : _initOptions$transfor,
+          layerType = initOptions.layerType,
+          shape = initOptions.shape;
+
+      if (!sourceLayer) {
+        return EMPTY_FEATURE_DATA;
+      }
+
+      var vectorTileLayer = tile.data.layers[sourceLayer];
+      var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
+
+      if (!(Array.isArray(features) && features.length > 0)) {
+        return EMPTY_FEATURE_DATA;
+      } else {
+        var geofeatures = [];
+
+        if (layerType === 'LineLayer' && shape === 'simple') {
+          features.map(function (feature) {
+            var cloneFeature = clone(feature);
+
+            if (cloneFeature.geometry.type === 'MultiPolygon') {
+              var _geofeatures;
+
+              // @ts-ignore
+              var linefeatures = polygonToLineString(cloneFeature).features;
+
+              (_geofeatures = geofeatures).push.apply(_geofeatures, _toConsumableArray(linefeatures));
+            } else if (cloneFeature.geometry.type === 'Polygon') {
+              cloneFeature.geometry.type = 'MultiLineString';
+              geofeatures.push(cloneFeature);
+            } else {
+              geofeatures.push(cloneFeature);
+            }
+          });
+        } else {
+          geofeatures = features;
+        }
+
+        var source = new Source({
+          type: 'FeatureCollection',
+          features: geofeatures
+        }, {
+          parser: {
+            type: 'geojson',
+            featureId: featureId,
+            cancelExtent: true
+          },
+          transforms: transforms
+        });
+        return {
+          features: geofeatures,
+          featureId: featureId,
+          vectorTileLayer: vectorTileLayer,
+          source: source
+        };
+      }
+    }
+  }, {
+    key: "createLayer",
+    value: function createLayer(tileLayerOption) {
+      var L7Layer = tileLayerOption.L7Layer,
+          tile = tileLayerOption.tile,
+          initOptions = tileLayerOption.initOptions,
+          vectorTileLayer = tileLayerOption.vectorTileLayer,
+          source = tileLayerOption.source,
+          _tileLayerOption$need = tileLayerOption.needListen,
+          needListen = _tileLayerOption$need === void 0 ? true : _tileLayerOption$need;
+      var mask = initOptions.mask,
+          color = initOptions.color,
+          layerType = initOptions.layerType,
+          size = initOptions.size,
+          shape = initOptions.shape,
+          usage = initOptions.usage,
+          basemapColor = initOptions.basemapColor,
+          basemapSize = initOptions.basemapSize;
+      var FactoryTileLayer = L7Layer ? L7Layer : VectorLayer;
+      var layer = new FactoryTileLayer(_objectSpread({
+        visible: tile.isVisible,
+        tileOrigin: vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.l7TileOrigin,
+        coord: vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.l7TileCoord,
+        needListen: needListen
+      }, this.getLayerInitOption(initOptions)));
+      if (layerType) layer.type = layerType; // Tip: sign tile layer
+
+      layer.isTileLayer = true; // vector 、raster
+      // vector layer set event
+
+      if (layer.isVector && usage !== 'basemap') {
+        this.emitEvent([layer]);
+        layer.select(true);
+      } // set source
+
+
+      layer.source(source); // set scale attribute field
+
+      setStyleAttributeField(layer, this.parentLayer, 'shape', shape);
+
+      if (usage !== 'basemap') {
+        // set scale
+        setScale(layer, this.parentLayer);
+        setStyleAttributeField(layer, this.parentLayer, 'color', color);
+        setStyleAttributeField(layer, this.parentLayer, 'size', size);
+      } else {
+        layer.style({
+          color: basemapColor,
+          size: basemapSize
+        });
+      } // set mask
+
+
+      if (mask && layer.isVector) {
+        var masklayer = new VectorLayer({
+          layerType: "MaskLayer"
+        }).source({
+          type: 'FeatureCollection',
+          features: [tile.bboxPolygon]
+        }, {
+          parser: {
+            type: 'geojson',
+            cancelExtent: true
+          }
+        });
+        registerLayers(this.parentLayer, [masklayer]);
+        layer.addMaskLayer(masklayer);
+      }
+
+      this.layers = [layer];
+      return layer;
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  }, {
+    key: "updateStyle",
+    value: function updateStyle(styles) {
+      return '';
+    }
+  }, {
+    key: "getTile",
+    value: function getTile(lng, lat) {
+      var zoom = this.mapService.getZoom();
+      return this.tilesetManager.getTileByLngLat(lng, lat, zoom);
+    }
+  }, {
+    key: "bindVectorEvent",
+    value: function bindVectorEvent(layer) {
+      var _this = this;
+
+      layer.on('click', function (e) {
+        _this.eventCache.click = 1;
+
+        _this.getFeatureAndEmitEvent('subLayerClick', e);
+      });
+      layer.on('mousemove', function (e) {
+        _this.eventCache.mousemove = 1;
+
+        _this.getFeatureAndEmitEvent('subLayerMouseMove', e);
+      });
+      layer.on('mouseenter', function (e) {
+        _this.getFeatureAndEmitEvent('subLayerMouseEnter', e);
+      });
+    }
+  }, {
+    key: "readRasterTile",
+    value: function readRasterTile(e, name) {
+      var _e$lngLat = e.lngLat,
+          lng = _e$lngLat.lng,
+          lat = _e$lngLat.lat;
+      var tile = this.getTile(lng, lat);
+      if (!tile) return;
+      var data = readRasterValue(tile, this.mapService, e.x, e.y);
+      e.value = data;
+      this.parentLayer.emit(name, e);
+    }
+  }, {
+    key: "bindRasterEvent",
+    value: function bindRasterEvent(layer) {
+      var _this2 = this;
+
+      layer.on('click', function (e) {
+        _this2.eventCache.click = 1;
+
+        _this2.readRasterTile(e, 'subLayerClick');
+      });
+      layer.on('mousemove', function (e) {
+        _this2.eventCache.mousemove = 1;
+
+        _this2.readRasterTile(e, 'subLayerMouseMove');
+      });
+      layer.on('mouseenter', function (e) {
+        _this2.readRasterTile(e, 'subLayerMouseMove');
+      });
+    }
+  }, {
+    key: "bindCommonEvent",
+    value: function bindCommonEvent(layer) {
+      var _this3 = this;
+
+      layer.on('mouseup', function (e) {
+        _this3.eventCache.mouseup = 1;
+
+        _this3.getFeatureAndEmitEvent('subLayerMouseUp', e);
+      });
+      layer.on('mouseout', function (e) {
+        _this3.getFeatureAndEmitEvent('subLayerMouseOut', e);
+      });
+      layer.on('mousedown', function (e) {
+        _this3.eventCache.mousedown = 1;
+
+        _this3.getFeatureAndEmitEvent('subLayerMouseDown', e);
+      });
+      layer.on('contextmenu', function (e) {
+        _this3.eventCache.contextmenu = 1;
+
+        _this3.getFeatureAndEmitEvent('subLayerContextmenu', e);
+      }); // out side
+
+      layer.on('unclick', function (e) {
+        return _this3.handleOutsideEvent('click', 'subLayerUnClick', layer, e);
+      });
+      layer.on('unmouseup', function (e) {
+        return _this3.handleOutsideEvent('mouseup', 'subLayerUnMouseUp', layer, e);
+      });
+      layer.on('unmousedown', function (e) {
+        return _this3.handleOutsideEvent('mousedown', 'subLayerUnMouseDown', layer, e);
+      });
+      layer.on('uncontextmenu', function (e) {
+        return _this3.handleOutsideEvent('contextmenu', 'subLayerUnContextmenu', layer, e);
+      });
+    }
+  }, {
+    key: "emitEvent",
+    value: function emitEvent(layers) {
+      var _this4 = this;
+
+      layers.map(function (layer) {
+        layer.once('modelLoaded', function () {
+          _this4.bindVectorEvent(layer);
+
+          _this4.bindCommonEvent(layer);
+        });
+      });
+    }
+  }, {
+    key: "emitRasterEvent",
+    value: function emitRasterEvent(layers) {
+      var _this5 = this;
+
+      layers.map(function (layer) {
+        layer.once('modelLoaded', function () {
+          _this5.bindRasterEvent(layer);
+
+          _this5.bindCommonEvent(layer);
+        });
+      });
+    }
+  }, {
+    key: "getCombineFeature",
+    value: function getCombineFeature(features) {
+      var p = null;
+      var properties = features[0];
+      features.map(function (feature) {
+        var polygon = turf.polygon(feature.coordinates);
+
+        if (p === null) {
+          p = polygon;
+        }
+
+        {
+          p = union(p, polygon);
+        }
+      });
+
+      if (properties) {
+        p.properties = _objectSpread({}, properties);
+      }
+
+      return p;
+    }
+  }, {
+    key: "getFeatureAndEmitEvent",
+    value: function getFeatureAndEmitEvent(eventName, e) {
+      var featureId = e.featureId;
+      var features = this.getAllFeatures(featureId);
+
+      try {
+        e.feature = this.getCombineFeature(features);
+      } catch (err) {
+        console.warn('Combine Featuer Err! Return First Feature!');
+        e.feature = features[0];
+      }
+
+      this.parentLayer.emit(eventName, e);
+    }
+  }, {
+    key: "getAllFeatures",
+    value: function getAllFeatures(featureId) {
+      var allLayers = this.parentLayer.tileLayer.children;
+      var features = [];
+      allLayers.map(function (layer) {
+        var source = layer.getSource();
+        source.data.dataArray.map(function (feature) {
+          if (feature._id === featureId) {
+            features.push(feature);
+          }
+        });
+      });
+      return features;
+    }
+  }, {
+    key: "getLayerInitOption",
+    value: function getLayerInitOption(initOptions) {
+      var option = _objectSpread({}, initOptions);
+
+      delete option.color;
+      delete option.shape;
+      delete option.size;
+      delete option.coords;
+      delete option.sourceLayer;
+      delete option.coords;
+      return option;
+    }
+  }, {
+    key: "handleOutsideEvent",
+    value: function handleOutsideEvent(type, emitType, layer, e) {
+      var _this6 = this;
+
+      if (this.outSideEventTimer) {
+        clearTimeout(this.outSideEventTimer);
+        this.outSideEventTimer = null;
+      }
+
+      this.outSideEventTimer = setTimeout(function () {
+        if (_this6.eventCache[type] > 0) {
+          _this6.eventCache[type] = 0;
+        } else {
+          _this6.getFeatureAndEmitEvent(emitType, e);
+        }
+      }, 64);
+    }
+  }]);
+
+  return TileFactory;
+}();
+
+export { TileFactory as default };

package/es/tile/tileFactory/index.d.ts

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