@antv/l7-layers 2.9.37-alpha.2 → 2.9.37-alpha.3

package/lib/mask/models/fill.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _lodash = require("lodash");
+
+var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
+
+var _triangulation = require("../../core/triangulation");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+/* babel-plugin-inline-import '../../shader/minify_frag.glsl' */
+var mask_frag = "uniform float u_opacity : 1.0;\nuniform vec4 u_color;\n\nvoid main() {\n  gl_FragColor = u_color;\n  gl_FragColor.a *= u_opacity;\n}\n";
+
+/* babel-plugin-inline-import '../shaders/mask_vert.glsl' */
+var mask_vert = "attribute vec3 a_Position;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\n\n#pragma include \"projection\"\n\nvoid main() {\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));\n  } else {\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n  }\n}\n\n";
+
+var MaskModel = /*#__PURE__*/function (_BaseModel) {
+  (0, _inherits2.default)(MaskModel, _BaseModel);
+
+  var _super = _createSuper(MaskModel);
+
+  function MaskModel() {
+    (0, _classCallCheck2.default)(this, MaskModel);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(MaskModel, [{
+    key: "getUninforms",
+    value: function getUninforms() {
+      var _ref = this.layer.getLayerConfig(),
+          _ref$opacity = _ref.opacity,
+          opacity = _ref$opacity === void 0 ? 0 : _ref$opacity,
+          _ref$color = _ref.color,
+          color = _ref$color === void 0 ? '#000' : _ref$color;
+
+      return {
+        u_opacity: (0, _lodash.isNumber)(opacity) ? opacity : 0.0,
+        u_color: (0, _l7Utils.rgb2arr)(color)
+      };
+    }
+  }, {
+    key: "initModels",
+    value: function initModels(callbackModel) {
+      this.buildModels(callbackModel);
+    }
+  }, {
+    key: "buildModels",
+    value: function () {
+      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(callbackModel) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                this.layer.buildLayerModel({
+                  moduleName: 'mask',
+                  vertexShader: mask_vert,
+                  fragmentShader: mask_frag,
+                  triangulation: _triangulation.polygonTriangulation,
+                  depth: {
+                    enable: false
+                  },
+                  blend: this.getBlend(),
+                  stencil: {
+                    enable: true,
+                    mask: 0xff,
+                    func: {
+                      cmp: _l7Core.gl.ALWAYS,
+                      ref: 1,
+                      mask: 0xff
+                    },
+                    opFront: {
+                      fail: _l7Core.gl.REPLACE,
+                      zfail: _l7Core.gl.REPLACE,
+                      zpass: _l7Core.gl.REPLACE
+                    }
+                  },
+                  pick: false
+                }).then(function (model) {
+                  callbackModel([model]);
+                }).catch(function (err) {
+                  console.warn(err);
+                  callbackModel([]);
+                });
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function buildModels(_x) {
+        return _buildModels.apply(this, arguments);
+      }
+
+      return buildModels;
+    }()
+  }, {
+    key: "clearModels",
+    value: function clearModels() {
+      var refresh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      refresh && this.layerService.clear();
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes() {
+      return '';
+    }
+  }]);
+  return MaskModel;
+}(_BaseModel2.default);
+
+exports.default = MaskModel;

package/lib/mask/models/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _tileModel = _interopRequireDefault(require("../../tile/models/tileModel"));
+
+var _fill = _interopRequireDefault(require("./fill"));
+
+var MaskModels = {
+  fill: _fill.default,
+  vectorMask: _tileModel.default
+};
+var _default = MaskModels;
+exports.default = _default;

package/lib/mask/shaders/mask_vert.glsl

@@ -0,0 +1,16 @@
+attribute vec3 a_Position;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+
+void main() {
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+}
+

package/lib/plugins/DataMappingPlugin.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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, _class, _class2, _descriptor, _descriptor2;
+
+var DataMappingPlugin = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPES.IMapService), _dec3 = (0, _inversify.inject)(_l7Core.TYPES.IFontService), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function DataMappingPlugin() {
+    (0, _classCallCheck2.default)(this, DataMappingPlugin);
+    (0, _initializerDefineProperty2.default)(this, "mapService", _descriptor, this);
+    (0, _initializerDefineProperty2.default)(this, "fontService", _descriptor2, this);
+  }
+
+  (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('update', function () {
+            _this.generateMaping(layer, {
+              styleAttributeService: styleAttributeService
+            });
+          });
+        }
+      });
+      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('update', function () {
+            _this.generateMaping(layer, {
+              styleAttributeService: styleAttributeService
+            });
+          });
+        }
+
+        return true;
+      }); // remapping before render
+
+      layer.hooks.beforeRender.tap('DataMappingPlugin', function () {
+        var _layer$getLayerConfig = layer.getLayerConfig(),
+            usage = _layer$getLayerConfig.usage;
+
+        if (usage === 'basemap') return;
+        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];
+          });
+        }
+
+        if (attributesToRemapping.length) {
+          // 过滤数据
+          if (filter !== null && filter !== void 0 && filter.needRemapping) {
+            var encodeData = _this.mapping(layer, attributes, filterData, undefined, bottomColor);
+
+            layer.setEncodedData(encodeData);
+            filter.needRemapping = false;
+          } else {
+            var _encodeData = _this.mapping(layer, attributesToRemapping, filterData, layer.getEncodedData(), bottomColor);
+
+            layer.setEncodedData(_encodeData);
+          } // 处理文本更新
+
+
+          layer.emit('remapping', null);
+        }
+      });
+    }
+  }, {
+    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];
+        });
+      }
+
+      var encodeData = this.mapping(layer, attributes, filterData, undefined, bottomColor);
+      layer.setEncodedData(encodeData); // 对外暴露事件
+
+      layer.emit('dataUpdate', null);
+    }
+  }, {
+    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,
+          usage = _ref3.usage;
+
+      if (usage === 'basemap') {
+        return this.mapLayerMapping(layer, attributes, data, predata);
+      }
+
+      var usedAttributes = attributes.filter(function (attribute) {
+        return attribute.scale !== undefined;
+      });
+      var mappedData = data.map(function (record, i) {
+        var preRecord = predata ? predata[i] : {};
+        var encodeRecord = (0, _objectSpread2.default)({
+          id: record._id,
+          coordinates: record.coordinates
+        }, preRecord);
+        usedAttributes.forEach(function (attribute) {
+          var values = _this3.applyAttributeMapping(attribute, record, minimumColor);
+
+          attribute.needRemapping = false; // TODO: 支持每个属性配置 postprocess
+
+          if (attribute.name === 'color') {
+            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; // @ts-ignore
+
+          if (layer.arrowInsertCount < layer.encodeDataLength) {
+            // Tip: arrowInsert 的判断用于确保每一条线数据 arrow 的属性点只会被植入一次
+            var arrowPoint = _this3.getArrowPoints(coords[0], coords[1]);
+
+            encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint); // @ts-ignore
+
+            layer.arrowInsertCount++;
+          }
+        }
+
+        return encodeRecord;
+      }); // 调整数据兼容 Amap2.0
+
+      this.adjustData2Amap2Coordinates(mappedData, layer); // 调整数据兼容 SimpleCoordinates
+
+      this.adjustData2SimpleCoordinates(mappedData);
+      return mappedData;
+    }
+  }, {
+    key: "mapLayerMapping",
+    value: function mapLayerMapping(layer, attributes, data, predata) {
+      var _this4 = this;
+
+      var usedAttributes = attributes.filter(function (attribute) {
+        return attribute.scale !== undefined;
+      });
+      var mappedData = data.map(function (record, i) {
+        var preRecord = predata ? predata[i] : {};
+        var encodeRecord = (0, _objectSpread2.default)({
+          id: record._id,
+          coordinates: record.coordinates
+        }, preRecord);
+        usedAttributes.forEach(function (attribute) {
+          var _layer$shapeOption;
+
+          if (attribute.name === 'shape' && // @ts-ignore
+          ((_layer$shapeOption = layer.shapeOption) === null || _layer$shapeOption === void 0 ? void 0 : _layer$shapeOption.field) === 'simple') {
+            encodeRecord[attribute.name] = 'simple';
+            attribute.needRemapping = false;
+          } else {
+            var values = _this4.applyMapLayerAttributeMapping(attribute, record);
+
+            attribute.needRemapping = false; // @ts-ignore
+
+            encodeRecord[attribute.name] = Array.isArray(values) && values.length === 1 ? values[0] : values; // 增加对 layer/text/iconfont unicode 映射的解析
+
+            if (attribute.name === 'shape') {
+              encodeRecord.shape = _this4.fontService.getIconFontKey(encodeRecord[attribute.name]);
+            }
+          }
+        });
+
+        if (encodeRecord.size === undefined) {
+          // in case not set size
+          encodeRecord.size = 1;
+        }
+
+        return encodeRecord;
+      }); // 调整数据兼容 Amap2.0
+
+      this.adjustData2Amap2Coordinates(mappedData, layer);
+      return mappedData;
+    }
+  }, {
+    key: "adjustData2Amap2Coordinates",
+    value: function adjustData2Amap2Coordinates(mappedData, layer) {
+      var _this5 = this;
+
+      // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
+      if (mappedData.length > 0 && this.mapService.version === _l7Maps.Version['GAODE2.x']) {
+        var layerCenter = layer.coordCenter || layer.getSource().center;
+
+        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 = _this5.mapService.lngLatToCoordByLayer(d.coordinates, layerCenter);
+          });
+        } else {
+          // 连续的线、面数据
+          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 = _this5.mapService.lngLatToCoordsByLayer(d.coordinates, layerCenter);
+          });
+        }
+      }
+    }
+  }, {
+    key: "adjustData2SimpleCoordinates",
+    value: function adjustData2SimpleCoordinates(mappedData) {
+      var _this6 = this;
+
+      if (mappedData.length > 0 && this.mapService.version === _l7Maps.Version.SIMPLE) {
+        mappedData.map(function (d) {
+          if (!d.simpleCoordinate) {
+            d.coordinates = _this6.unProjectCoordinates(d.coordinates);
+            d.simpleCoordinate = true;
+          }
+        });
+      }
+    }
+  }, {
+    key: "unProjectCoordinates",
+    value: function unProjectCoordinates(coordinates) {
+      var _this7 = 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(_this7.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(_this7.mapService.simpleMapCoord.unproject(coord));
+        }); // @ts-ignore
+
+        return _coords;
+      }
+    }
+  }, {
+    key: "applyAttributeMapping",
+    value: function applyAttributeMapping(attribute, record, minimumColor) {
+      var _attribute$scale;
+
+      if (!attribute.scale) {
+        return [];
+      }
+
+      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]);
+        }
+      });
+      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) : [];
+    }
+  }, {
+    key: "applyMapLayerAttributeMapping",
+    value: function applyMapLayerAttributeMapping(attribute, record) {
+      var _attribute$scale3;
+
+      if (!attribute.scale) {
+        return [];
+      }
+
+      var scalers = (attribute === null || attribute === void 0 ? void 0 : (_attribute$scale3 = attribute.scale) === null || _attribute$scale3 === void 0 ? void 0 : _attribute$scale3.scalers) || [];
+      var params = [];
+      scalers.forEach(function (_ref5) {
+        var _attribute$scale4;
+
+        var field = _ref5.field;
+
+        if (record.hasOwnProperty(field) || ((_attribute$scale4 = attribute.scale) === null || _attribute$scale4 === void 0 ? void 0 : _attribute$scale4.type) === 'variable') {
+          params.push(record[field]);
+        }
+      });
+      var mappingResult = attribute.mapping ? attribute.mapping(params) : [];
+      return mappingResult;
+    }
+  }, {
+    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;
+    }
+  }]);
+  return DataMappingPlugin;
+}(), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "mapService", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "fontService", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
+exports.default = DataMappingPlugin;