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

package/lib/plugins/DataMappingPlugin.js

@@ -1,242 +1,360 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-
-// src/plugins/DataMappingPlugin.ts
-var DataMappingPlugin_exports = {};
-__export(DataMappingPlugin_exports, {
-  default: () => DataMappingPlugin
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(DataMappingPlugin_exports);
-var import_l7_core = require("@antv/l7-core");
-var import_l7_maps = require("@antv/l7-maps");
-var import_l7_utils = require("@antv/l7-utils");
-var import_inversify = require("inversify");
-var import_lodash = require("lodash");
-var import_reflect_metadata = require("reflect-metadata");
-var DataMappingPlugin = class {
-  apply(layer, {
-    styleAttributeService
-  }) {
-    layer.hooks.init.tap("DataMappingPlugin", () => {
-      const source = layer.getSource();
-      if (source.inited) {
-        this.generateMaping(layer, { styleAttributeService });
-      } else {
-        source.once("sourceUpdate", () => {
-          this.generateMaping(layer, { styleAttributeService });
-        });
-      }
-    });
-    layer.hooks.beforeRenderData.tap("DataMappingPlugin", () => {
-      layer.dataState.dataMappingNeedUpdate = false;
-      const source = layer.getSource();
-      if (source.inited) {
-        this.generateMaping(layer, { styleAttributeService });
-      } else {
-        source.once("sourceUpdate", () => {
-          this.generateMaping(layer, { styleAttributeService });
-        });
-      }
-      return true;
-    });
-    layer.hooks.beforeRender.tap("DataMappingPlugin", () => {
-      const source = layer.getSource();
-      if (layer.layerModelNeedUpdate || !source || !source.inited) {
-        return;
-      }
-      const bottomColor = layer.getBottomColor();
-      const attributes = styleAttributeService.getLayerStyleAttributes() || [];
-      const filter = styleAttributeService.getLayerStyleAttribute("filter");
-      const { dataArray } = source.data;
-      const attributesToRemapping = attributes.filter((attribute) => attribute.needRemapping);
-      let filterData = dataArray;
-      if ((filter == null ? void 0 : filter.needRemapping) && (filter == null ? void 0 : filter.scale)) {
-        filterData = dataArray.filter((record) => {
-          return this.applyAttributeMapping(filter, record, bottomColor)[0];
-        });
-      }
-      if (attributesToRemapping.length) {
-        if (filter == null ? void 0 : filter.needRemapping) {
-          layer.setEncodedData(this.mapping(layer, attributes, filterData, void 0, bottomColor));
-          filter.needRemapping = false;
-        } else {
-          layer.setEncodedData(this.mapping(layer, attributesToRemapping, filterData, layer.getEncodedData(), bottomColor));
-        }
-        layer.emit("remapping", null);
-      }
-    });
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
+
+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 _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
+
+var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _l7Maps = require("@antv/l7-maps");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _inversify = require("inversify");
+
+var _lodash = require("lodash");
+
+require("reflect-metadata");
+
+var _dec, _dec2, _dec3, _dec4, _class, _class2, _descriptor, _descriptor2, _descriptor3;
+
+var DataMappingPlugin = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPES.IGlobalConfigService), _dec3 = (0, _inversify.inject)(_l7Core.TYPES.IMapService), _dec4 = (0, _inversify.inject)(_l7Core.TYPES.IFontService), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function DataMappingPlugin() {
+    (0, _classCallCheck2.default)(this, DataMappingPlugin);
+    (0, _initializerDefineProperty2.default)(this, "configService", _descriptor, this);
+    (0, _initializerDefineProperty2.default)(this, "mapService", _descriptor2, this);
+    (0, _initializerDefineProperty2.default)(this, "fontService", _descriptor3, this);
   }
-  generateMaping(layer, {
-    styleAttributeService
-  }) {
-    const bottomColor = layer.getBottomColor();
-    const attributes = styleAttributeService.getLayerStyleAttributes() || [];
-    const filter = styleAttributeService.getLayerStyleAttribute("filter");
-    const { dataArray } = layer.getSource().data;
-    let filterData = dataArray;
-    if (filter == null ? void 0 : filter.scale) {
-      filterData = dataArray.filter((record) => {
-        return this.applyAttributeMapping(filter, record, bottomColor)[0];
+
+  (0, _createClass2.default)(DataMappingPlugin, [{
+    key: "apply",
+    value: function apply(layer, _ref) {
+      var _this = this;
+
+      var styleAttributeService = _ref.styleAttributeService;
+      layer.hooks.init.tap('DataMappingPlugin', function () {
+        // 初始化重新生成 map
+        var source = layer.getSource();
+
+        if (source.inited) {
+          _this.generateMaping(layer, {
+            styleAttributeService: styleAttributeService
+          });
+        } else {
+          source.once('sourceUpdate', function () {
+            _this.generateMaping(layer, {
+              styleAttributeService: styleAttributeService
+            });
+          });
+        } // this.generateMaping(layer, { styleAttributeService });
+
       });
-    }
-    layer.setEncodedData(this.mapping(layer, attributes, filterData, void 0, bottomColor));
-    layer.emit("dataUpdate", null);
-  }
-  getArrowPoints(p1, p2) {
-    const dir = [p2[0] - p1[0], p2[1] - p1[1]];
-    const normalizeDir = (0, import_l7_utils.normalize)(dir);
-    const arrowPoint = [
-      p1[0] + normalizeDir[0] * 1e-4,
-      p1[1] + normalizeDir[1] * 1e-4
-    ];
-    return arrowPoint;
-  }
-  mapping(layer, attributes, data, predata, minimumColor) {
-    const {
-      arrow = {
-        enable: false
-      }
-    } = layer.getLayerConfig();
-    const mappedData = data.map((record, i) => {
-      const preRecord = predata ? predata[i] : {};
-      const encodeRecord = {
-        id: record._id,
-        coordinates: record.coordinates,
-        ...preRecord
-      };
-      attributes.filter((attribute) => attribute.scale !== void 0).forEach((attribute) => {
-        let values = this.applyAttributeMapping(attribute, record, minimumColor);
-        attribute.needRemapping = false;
-        if (attribute.name === "color") {
-          values = values.map((c) => {
-            return (0, import_l7_utils.rgb2arr)(c);
+      layer.hooks.beforeRenderData.tap('DataMappingPlugin', function () {
+        layer.dataState.dataMappingNeedUpdate = false;
+        var source = layer.getSource();
+
+        if (source.inited) {
+          _this.generateMaping(layer, {
+            styleAttributeService: styleAttributeService
+          });
+        } else {
+          source.once('sourceUpdate', function () {
+            _this.generateMaping(layer, {
+              styleAttributeService: styleAttributeService
+            });
+          });
+        } // this.generateMaping(layer, { styleAttributeService });
+
+
+        return true;
+      }); // remapping before render
+
+      layer.hooks.beforeRender.tap('DataMappingPlugin', function () {
+        var source = layer.getSource();
+
+        if (layer.layerModelNeedUpdate || !source || !source.inited) {
+          return;
+        }
+
+        var bottomColor = layer.getBottomColor();
+        var attributes = styleAttributeService.getLayerStyleAttributes() || [];
+        var filter = styleAttributeService.getLayerStyleAttribute('filter');
+        var dataArray = source.data.dataArray;
+        var attributesToRemapping = attributes.filter(function (attribute) {
+          return attribute.needRemapping;
+        } // 如果filter变化
+        );
+        var filterData = dataArray; // 数据过滤完 再执行数据映射
+
+        if (filter !== null && filter !== void 0 && filter.needRemapping && filter !== null && filter !== void 0 && filter.scale) {
+          filterData = dataArray.filter(function (record) {
+            return _this.applyAttributeMapping(filter, record, bottomColor)[0];
           });
         }
-        encodeRecord[attribute.name] = Array.isArray(values) && values.length === 1 ? values[0] : values;
-        if (attribute.name === "shape") {
-          encodeRecord.shape = this.fontService.getIconFontKey(encodeRecord[attribute.name]);
+
+        if (attributesToRemapping.length) {
+          // 过滤数据
+          if (filter !== null && filter !== void 0 && filter.needRemapping) {
+            layer.setEncodedData(_this.mapping(layer, attributes, filterData, undefined, bottomColor));
+            filter.needRemapping = false;
+          } else {
+            layer.setEncodedData(_this.mapping(layer, attributesToRemapping, filterData, layer.getEncodedData(), bottomColor));
+          } // 处理文本更新
+
+
+          layer.emit('remapping', null);
         }
       });
-      if (arrow.enable && (encodeRecord.shape === "line" || encodeRecord.shape === "halfLine")) {
-        const coords = encodeRecord.coordinates;
-        const arrowPoint = this.getArrowPoints(coords[0], coords[1]);
-        encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint);
-      }
-      return encodeRecord;
-    });
-    this.adjustData2Amap2Coordinates(mappedData, layer);
-    this.adjustData2SimpleCoordinates(mappedData);
-    return mappedData;
-  }
-  adjustData2Amap2Coordinates(mappedData, layer) {
-    if (mappedData.length > 0 && this.mapService.version === import_l7_maps.Version["GAODE2.x"]) {
-      const layerCenter = this.getLayerCenter(layer);
-      if (typeof mappedData[0].coordinates[0] === "number") {
-        mappedData.filter((d) => !d.originCoordinates).map((d) => {
-          d.version = import_l7_maps.Version["GAODE2.x"];
-          d.originCoordinates = (0, import_lodash.cloneDeep)(d.coordinates);
-          d.coordinates = this.mapService.lngLatToCoordByLayer(d.coordinates, layerCenter);
-        });
-      } else {
-        mappedData.filter((d) => !d.originCoordinates).map((d) => {
-          d.version = import_l7_maps.Version["GAODE2.x"];
-          d.originCoordinates = (0, import_lodash.cloneDeep)(d.coordinates);
-          d.coordinates = this.mapService.lngLatToCoordsByLayer(d.coordinates, layerCenter);
+    }
+  }, {
+    key: "generateMaping",
+    value: function generateMaping(layer, _ref2) {
+      var _this2 = this;
+
+      var styleAttributeService = _ref2.styleAttributeService;
+      var bottomColor = layer.getBottomColor();
+      var attributes = styleAttributeService.getLayerStyleAttributes() || [];
+      var filter = styleAttributeService.getLayerStyleAttribute('filter');
+      var dataArray = layer.getSource().data.dataArray;
+      var filterData = dataArray; // 数据过滤完 再执行数据映射
+
+      if (filter !== null && filter !== void 0 && filter.scale) {
+        filterData = dataArray.filter(function (record) {
+          return _this2.applyAttributeMapping(filter, record, bottomColor)[0];
         });
       }
+
+      layer.setEncodedData(this.mapping(layer, attributes, filterData, undefined, bottomColor)); // 对外暴露事件
+
+      layer.emit('dataUpdate', null);
     }
-  }
-  getLayerCenter(layer) {
-    const source = layer.getSource();
-    return source.center;
-  }
-  adjustData2SimpleCoordinates(mappedData) {
-    if (mappedData.length > 0 && this.mapService.version === import_l7_maps.Version.SIMPLE) {
-      mappedData.map((d) => {
-        if (!d.simpleCoordinate) {
-          d.coordinates = this.unProjectCoordinates(d.coordinates);
-          d.simpleCoordinate = true;
+  }, {
+    key: "getArrowPoints",
+    value: function getArrowPoints(p1, p2) {
+      var dir = [p2[0] - p1[0], p2[1] - p1[1]];
+      var normalizeDir = (0, _l7Utils.normalize)(dir);
+      var arrowPoint = [p1[0] + normalizeDir[0] * 0.0001, p1[1] + normalizeDir[1] * 0.0001];
+      return arrowPoint;
+    }
+  }, {
+    key: "mapping",
+    value: function mapping(layer, attributes, data, predata, minimumColor) {
+      var _this3 = this;
+
+      var _ref3 = layer.getLayerConfig(),
+          _ref3$arrow = _ref3.arrow,
+          arrow = _ref3$arrow === void 0 ? {
+        enable: false
+      } : _ref3$arrow;
+
+      var mappedData = data.map(function (record, i) {
+        var preRecord = predata ? predata[i] : {};
+        var encodeRecord = (0, _objectSpread2.default)({
+          id: record._id,
+          coordinates: record.coordinates
+        }, preRecord);
+        attributes.filter(function (attribute) {
+          return attribute.scale !== undefined;
+        }).forEach(function (attribute) {
+          // console.log('record', record)
+          var values = _this3.applyAttributeMapping(attribute, record, minimumColor); // console.log('values', values)
+
+
+          attribute.needRemapping = false; // TODO: 支持每个属性配置 postprocess
+
+          if (attribute.name === 'color') {
+            // console.log('attribute', attribute)
+            values = values.map(function (c) {
+              return (0, _l7Utils.rgb2arr)(c);
+            });
+          } // @ts-ignore
+
+
+          encodeRecord[attribute.name] = Array.isArray(values) && values.length === 1 ? values[0] : values; // 增加对 layer/text/iconfont unicode 映射的解析
+
+          if (attribute.name === 'shape') {
+            encodeRecord.shape = _this3.fontService.getIconFontKey(encodeRecord[attribute.name]);
+          }
+        });
+
+        if (arrow.enable && (encodeRecord.shape === 'line' || encodeRecord.shape === 'halfLine')) {
+          // 只有在线图层且支持配置箭头的时候进行插入顶点的处理
+          var coords = encodeRecord.coordinates;
+
+          var arrowPoint = _this3.getArrowPoints(coords[0], coords[1]);
+
+          encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint);
         }
-      });
+
+        return encodeRecord;
+      }); // console.log('mappedData', mappedData)
+      // 调整数据兼容 Amap2.0
+
+      this.adjustData2Amap2Coordinates(mappedData, layer); // 调整数据兼容 SimpleCoordinates
+
+      this.adjustData2SimpleCoordinates(mappedData);
+      return mappedData;
     }
-  }
-  unProjectCoordinates(coordinates) {
-    if (typeof coordinates[0] === "number") {
-      return this.mapService.simpleMapCoord.unproject(coordinates);
+  }, {
+    key: "adjustData2Amap2Coordinates",
+    value: function adjustData2Amap2Coordinates(mappedData, layer) {
+      var _this4 = this;
+
+      // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
+      if (mappedData.length > 0 && this.mapService.version === _l7Maps.Version['GAODE2.x']) {
+        var layerCenter = this.getLayerCenter(layer);
+
+        if (typeof mappedData[0].coordinates[0] === 'number') {
+          // 单个的点数据
+          // @ts-ignore
+          mappedData // TODO: 避免经纬度被重复计算导致坐标位置偏移
+          .filter(function (d) {
+            return !d.originCoordinates;
+          }).map(function (d) {
+            d.version = _l7Maps.Version['GAODE2.x']; // @ts-ignore
+
+            d.originCoordinates = (0, _lodash.cloneDeep)(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
+            // @ts-ignore
+            // d.coordinates = this.mapService.lngLatToCoord(d.coordinates);
+
+            d.coordinates = _this4.mapService.lngLatToCoordByLayer(d.coordinates, layerCenter);
+          });
+        } else {
+          // 连续的线、面数据
+          // @ts-ignore
+          mappedData // TODO: 避免经纬度被重复计算导致坐标位置偏移
+          .filter(function (d) {
+            return !d.originCoordinates;
+          }).map(function (d) {
+            d.version = _l7Maps.Version['GAODE2.x']; // @ts-ignore
+
+            d.originCoordinates = (0, _lodash.cloneDeep)(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
+            // @ts-ignore
+            // d.coordinates = this.mapService.lngLatToCoords(d.coordinates);
+
+            d.coordinates = _this4.mapService.lngLatToCoordsByLayer(d.coordinates, layerCenter);
+          });
+        }
+      }
+    }
+  }, {
+    key: "getLayerCenter",
+    value: function getLayerCenter(layer) {
+      var source = layer.getSource();
+      return source.center;
     }
-    if (coordinates[0] && coordinates[0][0] instanceof Array) {
-      const coords = [];
-      coordinates.map((coord) => {
-        const c1 = [];
-        coord.map((co) => {
-          c1.push(this.mapService.simpleMapCoord.unproject(co));
+  }, {
+    key: "adjustData2SimpleCoordinates",
+    value: function adjustData2SimpleCoordinates(mappedData) {
+      var _this5 = this;
+
+      if (mappedData.length > 0 && this.mapService.version === _l7Maps.Version.SIMPLE) {
+        mappedData.map(function (d) {
+          if (!d.simpleCoordinate) {
+            d.coordinates = _this5.unProjectCoordinates(d.coordinates);
+            d.simpleCoordinate = true;
+          }
         });
-        coords.push(c1);
-      });
-      return coords;
-    } else {
-      const coords = [];
-      coordinates.map((coord) => {
-        coords.push(this.mapService.simpleMapCoord.unproject(coord));
-      });
-      return coords;
+      }
     }
-  }
-  applyAttributeMapping(attribute, record, minimumColor) {
-    var _a;
-    if (!attribute.scale) {
-      return [];
+  }, {
+    key: "unProjectCoordinates",
+    value: function unProjectCoordinates(coordinates) {
+      var _this6 = this;
+
+      if (typeof coordinates[0] === 'number') {
+        return this.mapService.simpleMapCoord.unproject(coordinates);
+      }
+
+      if (coordinates[0] && coordinates[0][0] instanceof Array) {
+        // @ts-ignore
+        var coords = [];
+        coordinates.map(function (coord) {
+          // @ts-ignore
+          var c1 = [];
+          coord.map(function (co) {
+            c1.push(_this6.mapService.simpleMapCoord.unproject(co));
+          }); // @ts-ignore
+
+          coords.push(c1);
+        }); // @ts-ignore
+
+        return coords;
+      } else {
+        // @ts-ignore
+        var _coords = []; // @ts-ignore
+
+        coordinates.map(function (coord) {
+          _coords.push(_this6.mapService.simpleMapCoord.unproject(coord));
+        }); // @ts-ignore
+
+        return _coords;
+      }
     }
-    const scalers = ((_a = attribute == null ? void 0 : attribute.scale) == null ? void 0 : _a.scalers) || [];
-    const params = [];
-    scalers.forEach(({ field }) => {
-      var _a2;
-      if (record.hasOwnProperty(field) || ((_a2 = attribute.scale) == null ? void 0 : _a2.type) === "variable") {
-        params.push(record[field]);
+  }, {
+    key: "applyAttributeMapping",
+    value: function applyAttributeMapping(attribute, record, minimumColor) {
+      var _attribute$scale;
+
+      if (!attribute.scale) {
+        return [];
       }
-    });
-    const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
-    if (attribute.name === "color" && !(0, import_l7_utils.isColor)(mappingResult[0])) {
-      return [minimumColor];
+
+      var scalers = (attribute === null || attribute === void 0 ? void 0 : (_attribute$scale = attribute.scale) === null || _attribute$scale === void 0 ? void 0 : _attribute$scale.scalers) || [];
+      var params = [];
+      scalers.forEach(function (_ref4) {
+        var _attribute$scale2;
+
+        var field = _ref4.field;
+
+        if (record.hasOwnProperty(field) || ((_attribute$scale2 = attribute.scale) === null || _attribute$scale2 === void 0 ? void 0 : _attribute$scale2.type) === 'variable') {
+          // TODO:多字段，常量
+          params.push(record[field]);
+        }
+      }); // console.log('params', params)
+      // console.log('attribute', attribute)
+
+      var mappingResult = attribute.mapping ? attribute.mapping(params) : [];
+
+      if (attribute.name === 'color' && !(0, _l7Utils.isColor)(mappingResult[0])) {
+        return [minimumColor];
+      }
+
+      return mappingResult; // return attribute.mapping ? attribute.mapping(params) : [];
     }
-    return mappingResult;
-  }
-};
-__decorateClass([
-  (0, import_inversify.inject)(import_l7_core.TYPES.IGlobalConfigService)
-], DataMappingPlugin.prototype, "configService", 2);
-__decorateClass([
-  (0, import_inversify.inject)(import_l7_core.TYPES.IMapService)
-], DataMappingPlugin.prototype, "mapService", 2);
-__decorateClass([
-  (0, import_inversify.inject)(import_l7_core.TYPES.IFontService)
-], DataMappingPlugin.prototype, "fontService", 2);
-DataMappingPlugin = __decorateClass([
-  (0, import_inversify.injectable)()
-], DataMappingPlugin);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+  }]);
+  return DataMappingPlugin;
+}(), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "configService", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "mapService", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "fontService", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
+exports.default = DataMappingPlugin;