@antv/l7-layers 2.21.1 → 2.21.2

package/es/plugins/ShaderUniformPlugin.js

@@ -1,8 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { CameraUniform, CoordinateUniform } from '@antv/l7-core';
 
 /**
@@ -12,137 +9,168 @@ import { CameraUniform, CoordinateUniform } from '@antv/l7-core';
  *    @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/doml91
  * 3. 当前 Layer 本身的样式属性
  */
-var ShaderUniformPlugin = /*#__PURE__*/function () {
-  function ShaderUniformPlugin() {
-    _classCallCheck(this, ShaderUniformPlugin);
+export default class ShaderUniformPlugin {
+  constructor() {
+    _defineProperty(this, "cameraService", void 0);
+    _defineProperty(this, "coordinateSystemService", void 0);
+    _defineProperty(this, "rendererService", void 0);
+    _defineProperty(this, "mapService", void 0);
+    _defineProperty(this, "layerService", void 0);
   }
-  _createClass(ShaderUniformPlugin, [{
-    key: "apply",
-    value: function apply(layer, _ref) {
-      var _this = this;
-      var rendererService = _ref.rendererService,
-        mapService = _ref.mapService,
-        layerService = _ref.layerService,
-        coordinateSystemService = _ref.coordinateSystemService,
-        cameraService = _ref.cameraService;
-      this.rendererService = rendererService;
-      this.mapService = mapService;
-      this.layerService = layerService;
-      this.coordinateSystemService = coordinateSystemService;
-      this.cameraService = cameraService;
-      var version = this.mapService.version;
-      var mvp = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; // default matrix (for gaode2.x)
-      var sceneCenterMercator = [0, 0];
-      var uniformBuffer;
-      if (!this.rendererService.uniformBuffers[0]) {
-        // Create a Uniform Buffer Object(UBO).
-        uniformBuffer = this.rendererService.createBuffer({
-          data: new Float32Array(16 * 4 + 4 * 7),
-          isUBO: true
-        });
-        this.rendererService.uniformBuffers[0] = uniformBuffer;
-      }
-      layer.hooks.beforeRender.tap('ShaderUniformPlugin', function () {
-        // @ts-ignore
-        var offset = layer.getLayerConfig().tileOrigin;
-        // 重新计算坐标系参数
-        _this.coordinateSystemService.refresh(offset);
-        if (version === 'GAODE2.x') {
-          _this.setLayerCenter(layer);
-          // @ts-ignore
-          mvp = _this.mapService.map.customCoords.getMVPMatrix();
-          // mvp = amapCustomCoords.getMVPMatrix()
-          // @ts-ignore
-          sceneCenterMercator = _this.mapService.getCustomCoordCenter();
-          var _uniformBuffer = layer.getLayerUniformBuffer();
-          _uniformBuffer.subData({
-            offset: 0,
-            data: new Uint8Array(new Float32Array([].concat(_toConsumableArray(mvp), _toConsumableArray(sceneCenterMercator))).buffer)
-          });
-        }
-        var _this$rendererService = _this.rendererService.getViewportSize(),
-          width = _this$rendererService.width,
-          height = _this$rendererService.height;
-        var _this$generateUBO = _this.generateUBO(mvp, sceneCenterMercator, width, height),
-          data = _this$generateUBO.data,
-          uniforms = _this$generateUBO.uniforms;
-        if (_this.layerService.alreadyInRendering && _this.rendererService.uniformBuffers[0]) {
-          var renderUniformBuffer = _this.rendererService.uniformBuffers[0];
-          // Update only once since all models can share one UBO.
-          renderUniformBuffer.subData({
-            offset: 0,
-            data: data
-          });
-        }
-
-        // For WebGL1. regl
-        var platformString = _this.rendererService.queryVerdorInfo();
-        if (platformString === 'WebGL1') {
-          layer.models.forEach(function (model) {
-            model.addUniforms(_objectSpread(_objectSpread({}, uniforms), {}, {
-              // TODO: move these 2 uniforms to PixelPickingPlugin
-              u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
-              // Tip: 当前地图是否在拖动
-              u_shaderPick: Number(layer.getShaderPickStat())
-            }));
-          });
-        }
+  apply(layer, {
+    rendererService,
+    mapService,
+    layerService,
+    coordinateSystemService,
+    cameraService
+  }) {
+    this.rendererService = rendererService;
+    this.mapService = mapService;
+    this.layerService = layerService;
+    this.coordinateSystemService = coordinateSystemService;
+    this.cameraService = cameraService;
+    const version = this.mapService.version;
+    let mvp = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; // default matrix (for gaode2.x)
+    let sceneCenterMercator = [0, 0];
+    let uniformBuffer;
+    if (!this.rendererService.uniformBuffers[0]) {
+      // Create a Uniform Buffer Object(UBO).
+      uniformBuffer = this.rendererService.createBuffer({
+        data: new Float32Array(16 * 4 + 4 * 7),
+        isUBO: true
       });
+      this.rendererService.uniformBuffers[0] = uniformBuffer;
     }
-
-    /**
-     * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置
-     * @param layer
-     */
-  }, {
-    key: "setLayerCenter",
-    value: function setLayerCenter(layer) {
-      if (layer.coordCenter === undefined) {
-        layer.coordCenter = layer.getSource().center;
+    layer.hooks.beforeRender.tap('ShaderUniformPlugin', () => {
+      // @ts-ignore
+      const offset = layer.getLayerConfig().tileOrigin;
+      // 重新计算坐标系参数
+      this.coordinateSystemService.refresh(offset);
+      if (version === 'GAODE2.x') {
+        this.setLayerCenter(layer);
+        // @ts-ignore
+        mvp = this.mapService.map.customCoords.getMVPMatrix();
+        // mvp = amapCustomCoords.getMVPMatrix()
+        // @ts-ignore
+        sceneCenterMercator = this.mapService.getCustomCoordCenter();
+        const uniformBuffer = layer.getLayerUniformBuffer();
+        uniformBuffer.subData({
+          offset: 0,
+          data: new Uint8Array(new Float32Array([...mvp, ...sceneCenterMercator]).buffer)
+        });
       }
-      if (this.mapService.setCoordCenter) {
-        this.mapService.setCoordCenter(layer.coordCenter);
+      const {
+        width,
+        height
+      } = this.rendererService.getViewportSize();
+      const {
+        data,
+        uniforms
+      } = this.generateUBO(mvp, sceneCenterMercator, width, height);
+      if (this.layerService.alreadyInRendering && this.rendererService.uniformBuffers[0]) {
+        const renderUniformBuffer = this.rendererService.uniformBuffers[0];
+        // Update only once since all models can share one UBO.
+        renderUniformBuffer.subData({
+          offset: 0,
+          data
+        });
       }
+
+      // For WebGL1. regl
+      const platformString = this.rendererService.queryVerdorInfo();
+      if (platformString === 'WebGL1') {
+        layer.models.forEach(model => {
+          model.addUniforms(_objectSpread(_objectSpread({}, uniforms), {}, {
+            // TODO: move these 2 uniforms to PixelPickingPlugin
+            u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
+            // Tip: 当前地图是否在拖动
+            u_shaderPick: Number(layer.getShaderPickStat())
+          }));
+        });
+      }
+    });
+  }
+
+  /**
+   * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置
+   * @param layer
+   */
+  setLayerCenter(layer) {
+    if (layer.coordCenter === undefined) {
+      layer.coordCenter = layer.getSource().center;
     }
-  }, {
-    key: "generateUBO",
-    value: function generateUBO(u_Mvp, sceneCenterMercator, width, height) {
-      var _uniforms;
-      var u_ProjectionMatrix = this.cameraService.getProjectionMatrix();
-      var u_ViewMatrix = this.cameraService.getViewMatrix();
-      var u_ViewProjectionMatrix = this.cameraService.getViewProjectionMatrix();
-      var u_ModelMatrix = this.cameraService.getModelMatrix();
-      var u_ViewportCenterProjection = this.coordinateSystemService.getViewportCenterProjection();
-      var u_PixelsPerDegree = this.coordinateSystemService.getPixelsPerDegree();
-      var u_Zoom = this.cameraService.getZoom();
-      var u_PixelsPerDegree2 = this.coordinateSystemService.getPixelsPerDegree2();
-      var u_ZoomScale = this.cameraService.getZoomScale();
-      var u_PixelsPerMeter = this.coordinateSystemService.getPixelsPerMeter();
-      var u_CoordinateSystem = this.coordinateSystemService.getCoordinateSystem();
-      var u_CameraPosition = this.cameraService.getCameraPosition();
-      var u_DevicePixelRatio = window.devicePixelRatio;
-      var u_ViewportCenter = this.coordinateSystemService.getViewportCenter();
-      var u_ViewportSize = [width, height];
-      var u_FocalDistance = this.cameraService.getFocalDistance();
-      var data = [].concat(_toConsumableArray(u_ViewMatrix), _toConsumableArray(u_ProjectionMatrix), _toConsumableArray(u_ViewProjectionMatrix), _toConsumableArray(u_ModelMatrix), _toConsumableArray(u_ViewportCenterProjection), _toConsumableArray(u_PixelsPerDegree), [
-      // 4
-      u_Zoom], _toConsumableArray(u_PixelsPerDegree2), [
-      // 4
-      u_ZoomScale], _toConsumableArray(u_PixelsPerMeter), [
-      // 4
-      u_CoordinateSystem], _toConsumableArray(u_CameraPosition), [
-      // 4
-      u_DevicePixelRatio], _toConsumableArray(u_ViewportCenter), u_ViewportSize, [
-      // 4
-      u_FocalDistance,
-      // 1
-      0, 0, 0]);
-      return {
-        data: data,
-        uniforms: (_uniforms = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_uniforms, CameraUniform.ProjectionMatrix, u_ProjectionMatrix), CameraUniform.ViewMatrix, u_ViewMatrix), CameraUniform.ViewProjectionMatrix, u_ViewProjectionMatrix), CameraUniform.Zoom, u_Zoom), CameraUniform.ZoomScale, u_ZoomScale), CameraUniform.FocalDistance, u_FocalDistance), CameraUniform.CameraPosition, u_CameraPosition), CoordinateUniform.CoordinateSystem, u_CoordinateSystem), CoordinateUniform.ViewportCenter, u_ViewportCenter), CoordinateUniform.ViewportCenterProjection, u_ViewportCenterProjection), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_uniforms, CoordinateUniform.PixelsPerDegree, u_PixelsPerDegree), CoordinateUniform.PixelsPerDegree2, u_PixelsPerDegree2), CoordinateUniform.PixelsPerMeter, u_PixelsPerMeter), CoordinateUniform.Mvp, u_Mvp), "u_sceneCenterMercator", sceneCenterMercator), "u_ViewportSize", u_ViewportSize), "u_ModelMatrix", u_ModelMatrix), "u_DevicePixelRatio", u_DevicePixelRatio))
-      };
+    if (this.mapService.setCoordCenter) {
+      this.mapService.setCoordCenter(layer.coordCenter);
     }
-  }]);
-  return ShaderUniformPlugin;
-}();
-export { ShaderUniformPlugin as default };
+  }
+  generateUBO(u_Mvp, sceneCenterMercator, width, height) {
+    const u_ProjectionMatrix = this.cameraService.getProjectionMatrix();
+    const u_ViewMatrix = this.cameraService.getViewMatrix();
+    const u_ViewProjectionMatrix = this.cameraService.getViewProjectionMatrix();
+    const u_ModelMatrix = this.cameraService.getModelMatrix();
+    const u_ViewportCenterProjection = this.coordinateSystemService.getViewportCenterProjection();
+    const u_PixelsPerDegree = this.coordinateSystemService.getPixelsPerDegree();
+    const u_Zoom = this.cameraService.getZoom();
+    const u_PixelsPerDegree2 = this.coordinateSystemService.getPixelsPerDegree2();
+    const u_ZoomScale = this.cameraService.getZoomScale();
+    const u_PixelsPerMeter = this.coordinateSystemService.getPixelsPerMeter();
+    const u_CoordinateSystem = this.coordinateSystemService.getCoordinateSystem();
+    const u_CameraPosition = this.cameraService.getCameraPosition();
+    const u_DevicePixelRatio = window.devicePixelRatio;
+    const u_ViewportCenter = this.coordinateSystemService.getViewportCenter();
+    const u_ViewportSize = [width, height];
+    const u_FocalDistance = this.cameraService.getFocalDistance();
+    const data = [...u_ViewMatrix,
+    // 16
+    ...u_ProjectionMatrix,
+    // 16
+    ...u_ViewProjectionMatrix,
+    // 16
+    ...u_ModelMatrix,
+    // 16
+    ...u_ViewportCenterProjection,
+    // 4
+    ...u_PixelsPerDegree,
+    // 4
+    u_Zoom, ...u_PixelsPerDegree2,
+    // 4
+    u_ZoomScale, ...u_PixelsPerMeter,
+    // 4
+    u_CoordinateSystem, ...u_CameraPosition,
+    // 4
+    u_DevicePixelRatio,
+    // 4
+    ...u_ViewportCenter, ...u_ViewportSize,
+    // 4
+    u_FocalDistance,
+    // 1
+    0, 0, 0];
+    return {
+      data,
+      uniforms: {
+        // 相机参数，包含 VP 矩阵、缩放等级
+        [CameraUniform.ProjectionMatrix]: u_ProjectionMatrix,
+        [CameraUniform.ViewMatrix]: u_ViewMatrix,
+        [CameraUniform.ViewProjectionMatrix]: u_ViewProjectionMatrix,
+        [CameraUniform.Zoom]: u_Zoom,
+        [CameraUniform.ZoomScale]: u_ZoomScale,
+        [CameraUniform.FocalDistance]: u_FocalDistance,
+        [CameraUniform.CameraPosition]: u_CameraPosition,
+        // 坐标系参数
+        [CoordinateUniform.CoordinateSystem]: u_CoordinateSystem,
+        [CoordinateUniform.ViewportCenter]: u_ViewportCenter,
+        [CoordinateUniform.ViewportCenterProjection]: u_ViewportCenterProjection,
+        [CoordinateUniform.PixelsPerDegree]: u_PixelsPerDegree,
+        [CoordinateUniform.PixelsPerDegree2]: u_PixelsPerDegree2,
+        [CoordinateUniform.PixelsPerMeter]: u_PixelsPerMeter,
+        // 坐标系是高德2.0的时候单独计算
+        [CoordinateUniform.Mvp]: u_Mvp,
+        u_sceneCenterMercator: sceneCenterMercator,
+        // 其他参数，例如视口大小、DPR 等
+        u_ViewportSize: u_ViewportSize,
+        u_ModelMatrix,
+        u_DevicePixelRatio: u_DevicePixelRatio
+      }
+    };
+  }
+}

package/es/plugins/UpdateModelPlugin.js

@@ -1,30 +1,20 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
 /**
  * Model 更新
  */
-var UpdateModelPlugin = /*#__PURE__*/function () {
-  function UpdateModelPlugin() {
-    _classCallCheck(this, UpdateModelPlugin);
+export default class UpdateModelPlugin {
+  apply(layer) {
+    layer.hooks.beforeRender.tap('UpdateModelPlugin', () => {
+      // 处理文本更新
+      if (layer.layerModel) {
+        layer.layerModel.needUpdate().then(flag => {
+          if (flag) {
+            layer.renderLayers();
+          }
+        });
+      }
+    });
+    layer.hooks.afterRender.tap('UpdateModelPlugin', () => {
+      layer.layerModelNeedUpdate = false;
+    });
   }
-  _createClass(UpdateModelPlugin, [{
-    key: "apply",
-    value: function apply(layer) {
-      layer.hooks.beforeRender.tap('UpdateModelPlugin', function () {
-        // 处理文本更新
-        if (layer.layerModel) {
-          layer.layerModel.needUpdate().then(function (flag) {
-            if (flag) {
-              layer.renderLayers();
-            }
-          });
-        }
-      });
-      layer.hooks.afterRender.tap('UpdateModelPlugin', function () {
-        layer.layerModelNeedUpdate = false;
-      });
-    }
-  }]);
-  return UpdateModelPlugin;
-}();
-export { UpdateModelPlugin as default };
+}

package/es/plugins/UpdateStyleAttributePlugin.js

@@ -1,72 +1,54 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
 /**
  * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
  */
-var UpdateStyleAttributePlugin = /*#__PURE__*/function () {
-  function UpdateStyleAttributePlugin() {
-    _classCallCheck(this, UpdateStyleAttributePlugin);
-  }
-  _createClass(UpdateStyleAttributePlugin, [{
-    key: "apply",
-    value: function apply(layer, _ref) {
-      var _this = this;
-      var styleAttributeService = _ref.styleAttributeService;
-      layer.hooks.init.tapPromise('UpdateStyleAttributePlugin', function () {
-        _this.initStyleAttribute(layer, {
-          styleAttributeService: styleAttributeService
-        });
+export default class UpdateStyleAttributePlugin {
+  apply(layer, {
+    styleAttributeService
+  }) {
+    layer.hooks.init.tapPromise('UpdateStyleAttributePlugin', () => {
+      this.initStyleAttribute(layer, {
+        styleAttributeService
       });
-      layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', function () {
-        if (layer.layerModelNeedUpdate) {
-          return;
-        }
-        if (layer.inited) {
-          _this.updateStyleAttribute(layer, {
-            styleAttributeService: styleAttributeService
-          });
-        }
-      });
-    }
-  }, {
-    key: "updateStyleAttribute",
-    value: function updateStyleAttribute(layer, _ref2) {
-      var styleAttributeService = _ref2.styleAttributeService;
-      var attributes = styleAttributeService.getLayerStyleAttributes() || [];
-      var filter = styleAttributeService.getLayerStyleAttribute('filter');
-      if (filter && filter.needRegenerateVertices) {
-        layer.layerModelNeedUpdate = true;
-        attributes.forEach(function (attr) {
-          return attr.needRegenerateVertices = false;
-        });
+    });
+    layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', () => {
+      if (layer.layerModelNeedUpdate) {
         return;
       }
-      attributes.filter(function (attribute) {
-        return attribute.needRegenerateVertices;
-      }).forEach(function (attribute) {
-        // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
-        styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(),
-        // 获取经过 mapping 最新的数据
-        attribute.featureRange.startIndex, attribute.featureRange.endIndex, layer);
-        attribute.needRegenerateVertices = false;
-      });
-    }
-  }, {
-    key: "initStyleAttribute",
-    value: function initStyleAttribute(layer, _ref3) {
-      var styleAttributeService = _ref3.styleAttributeService;
-      var attributes = styleAttributeService.getLayerStyleAttributes() || [];
-      attributes.filter(function (attribute) {
-        return attribute.needRegenerateVertices;
-      }).forEach(function (attribute) {
-        // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
-        styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(),
-        // 获取经过 mapping 最新的数据
-        attribute.featureRange.startIndex, attribute.featureRange.endIndex);
-        attribute.needRegenerateVertices = false;
-      });
+      if (layer.inited) {
+        this.updateStyleAttribute(layer, {
+          styleAttributeService
+        });
+      }
+    });
+  }
+  updateStyleAttribute(layer, {
+    styleAttributeService
+  }) {
+    const attributes = styleAttributeService.getLayerStyleAttributes() || [];
+    const filter = styleAttributeService.getLayerStyleAttribute('filter');
+    if (filter && filter.needRegenerateVertices) {
+      layer.layerModelNeedUpdate = true;
+      attributes.forEach(attr => attr.needRegenerateVertices = false);
+      return;
     }
-  }]);
-  return UpdateStyleAttributePlugin;
-}();
-export { UpdateStyleAttributePlugin as default };
+    attributes.filter(attribute => attribute.needRegenerateVertices).forEach(attribute => {
+      // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
+      styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(),
+      // 获取经过 mapping 最新的数据
+      attribute.featureRange.startIndex, attribute.featureRange.endIndex, layer);
+      attribute.needRegenerateVertices = false;
+    });
+  }
+  initStyleAttribute(layer, {
+    styleAttributeService
+  }) {
+    const attributes = styleAttributeService.getLayerStyleAttributes() || [];
+    attributes.filter(attribute => attribute.needRegenerateVertices).forEach(attribute => {
+      // 精确更新某个/某些 feature(s)，需要传入 featureIdx d
+      styleAttributeService.updateAttributeByFeatureRange(attribute.name, layer.getEncodedData(),
+      // 获取经过 mapping 最新的数据
+      attribute.featureRange.startIndex, attribute.featureRange.endIndex);
+      attribute.needRegenerateVertices = false;
+    });
+  }
+}