@antv/l7-core - npm Package Compare versions

Comparing version 2.20.13 to 2.20.14

es/services/interaction/IPickingService.d.ts

@@ -8,4 +8,4 @@ import type { IInteractionTarget } from '../interaction/IInteractionService';
     init(id: string): void;
-    pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): boolean;
-    pickBox(layer: ILayer, box: [number, number, number, number]): any[];
+    pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
+    pickBox(layer: ILayer, box: [number, number, number, number]): Promise<any[]>;
     triggerHoverOnLayer(layer: ILayer, target: {
@@ -24,3 +24,3 @@ x: number;
     pickRasterLayer(layer: ILayer, target: IInteractionTarget, parent?: ILayer): boolean;
-    pick(layer: ILayer, target: IInteractionTarget): boolean;
+    pick(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
     /**
@@ -27,0 +27,0 @@ * 绘制拾取图层

es/services/interaction/PickingService.d.ts

@@ -21,6 +21,6 @@ import 'reflect-metadata';
     boxPickLayer(layer: ILayer, box: [number, number, number, number], cb: (...args: any[]) => void): Promise<any>;
-    pickBox(layer: ILayer, box: [number, number, number, number]): any[];
+    pickBox(layer: ILayer, box: [number, number, number, number]): Promise<any[]>;
     handleCursor(layer: ILayer, type: string): void;
     destroy(): void;
-    pickFromPickingFBO: (layer: ILayer, { x, y, lngLat, type, target }: IInteractionTarget) => boolean;
+    pickFromPickingFBO: (layer: ILayer, { x, y, lngLat, type, target }: IInteractionTarget) => Promise<boolean>;
     private getContainerSize;
@@ -27,0 +27,0 @@ private pickingAllLayer;

es/services/interaction/PickingService.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _initializerDefineProperty from "@babel/runtime/helpers/esm/initializerDefineProperty";
@@ -11,2 +11,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -19,3 +22,2 @@ import { decodePickingColor, DOM } from '@antv/l7-utils';
 import { InteractionEvent } from "../interaction/IInteractionService";
-import { gl } from "../renderer/gl";
 import { TextureUsage } from "../renderer/ITexture2D";
@@ -38,93 +40,102 @@ var PickingService = (_dec = injectable(), _dec2 = inject(TYPES.IMapService), _dec3 = inject(TYPES.IRendererService), _dec4 = inject(TYPES.IGlobalConfigService), _dec5 = inject(TYPES.IInteractionService), _dec6 = inject(TYPES.ILayerService), _dec(_class = (_class2 = /*#__PURE__*/function () {
     _defineProperty(this, "pickBufferScale", 1.0);
-    _defineProperty(this, "pickFromPickingFBO", function (layer, _ref) {
-      var x = _ref.x,
-        y = _ref.y,
-        lngLat = _ref.lngLat,
-        type = _ref.type,
-        target = _ref.target;
-      var isPicked = false;
-      var _this$rendererService = _this.rendererService,
-        readPixels = _this$rendererService.readPixels,
-        getContainer = _this$rendererService.getContainer;
-      var _this$getContainerSiz = _this.getContainerSize(getContainer()),
-        width = _this$getContainerSiz.width,
-        height = _this$getContainerSiz.height;
-      width *= DOM.DPR;
-      height *= DOM.DPR;
-      var _layer$getLayerConfig = layer.getLayerConfig(),
-        enableHighlight = _layer$getLayerConfig.enableHighlight,
-        enableSelect = _layer$getLayerConfig.enableSelect;
-      var xInDevicePixel = x * DOM.DPR;
-      var yInDevicePixel = y * DOM.DPR;
-      if (xInDevicePixel > width - 1 * DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * DOM.DPR || yInDevicePixel < 0) {
-        return false;
-      }
-      var pickedColors = readPixels({
-        x: Math.floor(xInDevicePixel / _this.pickBufferScale),
-        // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-        y: Math.floor((height - (y + 1) * DOM.DPR) / _this.pickBufferScale),
-        width: 1,
-        height: 1,
-        data: new Uint8Array(1 * 1 * 4),
-        framebuffer: _this.pickingFBO
-      });
-      _this.pickedColors = pickedColors;
-      if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
-        var pickedFeatureIdx = decodePickingColor(pickedColors);
-        // 瓦片数据获取性能问题需要优化
-        var rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
-        if (pickedFeatureIdx !== layer.getCurrentPickId() && type === 'mousemove') {
-          type = 'mouseenter';
-        }
-        var layerTarget = {
-          x: x,
-          y: y,
-          type: type,
-          lngLat: lngLat,
-          featureId: pickedFeatureIdx,
-          feature: rawFeature,
-          target: target
-        };
-        if (!rawFeature) {
-          // this.logger.error(
-          //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
-          // );
-        } else {
-          // trigger onHover/Click callback on layer
-          isPicked = true;
-          layer.setCurrentPickId(pickedFeatureIdx);
-          _this.triggerHoverOnLayer(layer, layerTarget); // 触发拾取事件
-        }
-      } else {
-        // 未选中
-        var _layerTarget = {
-          x: x,
-          y: y,
-          lngLat: lngLat,
-          type: layer.getCurrentPickId() !== null && type === 'mousemove' ? 'mouseout' : 'un' + type,
-          featureId: null,
-          target: target,
-          feature: null
-        };
-        _this.triggerHoverOnLayer(layer, _objectSpread(_objectSpread({}, _layerTarget), {}, {
-          type: 'unpick'
-        }));
-        _this.triggerHoverOnLayer(layer, _layerTarget);
-        layer.setCurrentPickId(null);
-      }
-      if (enableHighlight) {
-        layer.layerPickService.highlightPickedFeature(pickedColors);
-      }
-      if (enableSelect && type === 'click' && (pickedColors === null || pickedColors === void 0 ? void 0 : pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
-        var selectedId = decodePickingColor(pickedColors);
-        if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
-          layer.layerPickService.selectFeature(pickedColors);
-          layer.setCurrentSelectedId(selectedId);
-        } else {
-          layer.layerPickService.selectFeature(new Uint8Array([0, 0, 0, 0])); // toggle select
-          layer.setCurrentSelectedId(null);
-        }
-      }
-      return isPicked;
-    });
+    _defineProperty(this, "pickFromPickingFBO", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(layer, _ref) {
+        var x, y, lngLat, type, target, isPicked, _this$rendererService, readPixelsAsync, getContainer, _this$getContainerSiz, width, height, _layer$getLayerConfig, enableHighlight, enableSelect, xInDevicePixel, yInDevicePixel, pickedColors, pickedFeatureIdx, rawFeature, layerTarget, _layerTarget, selectedId;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              x = _ref.x, y = _ref.y, lngLat = _ref.lngLat, type = _ref.type, target = _ref.target;
+              isPicked = false;
+              _this$rendererService = _this.rendererService, readPixelsAsync = _this$rendererService.readPixelsAsync, getContainer = _this$rendererService.getContainer;
+              _this$getContainerSiz = _this.getContainerSize(getContainer()), width = _this$getContainerSiz.width, height = _this$getContainerSiz.height;
+              width *= DOM.DPR;
+              height *= DOM.DPR;
+              _layer$getLayerConfig = layer.getLayerConfig(), enableHighlight = _layer$getLayerConfig.enableHighlight, enableSelect = _layer$getLayerConfig.enableSelect;
+              xInDevicePixel = x * DOM.DPR;
+              yInDevicePixel = y * DOM.DPR;
+              if (!(xInDevicePixel > width - 1 * DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * DOM.DPR || yInDevicePixel < 0)) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 11:
+              _context.next = 13;
+              return readPixelsAsync({
+                x: Math.floor(xInDevicePixel / _this.pickBufferScale),
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.floor((height - (y + 1) * DOM.DPR) / _this.pickBufferScale),
+                width: 1,
+                height: 1,
+                data: new Uint8Array(1 * 1 * 4),
+                framebuffer: _this.pickingFBO
+              });
+            case 13:
+              pickedColors = _context.sent;
+              _this.pickedColors = pickedColors;
+              if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
+                pickedFeatureIdx = decodePickingColor(pickedColors); // 瓦片数据获取性能问题需要优化
+                rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
+                if (pickedFeatureIdx !== layer.getCurrentPickId() && type === 'mousemove') {
+                  type = 'mouseenter';
+                }
+                layerTarget = {
+                  x: x,
+                  y: y,
+                  type: type,
+                  lngLat: lngLat,
+                  featureId: pickedFeatureIdx,
+                  feature: rawFeature,
+                  target: target
+                };
+                if (!rawFeature) {
+                  // this.logger.error(
+                  //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
+                  // );
+                } else {
+                  // trigger onHover/Click callback on layer
+                  isPicked = true;
+                  layer.setCurrentPickId(pickedFeatureIdx);
+                  _this.triggerHoverOnLayer(layer, layerTarget); // 触发拾取事件
+                }
+              } else {
+                // 未选中
+                _layerTarget = {
+                  x: x,
+                  y: y,
+                  lngLat: lngLat,
+                  type: layer.getCurrentPickId() !== null && type === 'mousemove' ? 'mouseout' : 'un' + type,
+                  featureId: null,
+                  target: target,
+                  feature: null
+                };
+                _this.triggerHoverOnLayer(layer, _objectSpread(_objectSpread({}, _layerTarget), {}, {
+                  type: 'unpick'
+                }));
+                _this.triggerHoverOnLayer(layer, _layerTarget);
+                layer.setCurrentPickId(null);
+              }
+              if (enableHighlight) {
+                layer.layerPickService.highlightPickedFeature(pickedColors);
+              }
+              if (enableSelect && type === 'click' && (pickedColors === null || pickedColors === void 0 ? void 0 : pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
+                selectedId = decodePickingColor(pickedColors);
+                if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
+                  layer.layerPickService.selectFeature(pickedColors);
+                  layer.setCurrentSelectedId(selectedId);
+                } else {
+                  layer.layerPickService.selectFeature(new Uint8Array([0, 0, 0, 0])); // toggle select
+                  layer.setCurrentSelectedId(null);
+                }
+              }
+              return _context.abrupt("return", isPicked);
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
   }
@@ -147,10 +158,12 @@ _createClass(PickingService, [{
       // 创建 picking framebuffer，后续实时 resize
+      var pickingColorTexture = createTexture2D({
+        width: width,
+        height: height,
+        // wrapS: gl.CLAMP_TO_EDGE,
+        // wrapT: gl.CLAMP_TO_EDGE,
+        usage: TextureUsage.RENDER_TARGET,
+        label: 'Picking Texture'
+      });
       this.pickingFBO = createFramebuffer({
-        color: createTexture2D({
-          width: width,
-          height: height,
-          wrapS: gl.CLAMP_TO_EDGE,
-          wrapT: gl.CLAMP_TO_EDGE,
-          usage: TextureUsage.RENDER_TARGET
-        }),
+        color: pickingColorTexture,
         depth: true,
@@ -167,32 +180,45 @@ width: width,
     value: function () {
-      var _boxPickLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(layer, box, cb) {
+      var _boxPickLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(layer, box, cb) {
         var _this2 = this;
-        var _this$rendererService3, useFramebuffer, clear;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        var _this$rendererService3, useFramebufferAsync, clear, features;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _this$rendererService3 = this.rendererService, useFramebuffer = _this$rendererService3.useFramebuffer, clear = _this$rendererService3.clear;
+              _this$rendererService3 = this.rendererService, useFramebufferAsync = _this$rendererService3.useFramebufferAsync, clear = _this$rendererService3.clear;
               this.resizePickingFBO();
-              useFramebuffer(this.pickingFBO, function () {
-                clear({
-                  framebuffer: _this2.pickingFBO,
-                  color: [0, 0, 0, 0],
-                  stencil: 0,
-                  depth: 1
-                });
-                layer.hooks.beforePickingEncode.call();
-                layer.renderModels({
-                  ispick: true
-                });
-                layer.hooks.afterPickingEncode.call();
-                var features = _this2.pickBox(layer, box);
-                cb(features);
-              });
-            case 3:
+              layer.hooks.beforePickingEncode.call();
+              _context3.next = 5;
+              return useFramebufferAsync(this.pickingFBO, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      clear({
+                        framebuffer: _this2.pickingFBO,
+                        color: [0, 0, 0, 0],
+                        stencil: 0,
+                        depth: 1
+                      });
+                      layer.renderModels({
+                        ispick: true
+                      });
+                    case 2:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              })));
+            case 5:
+              layer.hooks.afterPickingEncode.call();
+              _context3.next = 8;
+              return this.pickBox(layer, box);
+            case 8:
+              features = _context3.sent;
+              cb(features);
+            case 10:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function boxPickLayer(_x, _x2, _x3) {
+      function boxPickLayer(_x3, _x4, _x5) {
         return _boxPickLayer.apply(this, arguments);
@@ -204,52 +230,62 @@ }
     key: "pickBox",
-    value: function pickBox(layer, box) {
-      var _this3 = this;
-      var _box$map = box.map(function (v) {
-          var tmpV = v < 0 ? 0 : v;
-          return Math.floor(tmpV * DOM.DPR / _this3.pickBufferScale);
-        }),
-        _box$map2 = _slicedToArray(_box$map, 4),
-        xMin = _box$map2[0],
-        yMin = _box$map2[1],
-        xMax = _box$map2[2],
-        yMax = _box$map2[3];
-      var _this$rendererService4 = this.rendererService,
-        readPixels = _this$rendererService4.readPixels,
-        getContainer = _this$rendererService4.getContainer;
-      var _this$getContainerSiz3 = this.getContainerSize(getContainer()),
-        width = _this$getContainerSiz3.width,
-        height = _this$getContainerSiz3.height;
-      width *= DOM.DPR;
-      height *= DOM.DPR;
-      if (xMin > (width - 1) * DOM.DPR / this.pickBufferScale || xMax < 0 || yMin > (height - 1) * DOM.DPR / this.pickBufferScale || yMax < 0) {
-        return [];
+    value: function () {
+      var _pickBox = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(layer, box) {
+        var _this3 = this;
+        var _box$map, _box$map2, xMin, yMin, xMax, yMax, _this$rendererService4, readPixelsAsync, getContainer, _this$getContainerSiz3, width, height, w, h, pickedColors, features, featuresIdMap, i, color, pickedFeatureIdx, rawFeature;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _box$map = box.map(function (v) {
+                var tmpV = v < 0 ? 0 : v;
+                return Math.floor(tmpV * DOM.DPR / _this3.pickBufferScale);
+              }), _box$map2 = _slicedToArray(_box$map, 4), xMin = _box$map2[0], yMin = _box$map2[1], xMax = _box$map2[2], yMax = _box$map2[3];
+              _this$rendererService4 = this.rendererService, readPixelsAsync = _this$rendererService4.readPixelsAsync, getContainer = _this$rendererService4.getContainer;
+              _this$getContainerSiz3 = this.getContainerSize(getContainer()), width = _this$getContainerSiz3.width, height = _this$getContainerSiz3.height;
+              width *= DOM.DPR;
+              height *= DOM.DPR;
+              if (!(xMin > (width - 1) * DOM.DPR / this.pickBufferScale || xMax < 0 || yMin > (height - 1) * DOM.DPR / this.pickBufferScale || yMax < 0)) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("return", []);
+            case 7:
+              w = Math.min(width / this.pickBufferScale, xMax) - xMin;
+              h = Math.min(height / this.pickBufferScale, yMax) - yMin;
+              _context4.next = 11;
+              return readPixelsAsync({
+                x: xMin,
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.floor(height / this.pickBufferScale - (yMax + 1)),
+                width: w,
+                height: h,
+                data: new Uint8Array(w * h * 4),
+                framebuffer: this.pickingFBO
+              });
+            case 11:
+              pickedColors = _context4.sent;
+              features = [];
+              featuresIdMap = {};
+              for (i = 0; i < pickedColors.length / 4; i = i + 1) {
+                color = pickedColors.slice(i * 4, i * 4 + 4);
+                pickedFeatureIdx = decodePickingColor(color);
+                if (pickedFeatureIdx !== -1 && !featuresIdMap[pickedFeatureIdx]) {
+                  rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
+                  features.push(_objectSpread(_objectSpread({}, rawFeature), {}, {
+                    pickedFeatureIdx: pickedFeatureIdx
+                  }));
+                  featuresIdMap[pickedFeatureIdx] = true;
+                }
+              }
+              return _context4.abrupt("return", features);
+            case 16:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function pickBox(_x6, _x7) {
+        return _pickBox.apply(this, arguments);
       }
-      var w = Math.min(width / this.pickBufferScale, xMax) - xMin;
-      var h = Math.min(height / this.pickBufferScale, yMax) - yMin;
-      var pickedColors = readPixels({
-        x: xMin,
-        // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-        y: Math.floor(height / this.pickBufferScale - (yMax + 1)),
-        width: w,
-        height: h,
-        data: new Uint8Array(w * h * 4),
-        framebuffer: this.pickingFBO
-      });
-      var features = [];
-      var featuresIdMap = {};
-      for (var i = 0; i < pickedColors.length / 4; i = i + 1) {
-        var color = pickedColors.slice(i * 4, i * 4 + 4);
-        var pickedFeatureIdx = decodePickingColor(color);
-        if (pickedFeatureIdx !== -1 && !featuresIdMap[pickedFeatureIdx]) {
-          var rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
-          features.push(_objectSpread(_objectSpread({}, rawFeature), {}, {
-            pickedFeatureIdx: pickedFeatureIdx
-          }));
-          featuresIdMap[pickedFeatureIdx] = true;
-        }
-      }
-      return features;
-    }
-
-    // 动态设置鼠标光标
+      return pickBox;
+    }() // 动态设置鼠标光标
   }, {
@@ -302,14 +338,14 @@ key: "handleCursor",
     value: function () {
-      var _pickingAllLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(target) {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _pickingAllLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(target) {
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (!(!this.layerService.needPick(target.type) || !this.isPickingAllLayer())) {
-                _context2.next = 2;
+                _context5.next = 2;
                 break;
               }
-              return _context2.abrupt("return");
+              return _context5.abrupt("return");
             case 2:
               this.alreadyInPicking = true;
-              _context2.next = 5;
+              _context5.next = 5;
               return this.pickingLayers(target);
@@ -321,7 +357,7 @@ case 5:
             case "end":
-              return _context2.stop();
+              return _context5.stop();
           }
-        }, _callee2, this);
+        }, _callee5, this);
       }));
-      function pickingAllLayer(_x4) {
+      function pickingAllLayer(_x8) {
         return _pickingAllLayer.apply(this, arguments);
@@ -375,34 +411,96 @@ }
     value: function () {
-      var _pickingLayers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(target) {
+      var _pickingLayers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(target) {
         var _this4 = this;
-        var clear;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        var _this$rendererService5, clear, useFramebufferAsync, layers, _iterator, _step, _loop;
+        return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
-              clear = this.rendererService.clear;
+              _this$rendererService5 = this.rendererService, clear = _this$rendererService5.clear, useFramebufferAsync = _this$rendererService5.useFramebufferAsync;
               this.resizePickingFBO();
-              this.rendererService.useFramebuffer(this.pickingFBO, function () {
-                var layers = _this4.layerService.getRenderList();
-                layers.filter(function (layer) {
-                  return layer.needPick(target.type);
-                }).reverse().some(function (layer) {
-                  clear({
-                    framebuffer: _this4.pickingFBO,
-                    color: [0, 0, 0, 0],
-                    stencil: 0,
-                    depth: 1
-                  });
-                  layer.layerPickService.pickRender(target);
-                  var isPicked = _this4.pickFromPickingFBO(layer, target);
-                  _this4.layerService.pickedLayerId = isPicked ? +layer.id : -1;
-                  return isPicked && !layer.getLayerConfig().enablePropagation;
-                });
+              layers = this.layerService.getRenderList();
+              _iterator = _createForOfIteratorHelper(layers.filter(function (layer) {
+                return layer.needPick(target.type);
+              }).reverse());
+              _context8.prev = 4;
+              _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
+                var layer, isPicked;
+                return _regeneratorRuntime.wrap(function _loop$(_context7) {
+                  while (1) switch (_context7.prev = _context7.next) {
+                    case 0:
+                      layer = _step.value;
+                      if (!layer.tileLayer) {
+                        layer.hooks.beforePickingEncode.call();
+                      }
+                      _context7.next = 4;
+                      return useFramebufferAsync(_this4.pickingFBO, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+                        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+                          while (1) switch (_context6.prev = _context6.next) {
+                            case 0:
+                              clear({
+                                framebuffer: _this4.pickingFBO,
+                                color: [0, 0, 0, 0],
+                                stencil: 0,
+                                depth: 1
+                              });
+                              layer.layerPickService.pickRender(target);
+                            case 2:
+                            case "end":
+                              return _context6.stop();
+                          }
+                        }, _callee6);
+                      })));
+                    case 4:
+                      if (!layer.tileLayer) {
+                        layer.hooks.afterPickingEncode.call();
+                      }
+                      _context7.next = 7;
+                      return _this4.pickFromPickingFBO(layer, target);
+                    case 7:
+                      isPicked = _context7.sent;
+                      _this4.layerService.pickedLayerId = isPicked ? +layer.id : -1;
+                      if (!(isPicked && !layer.getLayerConfig().enablePropagation)) {
+                        _context7.next = 11;
+                        break;
+                      }
+                      return _context7.abrupt("return", 1);
+                    case 11:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }, _loop);
               });
-            case 3:
+              _iterator.s();
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context8.next = 13;
+                break;
+              }
+              return _context8.delegateYield(_loop(), "t0", 9);
+            case 9:
+              if (!_context8.t0) {
+                _context8.next = 11;
+                break;
+              }
+              return _context8.abrupt("break", 13);
+            case 11:
+              _context8.next = 7;
+              break;
+            case 13:
+              _context8.next = 18;
+              break;
+            case 15:
+              _context8.prev = 15;
+              _context8.t1 = _context8["catch"](4);
+              _iterator.e(_context8.t1);
+            case 18:
+              _context8.prev = 18;
+              _iterator.f();
+              return _context8.finish(18);
+            case 21:
             case "end":
-              return _context3.stop();
+              return _context8.stop();
           }
-        }, _callee3, this);
+        }, _callee7, this, [[4, 15, 18, 21]]);
       }));
-      function pickingLayers(_x5) {
+      function pickingLayers(_x9) {
         return _pickingLayers.apply(this, arguments);
@@ -409,0 +507,0 @@ }

es/services/layer/ILayerService.d.ts

@@ -49,2 +49,6 @@ import type { AsyncSeriesBailHook, AsyncWaterfallHook, SyncBailHook, SyncHook } from '@antv/async-hook';
     workerOptions?: IWorkerOption;
+    /**
+     * When disabled, the picking uniform buffer will not be binded. Default to `true`.
+     */
+    pickingEnabled?: boolean;
 }
@@ -187,3 +191,3 @@ export interface ILayerModel {
 export interface ITilePickService {
-    pick(layer: ILayer, target: IInteractionTarget): boolean;
+    pick(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
     pickRender(target: IInteractionTarget): void;
@@ -190,0 +194,0 @@ }

es/services/layer/LayerService.js

@@ -403,3 +403,2 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
       if (layer.tileMask) {
-        // TODO 示例瓦片掩膜多层支持
         layer.tileMask.render({
@@ -406,0 +405,0 @@ isStencil: true,

es/services/renderer/IModel.d.ts

@@ -103,2 +103,8 @@ import type { gl } from './gl';
     };
+    /**
+     * When disabled, a global diagnostic filter can be used to apply a diagnostic filter to the entire WGSL module. Default to `true`.
+     * @see https://www.khronos.org/opengl/wiki/Sampler_(GLSL)#Non-uniform_flow_control
+     * @see https://www.w3.org/TR/WGSL/#example-70cf6bac
+     */
+    diagnosticDerivativeUniformityEnabled?: boolean;
 }
@@ -105,0 +111,0 @@ export interface IModelDrawOptions {

es/services/renderer/IRendererService.d.ts

@@ -56,2 +56,3 @@ import type { IAttribute, IAttributeInitializationOptions } from './IAttribute';
     useFramebuffer(framebuffer: IFramebuffer | null, drawCommands: () => void): void;
+    useFramebufferAsync(framebuffer: IFramebuffer | null, drawCommands: () => Promise<void>): Promise<void>;
     getViewportSize(): {
@@ -72,2 +73,3 @@ width: number;
     readPixels(options: IReadPixelsOptions): Uint8Array;
+    readPixelsAsync(options: IReadPixelsOptions): Promise<Uint8Array>;
     setState(): void;
@@ -74,0 +76,0 @@ setBaseState(): void;

es/services/renderer/ITexture2D.d.ts

@@ -36,2 +36,7 @@ import type { gl } from './gl';
     /**
+     * unorm means unsigned normalized which is fancy way of saying
+     * the value will be converted from an unsigned byte with values from (0 to 255) to a floating point value with values (0.0 to 1.0).
+     */
+    unorm?: boolean;
+    /**
      * 以下为 gl.pixelStorei 参数
@@ -48,2 +53,3 @@ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/pixelStorei
     copy?: boolean;
+    label?: string;
 }
@@ -50,0 +56,0 @@ export interface ITexture2D {

es/services/renderer/passes/PixelPickingPass.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -12,2 +13,3 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 var _dec, _class;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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); }; }
@@ -65,3 +67,3 @@ 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; } }
         getViewportSize = _this$rendererService.getViewportSize,
-        readPixels = _this$rendererService.readPixels,
+        readPixelsAsync = _this$rendererService.readPixelsAsync,
         useFramebuffer = _this$rendererService.useFramebuffer;
@@ -80,56 +82,67 @@ var _getViewportSize = getViewportSize(),
       var pickedColors;
-      useFramebuffer(_this.pickingFBO, function () {
+      useFramebuffer(_this.pickingFBO, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _pickedColors;
-        // avoid realloc
-        pickedColors = readPixels({
-          x: Math.round(xInDevicePixel),
-          // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-          y: Math.round(height - (y + 1) * DOM.DPR),
-          width: 1,
-          height: 1,
-          data: new Uint8Array(1 * 1 * 4),
-          framebuffer: _this.pickingFBO
-        });
-        if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
-          var pickedFeatureIdx = decodePickingColor(pickedColors);
-          var rawFeature = _this.layer.getSource().getFeatureById(pickedFeatureIdx);
-          var target = {
-            x: x,
-            y: y,
-            type: type,
-            lngLat: lngLat,
-            featureId: pickedFeatureIdx,
-            feature: rawFeature
-          };
-          if (!rawFeature) {
-            // this.logger.error(
-            //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
-            // );
-          } else {
-            // trigger onHover/Click callback on layer
-            _this.layer.setCurrentPickId(pickedFeatureIdx);
-            _this.triggerHoverOnLayer(target);
+        var pickedFeatureIdx, rawFeature, target, _target;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return readPixelsAsync({
+                x: Math.round(xInDevicePixel),
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.round(height - (y + 1) * DOM.DPR),
+                width: 1,
+                height: 1,
+                data: new Uint8Array(1 * 1 * 4),
+                framebuffer: _this.pickingFBO
+              });
+            case 2:
+              pickedColors = _context.sent;
+              if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
+                pickedFeatureIdx = decodePickingColor(pickedColors);
+                rawFeature = _this.layer.getSource().getFeatureById(pickedFeatureIdx);
+                target = {
+                  x: x,
+                  y: y,
+                  type: type,
+                  lngLat: lngLat,
+                  featureId: pickedFeatureIdx,
+                  feature: rawFeature
+                };
+                if (!rawFeature) {
+                  // this.logger.error(
+                  //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
+                  // );
+                } else {
+                  // trigger onHover/Click callback on layer
+                  _this.layer.setCurrentPickId(pickedFeatureIdx);
+                  _this.triggerHoverOnLayer(target);
+                }
+              } else {
+                _target = {
+                  x: x,
+                  y: y,
+                  lngLat: lngLat,
+                  type: _this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
+                  featureId: null,
+                  feature: null
+                };
+                _this.triggerHoverOnLayer(_objectSpread(_objectSpread({}, _target), {}, {
+                  type: 'unpick'
+                }));
+                _this.triggerHoverOnLayer(_target);
+                _this.layer.setCurrentPickId(null);
+              }
+              if (enableHighlight) {
+                _this.highlightPickedFeature(pickedColors);
+              }
+              if (enableSelect && type === 'click' && ((_pickedColors = pickedColors) === null || _pickedColors === void 0 ? void 0 : _pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
+                _this.selectFeature(pickedColors);
+              }
+            case 6:
+            case "end":
+              return _context.stop();
           }
-        } else {
-          var _target = {
-            x: x,
-            y: y,
-            lngLat: lngLat,
-            type: _this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
-            featureId: null,
-            feature: null
-          };
-          _this.triggerHoverOnLayer(_objectSpread(_objectSpread({}, _target), {}, {
-            type: 'unpick'
-          }));
-          _this.triggerHoverOnLayer(_target);
-          _this.layer.setCurrentPickId(null);
-        }
-        if (enableHighlight) {
-          _this.highlightPickedFeature(pickedColors);
-        }
-        if (enableSelect && type === 'click' && ((_pickedColors = pickedColors) === null || _pickedColors === void 0 ? void 0 : _pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
-          _this.selectFeature(pickedColors);
-        }
-      });
+        }, _callee);
+      })));
     });
@@ -161,9 +174,11 @@ return _this;
       // 创建 picking framebuffer，后续实时 resize
+      var pickingColorTexture = createTexture2D({
+        width: width,
+        height: height,
+        wrapS: gl.CLAMP_TO_EDGE,
+        wrapT: gl.CLAMP_TO_EDGE,
+        label: 'Picking Texture'
+      });
       this.pickingFBO = createFramebuffer({
-        color: createTexture2D({
-          width: width,
-          height: height,
-          wrapS: gl.CLAMP_TO_EDGE,
-          wrapT: gl.CLAMP_TO_EDGE
-        })
+        color: pickingColorTexture
       });
@@ -270,4 +285,4 @@
     key: "selectFeatureHandle",
-    value: function selectFeatureHandle(_ref2) {
-      var featureId = _ref2.featureId;
+    value: function selectFeatureHandle(_ref3) {
+      var featureId = _ref3.featureId;
       var pickedColors = encodePickingColor(featureId);
@@ -278,4 +293,4 @@ this.selectFeature(new Uint8Array(pickedColors));
     key: "highlightFeatureHandle",
-    value: function highlightFeatureHandle(_ref3) {
-      var featureId = _ref3.featureId;
+    value: function highlightFeatureHandle(_ref4) {
+      var featureId = _ref4.featureId;
       var pickedColors = encodePickingColor(featureId);
@@ -282,0 +297,0 @@ this.highlightPickedFeature(new Uint8Array(pickedColors));

es/services/shader/ShaderModuleService.js

@@ -30,3 +30,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /* babel-plugin-inline-import '../../shaders/projection.glsl' */
-var projection = "#define TILE_SIZE 512.0\n#define PI 3.1415926536\n#define WORLD_SCALE TILE_SIZE / (PI * 2.0)\n#define EARTH_CIRCUMFERENCE 40.03e6\n\n#define COORDINATE_SYSTEM_LNGLAT 1.0        // mapbox\n#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset\n#define COORDINATE_SYSTEM_VECTOR_TILE 3.0\n#define COORDINATE_SYSTEM_IDENTITY 4.0\n#define COORDINATE_SYSTEM_P20 5.0           // amap\n#define COORDINATE_SYSTEM_P20_OFFSET 6.0    // amap offset\n#define COORDINATE_SYSTEM_METER_OFFSET 7.0\n\n#define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0\n#pragma include \"scene_uniforms\"\n\n\n// web mercator coords -> world coords\nvec2 project_mercator(vec2 lnglat) {\n   if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return lnglat;\n  }\n  float x = lnglat.x;\n  return vec2(\n    radians(x) + PI,\n    PI - log(tan(PI * 0.25 + radians(lnglat.y) * 0.5))\n  );\n}\n\nfloat project_scale(float meters) {\n  return meters * u_PixelsPerMeter.z;\n}\n\n\n// offset coords -> world coords\nvec4 project_offset(vec4 offset) {\n  float dy = offset.y;\n  dy = clamp(dy, -1., 1.);\n  vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy;\n  return vec4(offset.xyz * pixels_per_unit, offset.w);\n}\n\nvec3 project_normal(vec3 normal) {\n  vec4 normal_modelspace = u_ModelMatrix * vec4(normal, 0.0);\n  return normalize(normal_modelspace.xyz * u_PixelsPerMeter);\n}\n\nvec3 project_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01\n    || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // normals generated by the polygon tesselator are in lnglat offsets instead of meters\n    return normalize(vector * u_PixelsPerDegree);\n  }\n  return project_normal(vector);\n}\n// || u_CoordinateSystem < COORDINATE_SYSTEM_P20_OFFSET + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_P20_OFFSET - 0.01\n// reverse Y\nvec3 reverse_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 ||u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET ) {\n    return vector * vec3(1.0, -1.0, 1.0);\n  }\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return vector;\n  }\n  return vector;\n}\n\nvec4 project_mvt_offset_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return project_offset(vec4(0.0, 0.0, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  return position;\n}\n\nvec4 project_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    float X = position.x - u_ViewportCenter.x;\n    float Y = position.y - u_ViewportCenter.y;\n    return project_offset(vec4(X, Y, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return vec4(\n      (project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.),\n      project_scale(position.z),\n      position.w\n    );\n  }\n\n  // if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n \n\n  //    return vec4(\n  //     position.xy,\n  //     project_scale(position.z),\n  //     position.w);\n  // }\n  return position;\n\n  // TODO: \u74E6\u7247\u5750\u6807\u7CFB & \u5E38\u89C4\u4E16\u754C\u5750\u6807\u7CFB\n}\nvec2 project_pixel_size_to_clipspace(vec2 pixels) {\n  vec2 offset = pixels / u_ViewportSize * u_DevicePixelRatio * 2.0;\n  return offset * u_FocalDistance;\n}\n\n\n\nfloat project_pixel_allmap(float pixel) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) {\n    return pixel * pow(2.0, u_Zoom);\n  }\n  return pixel * u_FocalDistance ;\n}\n\n// \u9002\u914D\u7EB9\u7406\u8D34\u56FE\u7684\u7B49\u50CF\u7D20\u5927\u5C0F\nfloat project_pixel_texture(float pixel) {\n  // mapbox zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    return pixel * pow(0.5, u_Zoom) * u_FocalDistance ;\n  }\n\n  // amap2 zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n\n  // amap zoom > 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return pixel * pow(0.5, u_Zoom)* u_FocalDistance ;\n  }\n\n  // amap zoom < 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return pixel * pow(2.0, (20.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * 2.0 *  u_FocalDistance;;\n}\n\n// \u5728\u4E0D\u8BBA\u4EC0\u4E48\u5E95\u56FE\u4E0B\u9700\u8981\u7EDF\u4E00\u5904\u7406\u7684\u65F6\u5019\u4F7F\u7528\nfloat project_float_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // mapbox P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom));\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\n\n// Project meter into the unit of pixel which used in the camera world space\nfloat project_float_meter(float meter) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Since the zoom level uniform is updated by mapservice and it's alread been subtracted by 1\n    // Not sure if we are supposed to do that again\n   return meter;\n  } else  {\n    return project_float_pixel(meter);\n  }\n\n  // TODO: change the following code to make adaptations for amap\n  return u_FocalDistance * TILE_SIZE * pow(2.0, u_Zoom) * meter / EARTH_CIRCUMFERENCE;\n}\n\nfloat project_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\nvec2 project_pixel(vec2 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\nvec3 project_pixel(vec3 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) *  u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\n\nvec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n    position.w *= u_PixelsPerMeter.z;\n  }\n\n  return viewProjectionMatrix * position + center;\n}\n\n// Projects from common space coordinates to clip space\nvec4 project_common_position_to_clipspace(vec4 position) {\n  return project_common_position_to_clipspace(\n    position,\n    u_ViewProjectionMatrix,\n    u_ViewportCenterProjection\n  );\n}\n\nvec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {\n  vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n     pos.w = pos.w / u_PixelsPerMeter.z;\n  }\n  return pos;\n}\n\n\nbool isEqual( float a,  float b) {\n    return  a< b + 0.001 && a > b - 0.001;\n}\n\n// \u652F\u6301 GaodeV2\u3001Mapbox\nvec4 project_common_position_to_clipspace_v2(vec4 position) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    return u_Mvp * position;\n  } else {\n    return project_common_position_to_clipspace(position);\n  }\n}\n";
+var projection = "#define TILE_SIZE 512.0\n#define PI 3.1415926536\n#define WORLD_SCALE TILE_SIZE / (PI * 2.0)\n#define EARTH_CIRCUMFERENCE 40.03e6\n\n#define COORDINATE_SYSTEM_LNGLAT 1.0        // mapbox\n#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset\n#define COORDINATE_SYSTEM_VECTOR_TILE 3.0\n#define COORDINATE_SYSTEM_IDENTITY 4.0\n#define COORDINATE_SYSTEM_P20 5.0           // amap\n#define COORDINATE_SYSTEM_P20_OFFSET 6.0    // amap offset\n#define COORDINATE_SYSTEM_METER_OFFSET 7.0\n\n#define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0\n#pragma include \"scene_uniforms\"\n\n\n// web mercator coords -> world coords\nvec2 project_mercator(vec2 lnglat) {\n   if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return lnglat;\n  }\n  float x = lnglat.x;\n  return vec2(\n    radians(x) + PI,\n    PI - log(tan(PI * 0.25 + radians(lnglat.y) * 0.5))\n  );\n}\n\nfloat project_scale(float meters) {\n  return meters * u_PixelsPerMeter.z;\n}\n\n\n// offset coords -> world coords\nvec4 project_offset(vec4 offset) {\n  float dy = offset.y;\n  dy = clamp(dy, -1., 1.);\n  vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy;\n  return vec4(offset.xyz * pixels_per_unit, offset.w);\n}\n\nvec3 project_normal(vec3 normal) {\n  vec4 normal_modelspace = u_ModelMatrix * vec4(normal, 0.0);\n  return normalize(normal_modelspace.xyz * u_PixelsPerMeter);\n}\n\nvec3 project_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01\n    || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // normals generated by the polygon tesselator are in lnglat offsets instead of meters\n    return normalize(vector * u_PixelsPerDegree);\n  }\n  return project_normal(vector);\n}\n// || u_CoordinateSystem < COORDINATE_SYSTEM_P20_OFFSET + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_P20_OFFSET - 0.01\n// reverse Y\nvec3 reverse_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 ||u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET ) {\n    return vector * vec3(1.0, -1.0, 1.0);\n  }\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return vector;\n  }\n  return vector;\n}\n\nvec4 project_mvt_offset_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return project_offset(vec4(0.0, 0.0, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  return position;\n}\n\nvec4 project_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    float X = position.x - u_ViewportCenter.x;\n    float Y = position.y - u_ViewportCenter.y;\n    return project_offset(vec4(X, Y, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return vec4(\n      (project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.),\n      project_scale(position.z),\n      position.w\n    );\n  }\n\n  // if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n \n\n  //    return vec4(\n  //     position.xy,\n  //     project_scale(position.z),\n  //     position.w);\n  // }\n  return position;\n\n  // TODO: \u74E6\u7247\u5750\u6807\u7CFB & \u5E38\u89C4\u4E16\u754C\u5750\u6807\u7CFB\n}\nvec2 project_pixel_size_to_clipspace(vec2 pixels) {\n  vec2 offset = pixels / u_ViewportSize * u_DevicePixelRatio * 2.0;\n  return offset * u_FocalDistance;\n}\n\n\n\nfloat project_pixel_allmap(float pixel) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) {\n    return pixel * pow(2.0, u_Zoom);\n  }\n  return pixel * u_FocalDistance ;\n}\n\n// \u9002\u914D\u7EB9\u7406\u8D34\u56FE\u7684\u7B49\u50CF\u7D20\u5927\u5C0F\nfloat project_pixel_texture(float pixel) {\n  // mapbox zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    return pixel * pow(0.5, u_Zoom) * u_FocalDistance ;\n  }\n\n  // amap2 zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n\n  // amap zoom > 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return pixel * pow(0.5, u_Zoom)* u_FocalDistance ;\n  }\n\n  // amap zoom < 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return pixel * pow(2.0, (20.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * 2.0 *  u_FocalDistance;;\n}\n\n// \u5728\u4E0D\u8BBA\u4EC0\u4E48\u5E95\u56FE\u4E0B\u9700\u8981\u7EDF\u4E00\u5904\u7406\u7684\u65F6\u5019\u4F7F\u7528\nfloat project_float_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // mapbox P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom));\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\n\n// Project meter into the unit of pixel which used in the camera world space\nfloat project_float_meter(float meter) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Since the zoom level uniform is updated by mapservice and it's alread been subtracted by 1\n    // Not sure if we are supposed to do that again\n   return meter;\n  } else  {\n    return project_float_pixel(meter);\n  }\n\n  // TODO: change the following code to make adaptations for amap\n  // return u_FocalDistance * TILE_SIZE * pow(2.0, u_Zoom) * meter / EARTH_CIRCUMFERENCE;\n}\n\nfloat project_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\nvec2 project_pixel(vec2 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\nvec3 project_pixel(vec3 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) *  u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\n\nvec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n    position.w *= u_PixelsPerMeter.z;\n  }\n\n  return viewProjectionMatrix * position + center;\n}\n\n// Projects from common space coordinates to clip space\nvec4 project_common_position_to_clipspace(vec4 position) {\n  return project_common_position_to_clipspace(\n    position,\n    u_ViewProjectionMatrix,\n    u_ViewportCenterProjection\n  );\n}\n\nvec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {\n  vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n     pos.w = pos.w / u_PixelsPerMeter.z;\n  }\n  return pos;\n}\n\n\nbool isEqual( float a,  float b) {\n    return  a< b + 0.001 && a > b - 0.001;\n}\n\n// \u652F\u6301 GaodeV2\u3001Mapbox\nvec4 project_common_position_to_clipspace_v2(vec4 position) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    return u_Mvp * position;\n  } else {\n    return project_common_position_to_clipspace(position);\n  }\n}\n";
 /* babel-plugin-inline-import '../../shaders/rotation_2d.glsl' */
@@ -33,0 +33,0 @@ var rotation_2d = "vec2 rotate_matrix(vec2 v, float a) {\n    float b = a / 180.0 * 3.1415926535897932384626433832795;\n    float s = sin(b);\n    float c = cos(b);\n    mat2 m = mat2(c, s, -s, c);\n    return m * v;\n}";

lib/services/interaction/PickingService.js

@@ -10,4 +10,4 @@ "use strict";
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
@@ -25,5 +25,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _IInteractionService = require("../interaction/IInteractionService");
-var _gl = require("../renderer/gl");
 var _ITexture2D = require("../renderer/ITexture2D");
 var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var PickingService = exports.default = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_types.TYPES.IMapService), _dec3 = (0, _inversify.inject)(_types.TYPES.IRendererService), _dec4 = (0, _inversify.inject)(_types.TYPES.IGlobalConfigService), _dec5 = (0, _inversify.inject)(_types.TYPES.IInteractionService), _dec6 = (0, _inversify.inject)(_types.TYPES.ILayerService), _dec(_class = (_class2 = /*#__PURE__*/function () {
@@ -45,93 +47,102 @@ function PickingService() {
     (0, _defineProperty2.default)(this, "pickBufferScale", 1.0);
-    (0, _defineProperty2.default)(this, "pickFromPickingFBO", function (layer, _ref) {
-      var x = _ref.x,
-        y = _ref.y,
-        lngLat = _ref.lngLat,
-        type = _ref.type,
-        target = _ref.target;
-      var isPicked = false;
-      var _this$rendererService = _this.rendererService,
-        readPixels = _this$rendererService.readPixels,
-        getContainer = _this$rendererService.getContainer;
-      var _this$getContainerSiz = _this.getContainerSize(getContainer()),
-        width = _this$getContainerSiz.width,
-        height = _this$getContainerSiz.height;
-      width *= _l7Utils.DOM.DPR;
-      height *= _l7Utils.DOM.DPR;
-      var _layer$getLayerConfig = layer.getLayerConfig(),
-        enableHighlight = _layer$getLayerConfig.enableHighlight,
-        enableSelect = _layer$getLayerConfig.enableSelect;
-      var xInDevicePixel = x * _l7Utils.DOM.DPR;
-      var yInDevicePixel = y * _l7Utils.DOM.DPR;
-      if (xInDevicePixel > width - 1 * _l7Utils.DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * _l7Utils.DOM.DPR || yInDevicePixel < 0) {
-        return false;
-      }
-      var pickedColors = readPixels({
-        x: Math.floor(xInDevicePixel / _this.pickBufferScale),
-        // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-        y: Math.floor((height - (y + 1) * _l7Utils.DOM.DPR) / _this.pickBufferScale),
-        width: 1,
-        height: 1,
-        data: new Uint8Array(1 * 1 * 4),
-        framebuffer: _this.pickingFBO
-      });
-      _this.pickedColors = pickedColors;
-      if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
-        var pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(pickedColors);
-        // 瓦片数据获取性能问题需要优化
-        var rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
-        if (pickedFeatureIdx !== layer.getCurrentPickId() && type === 'mousemove') {
-          type = 'mouseenter';
-        }
-        var layerTarget = {
-          x: x,
-          y: y,
-          type: type,
-          lngLat: lngLat,
-          featureId: pickedFeatureIdx,
-          feature: rawFeature,
-          target: target
-        };
-        if (!rawFeature) {
-          // this.logger.error(
-          //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
-          // );
-        } else {
-          // trigger onHover/Click callback on layer
-          isPicked = true;
-          layer.setCurrentPickId(pickedFeatureIdx);
-          _this.triggerHoverOnLayer(layer, layerTarget); // 触发拾取事件
-        }
-      } else {
-        // 未选中
-        var _layerTarget = {
-          x: x,
-          y: y,
-          lngLat: lngLat,
-          type: layer.getCurrentPickId() !== null && type === 'mousemove' ? 'mouseout' : 'un' + type,
-          featureId: null,
-          target: target,
-          feature: null
-        };
-        _this.triggerHoverOnLayer(layer, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _layerTarget), {}, {
-          type: 'unpick'
-        }));
-        _this.triggerHoverOnLayer(layer, _layerTarget);
-        layer.setCurrentPickId(null);
-      }
-      if (enableHighlight) {
-        layer.layerPickService.highlightPickedFeature(pickedColors);
-      }
-      if (enableSelect && type === 'click' && (pickedColors === null || pickedColors === void 0 ? void 0 : pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
-        var selectedId = (0, _l7Utils.decodePickingColor)(pickedColors);
-        if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
-          layer.layerPickService.selectFeature(pickedColors);
-          layer.setCurrentSelectedId(selectedId);
-        } else {
-          layer.layerPickService.selectFeature(new Uint8Array([0, 0, 0, 0])); // toggle select
-          layer.setCurrentSelectedId(null);
-        }
-      }
-      return isPicked;
-    });
+    (0, _defineProperty2.default)(this, "pickFromPickingFBO", /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer, _ref) {
+        var x, y, lngLat, type, target, isPicked, _this$rendererService, readPixelsAsync, getContainer, _this$getContainerSiz, width, height, _layer$getLayerConfig, enableHighlight, enableSelect, xInDevicePixel, yInDevicePixel, pickedColors, pickedFeatureIdx, rawFeature, layerTarget, _layerTarget, selectedId;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              x = _ref.x, y = _ref.y, lngLat = _ref.lngLat, type = _ref.type, target = _ref.target;
+              isPicked = false;
+              _this$rendererService = _this.rendererService, readPixelsAsync = _this$rendererService.readPixelsAsync, getContainer = _this$rendererService.getContainer;
+              _this$getContainerSiz = _this.getContainerSize(getContainer()), width = _this$getContainerSiz.width, height = _this$getContainerSiz.height;
+              width *= _l7Utils.DOM.DPR;
+              height *= _l7Utils.DOM.DPR;
+              _layer$getLayerConfig = layer.getLayerConfig(), enableHighlight = _layer$getLayerConfig.enableHighlight, enableSelect = _layer$getLayerConfig.enableSelect;
+              xInDevicePixel = x * _l7Utils.DOM.DPR;
+              yInDevicePixel = y * _l7Utils.DOM.DPR;
+              if (!(xInDevicePixel > width - 1 * _l7Utils.DOM.DPR || xInDevicePixel < 0 || yInDevicePixel > height - 1 * _l7Utils.DOM.DPR || yInDevicePixel < 0)) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 11:
+              _context.next = 13;
+              return readPixelsAsync({
+                x: Math.floor(xInDevicePixel / _this.pickBufferScale),
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.floor((height - (y + 1) * _l7Utils.DOM.DPR) / _this.pickBufferScale),
+                width: 1,
+                height: 1,
+                data: new Uint8Array(1 * 1 * 4),
+                framebuffer: _this.pickingFBO
+              });
+            case 13:
+              pickedColors = _context.sent;
+              _this.pickedColors = pickedColors;
+              if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
+                pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(pickedColors); // 瓦片数据获取性能问题需要优化
+                rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
+                if (pickedFeatureIdx !== layer.getCurrentPickId() && type === 'mousemove') {
+                  type = 'mouseenter';
+                }
+                layerTarget = {
+                  x: x,
+                  y: y,
+                  type: type,
+                  lngLat: lngLat,
+                  featureId: pickedFeatureIdx,
+                  feature: rawFeature,
+                  target: target
+                };
+                if (!rawFeature) {
+                  // this.logger.error(
+                  //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
+                  // );
+                } else {
+                  // trigger onHover/Click callback on layer
+                  isPicked = true;
+                  layer.setCurrentPickId(pickedFeatureIdx);
+                  _this.triggerHoverOnLayer(layer, layerTarget); // 触发拾取事件
+                }
+              } else {
+                // 未选中
+                _layerTarget = {
+                  x: x,
+                  y: y,
+                  lngLat: lngLat,
+                  type: layer.getCurrentPickId() !== null && type === 'mousemove' ? 'mouseout' : 'un' + type,
+                  featureId: null,
+                  target: target,
+                  feature: null
+                };
+                _this.triggerHoverOnLayer(layer, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _layerTarget), {}, {
+                  type: 'unpick'
+                }));
+                _this.triggerHoverOnLayer(layer, _layerTarget);
+                layer.setCurrentPickId(null);
+              }
+              if (enableHighlight) {
+                layer.layerPickService.highlightPickedFeature(pickedColors);
+              }
+              if (enableSelect && type === 'click' && (pickedColors === null || pickedColors === void 0 ? void 0 : pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
+                selectedId = (0, _l7Utils.decodePickingColor)(pickedColors);
+                if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
+                  layer.layerPickService.selectFeature(pickedColors);
+                  layer.setCurrentSelectedId(selectedId);
+                } else {
+                  layer.layerPickService.selectFeature(new Uint8Array([0, 0, 0, 0])); // toggle select
+                  layer.setCurrentSelectedId(null);
+                }
+              }
+              return _context.abrupt("return", isPicked);
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
   }
@@ -154,10 +165,12 @@ (0, _createClass2.default)(PickingService, [{
       // 创建 picking framebuffer，后续实时 resize
+      var pickingColorTexture = createTexture2D({
+        width: width,
+        height: height,
+        // wrapS: gl.CLAMP_TO_EDGE,
+        // wrapT: gl.CLAMP_TO_EDGE,
+        usage: _ITexture2D.TextureUsage.RENDER_TARGET,
+        label: 'Picking Texture'
+      });
       this.pickingFBO = createFramebuffer({
-        color: createTexture2D({
-          width: width,
-          height: height,
-          wrapS: _gl.gl.CLAMP_TO_EDGE,
-          wrapT: _gl.gl.CLAMP_TO_EDGE,
-          usage: _ITexture2D.TextureUsage.RENDER_TARGET
-        }),
+        color: pickingColorTexture,
         depth: true,
@@ -174,32 +187,45 @@ width: width,
     value: function () {
-      var _boxPickLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer, box, cb) {
+      var _boxPickLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(layer, box, cb) {
         var _this2 = this;
-        var _this$rendererService3, useFramebuffer, clear;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        var _this$rendererService3, useFramebufferAsync, clear, features;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _this$rendererService3 = this.rendererService, useFramebuffer = _this$rendererService3.useFramebuffer, clear = _this$rendererService3.clear;
+              _this$rendererService3 = this.rendererService, useFramebufferAsync = _this$rendererService3.useFramebufferAsync, clear = _this$rendererService3.clear;
               this.resizePickingFBO();
-              useFramebuffer(this.pickingFBO, function () {
-                clear({
-                  framebuffer: _this2.pickingFBO,
-                  color: [0, 0, 0, 0],
-                  stencil: 0,
-                  depth: 1
-                });
-                layer.hooks.beforePickingEncode.call();
-                layer.renderModels({
-                  ispick: true
-                });
-                layer.hooks.afterPickingEncode.call();
-                var features = _this2.pickBox(layer, box);
-                cb(features);
-              });
-            case 3:
+              layer.hooks.beforePickingEncode.call();
+              _context3.next = 5;
+              return useFramebufferAsync(this.pickingFBO, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+                return _regenerator.default.wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      clear({
+                        framebuffer: _this2.pickingFBO,
+                        color: [0, 0, 0, 0],
+                        stencil: 0,
+                        depth: 1
+                      });
+                      layer.renderModels({
+                        ispick: true
+                      });
+                    case 2:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              })));
+            case 5:
+              layer.hooks.afterPickingEncode.call();
+              _context3.next = 8;
+              return this.pickBox(layer, box);
+            case 8:
+              features = _context3.sent;
+              cb(features);
+            case 10:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function boxPickLayer(_x, _x2, _x3) {
+      function boxPickLayer(_x3, _x4, _x5) {
         return _boxPickLayer.apply(this, arguments);
@@ -211,52 +237,62 @@ }
     key: "pickBox",
-    value: function pickBox(layer, box) {
-      var _this3 = this;
-      var _box$map = box.map(function (v) {
-          var tmpV = v < 0 ? 0 : v;
-          return Math.floor(tmpV * _l7Utils.DOM.DPR / _this3.pickBufferScale);
-        }),
-        _box$map2 = (0, _slicedToArray2.default)(_box$map, 4),
-        xMin = _box$map2[0],
-        yMin = _box$map2[1],
-        xMax = _box$map2[2],
-        yMax = _box$map2[3];
-      var _this$rendererService4 = this.rendererService,
-        readPixels = _this$rendererService4.readPixels,
-        getContainer = _this$rendererService4.getContainer;
-      var _this$getContainerSiz3 = this.getContainerSize(getContainer()),
-        width = _this$getContainerSiz3.width,
-        height = _this$getContainerSiz3.height;
-      width *= _l7Utils.DOM.DPR;
-      height *= _l7Utils.DOM.DPR;
-      if (xMin > (width - 1) * _l7Utils.DOM.DPR / this.pickBufferScale || xMax < 0 || yMin > (height - 1) * _l7Utils.DOM.DPR / this.pickBufferScale || yMax < 0) {
-        return [];
+    value: function () {
+      var _pickBox = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(layer, box) {
+        var _this3 = this;
+        var _box$map, _box$map2, xMin, yMin, xMax, yMax, _this$rendererService4, readPixelsAsync, getContainer, _this$getContainerSiz3, width, height, w, h, pickedColors, features, featuresIdMap, i, color, pickedFeatureIdx, rawFeature;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _box$map = box.map(function (v) {
+                var tmpV = v < 0 ? 0 : v;
+                return Math.floor(tmpV * _l7Utils.DOM.DPR / _this3.pickBufferScale);
+              }), _box$map2 = (0, _slicedToArray2.default)(_box$map, 4), xMin = _box$map2[0], yMin = _box$map2[1], xMax = _box$map2[2], yMax = _box$map2[3];
+              _this$rendererService4 = this.rendererService, readPixelsAsync = _this$rendererService4.readPixelsAsync, getContainer = _this$rendererService4.getContainer;
+              _this$getContainerSiz3 = this.getContainerSize(getContainer()), width = _this$getContainerSiz3.width, height = _this$getContainerSiz3.height;
+              width *= _l7Utils.DOM.DPR;
+              height *= _l7Utils.DOM.DPR;
+              if (!(xMin > (width - 1) * _l7Utils.DOM.DPR / this.pickBufferScale || xMax < 0 || yMin > (height - 1) * _l7Utils.DOM.DPR / this.pickBufferScale || yMax < 0)) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("return", []);
+            case 7:
+              w = Math.min(width / this.pickBufferScale, xMax) - xMin;
+              h = Math.min(height / this.pickBufferScale, yMax) - yMin;
+              _context4.next = 11;
+              return readPixelsAsync({
+                x: xMin,
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.floor(height / this.pickBufferScale - (yMax + 1)),
+                width: w,
+                height: h,
+                data: new Uint8Array(w * h * 4),
+                framebuffer: this.pickingFBO
+              });
+            case 11:
+              pickedColors = _context4.sent;
+              features = [];
+              featuresIdMap = {};
+              for (i = 0; i < pickedColors.length / 4; i = i + 1) {
+                color = pickedColors.slice(i * 4, i * 4 + 4);
+                pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(color);
+                if (pickedFeatureIdx !== -1 && !featuresIdMap[pickedFeatureIdx]) {
+                  rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
+                  features.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rawFeature), {}, {
+                    pickedFeatureIdx: pickedFeatureIdx
+                  }));
+                  featuresIdMap[pickedFeatureIdx] = true;
+                }
+              }
+              return _context4.abrupt("return", features);
+            case 16:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function pickBox(_x6, _x7) {
+        return _pickBox.apply(this, arguments);
       }
-      var w = Math.min(width / this.pickBufferScale, xMax) - xMin;
-      var h = Math.min(height / this.pickBufferScale, yMax) - yMin;
-      var pickedColors = readPixels({
-        x: xMin,
-        // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-        y: Math.floor(height / this.pickBufferScale - (yMax + 1)),
-        width: w,
-        height: h,
-        data: new Uint8Array(w * h * 4),
-        framebuffer: this.pickingFBO
-      });
-      var features = [];
-      var featuresIdMap = {};
-      for (var i = 0; i < pickedColors.length / 4; i = i + 1) {
-        var color = pickedColors.slice(i * 4, i * 4 + 4);
-        var pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(color);
-        if (pickedFeatureIdx !== -1 && !featuresIdMap[pickedFeatureIdx]) {
-          var rawFeature = layer.layerPickService.getFeatureById(pickedFeatureIdx);
-          features.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rawFeature), {}, {
-            pickedFeatureIdx: pickedFeatureIdx
-          }));
-          featuresIdMap[pickedFeatureIdx] = true;
-        }
-      }
-      return features;
-    }
-
-    // 动态设置鼠标光标
+      return pickBox;
+    }() // 动态设置鼠标光标
   }, {
@@ -309,14 +345,14 @@ key: "handleCursor",
     value: function () {
-      var _pickingAllLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(target) {
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _pickingAllLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(target) {
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (!(!this.layerService.needPick(target.type) || !this.isPickingAllLayer())) {
-                _context2.next = 2;
+                _context5.next = 2;
                 break;
               }
-              return _context2.abrupt("return");
+              return _context5.abrupt("return");
             case 2:
               this.alreadyInPicking = true;
-              _context2.next = 5;
+              _context5.next = 5;
               return this.pickingLayers(target);
@@ -328,7 +364,7 @@ case 5:
             case "end":
-              return _context2.stop();
+              return _context5.stop();
           }
-        }, _callee2, this);
+        }, _callee5, this);
       }));
-      function pickingAllLayer(_x4) {
+      function pickingAllLayer(_x8) {
         return _pickingAllLayer.apply(this, arguments);
@@ -382,34 +418,96 @@ }
     value: function () {
-      var _pickingLayers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(target) {
+      var _pickingLayers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(target) {
         var _this4 = this;
-        var clear;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        var _this$rendererService5, clear, useFramebufferAsync, layers, _iterator, _step, _loop;
+        return _regenerator.default.wrap(function _callee7$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
-              clear = this.rendererService.clear;
+              _this$rendererService5 = this.rendererService, clear = _this$rendererService5.clear, useFramebufferAsync = _this$rendererService5.useFramebufferAsync;
               this.resizePickingFBO();
-              this.rendererService.useFramebuffer(this.pickingFBO, function () {
-                var layers = _this4.layerService.getRenderList();
-                layers.filter(function (layer) {
-                  return layer.needPick(target.type);
-                }).reverse().some(function (layer) {
-                  clear({
-                    framebuffer: _this4.pickingFBO,
-                    color: [0, 0, 0, 0],
-                    stencil: 0,
-                    depth: 1
-                  });
-                  layer.layerPickService.pickRender(target);
-                  var isPicked = _this4.pickFromPickingFBO(layer, target);
-                  _this4.layerService.pickedLayerId = isPicked ? +layer.id : -1;
-                  return isPicked && !layer.getLayerConfig().enablePropagation;
-                });
+              layers = this.layerService.getRenderList();
+              _iterator = _createForOfIteratorHelper(layers.filter(function (layer) {
+                return layer.needPick(target.type);
+              }).reverse());
+              _context8.prev = 4;
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                var layer, isPicked;
+                return _regenerator.default.wrap(function _loop$(_context7) {
+                  while (1) switch (_context7.prev = _context7.next) {
+                    case 0:
+                      layer = _step.value;
+                      if (!layer.tileLayer) {
+                        layer.hooks.beforePickingEncode.call();
+                      }
+                      _context7.next = 4;
+                      return useFramebufferAsync(_this4.pickingFBO, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+                        return _regenerator.default.wrap(function _callee6$(_context6) {
+                          while (1) switch (_context6.prev = _context6.next) {
+                            case 0:
+                              clear({
+                                framebuffer: _this4.pickingFBO,
+                                color: [0, 0, 0, 0],
+                                stencil: 0,
+                                depth: 1
+                              });
+                              layer.layerPickService.pickRender(target);
+                            case 2:
+                            case "end":
+                              return _context6.stop();
+                          }
+                        }, _callee6);
+                      })));
+                    case 4:
+                      if (!layer.tileLayer) {
+                        layer.hooks.afterPickingEncode.call();
+                      }
+                      _context7.next = 7;
+                      return _this4.pickFromPickingFBO(layer, target);
+                    case 7:
+                      isPicked = _context7.sent;
+                      _this4.layerService.pickedLayerId = isPicked ? +layer.id : -1;
+                      if (!(isPicked && !layer.getLayerConfig().enablePropagation)) {
+                        _context7.next = 11;
+                        break;
+                      }
+                      return _context7.abrupt("return", 1);
+                    case 11:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }, _loop);
               });
-            case 3:
+              _iterator.s();
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context8.next = 13;
+                break;
+              }
+              return _context8.delegateYield(_loop(), "t0", 9);
+            case 9:
+              if (!_context8.t0) {
+                _context8.next = 11;
+                break;
+              }
+              return _context8.abrupt("break", 13);
+            case 11:
+              _context8.next = 7;
+              break;
+            case 13:
+              _context8.next = 18;
+              break;
+            case 15:
+              _context8.prev = 15;
+              _context8.t1 = _context8["catch"](4);
+              _iterator.e(_context8.t1);
+            case 18:
+              _context8.prev = 18;
+              _iterator.f();
+              return _context8.finish(18);
+            case 21:
             case "end":
-              return _context3.stop();
+              return _context8.stop();
           }
-        }, _callee3, this);
+        }, _callee7, this, [[4, 15, 18, 21]]);
       }));
-      function pickingLayers(_x5) {
+      function pickingLayers(_x9) {
         return _pickingLayers.apply(this, arguments);
@@ -416,0 +514,0 @@ }

lib/services/layer/LayerService.js

@@ -410,3 +410,2 @@ "use strict";
       if (layer.tileMask) {
-        // TODO 示例瓦片掩膜多层支持
         layer.tileMask.render({
@@ -413,0 +412,0 @@ isStencil: true,

lib/services/renderer/passes/PixelPickingPass.js

@@ -8,4 +8,6 @@ "use strict";
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -71,3 +73,3 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
         getViewportSize = _this$rendererService.getViewportSize,
-        readPixels = _this$rendererService.readPixels,
+        readPixelsAsync = _this$rendererService.readPixelsAsync,
         useFramebuffer = _this$rendererService.useFramebuffer;
@@ -86,56 +88,67 @@ var _getViewportSize = getViewportSize(),
       var pickedColors;
-      useFramebuffer(_this.pickingFBO, function () {
+      useFramebuffer(_this.pickingFBO, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _pickedColors;
-        // avoid realloc
-        pickedColors = readPixels({
-          x: Math.round(xInDevicePixel),
-          // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-          y: Math.round(height - (y + 1) * _l7Utils.DOM.DPR),
-          width: 1,
-          height: 1,
-          data: new Uint8Array(1 * 1 * 4),
-          framebuffer: _this.pickingFBO
-        });
-        if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
-          var pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(pickedColors);
-          var rawFeature = _this.layer.getSource().getFeatureById(pickedFeatureIdx);
-          var target = {
-            x: x,
-            y: y,
-            type: type,
-            lngLat: lngLat,
-            featureId: pickedFeatureIdx,
-            feature: rawFeature
-          };
-          if (!rawFeature) {
-            // this.logger.error(
-            //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
-            // );
-          } else {
-            // trigger onHover/Click callback on layer
-            _this.layer.setCurrentPickId(pickedFeatureIdx);
-            _this.triggerHoverOnLayer(target);
+        var pickedFeatureIdx, rawFeature, target, _target;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return readPixelsAsync({
+                x: Math.round(xInDevicePixel),
+                // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
+                y: Math.round(height - (y + 1) * _l7Utils.DOM.DPR),
+                width: 1,
+                height: 1,
+                data: new Uint8Array(1 * 1 * 4),
+                framebuffer: _this.pickingFBO
+              });
+            case 2:
+              pickedColors = _context.sent;
+              if (pickedColors[0] !== 0 || pickedColors[1] !== 0 || pickedColors[2] !== 0) {
+                pickedFeatureIdx = (0, _l7Utils.decodePickingColor)(pickedColors);
+                rawFeature = _this.layer.getSource().getFeatureById(pickedFeatureIdx);
+                target = {
+                  x: x,
+                  y: y,
+                  type: type,
+                  lngLat: lngLat,
+                  featureId: pickedFeatureIdx,
+                  feature: rawFeature
+                };
+                if (!rawFeature) {
+                  // this.logger.error(
+                  //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
+                  // );
+                } else {
+                  // trigger onHover/Click callback on layer
+                  _this.layer.setCurrentPickId(pickedFeatureIdx);
+                  _this.triggerHoverOnLayer(target);
+                }
+              } else {
+                _target = {
+                  x: x,
+                  y: y,
+                  lngLat: lngLat,
+                  type: _this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
+                  featureId: null,
+                  feature: null
+                };
+                _this.triggerHoverOnLayer((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _target), {}, {
+                  type: 'unpick'
+                }));
+                _this.triggerHoverOnLayer(_target);
+                _this.layer.setCurrentPickId(null);
+              }
+              if (enableHighlight) {
+                _this.highlightPickedFeature(pickedColors);
+              }
+              if (enableSelect && type === 'click' && ((_pickedColors = pickedColors) === null || _pickedColors === void 0 ? void 0 : _pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
+                _this.selectFeature(pickedColors);
+              }
+            case 6:
+            case "end":
+              return _context.stop();
           }
-        } else {
-          var _target = {
-            x: x,
-            y: y,
-            lngLat: lngLat,
-            type: _this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
-            featureId: null,
-            feature: null
-          };
-          _this.triggerHoverOnLayer((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _target), {}, {
-            type: 'unpick'
-          }));
-          _this.triggerHoverOnLayer(_target);
-          _this.layer.setCurrentPickId(null);
-        }
-        if (enableHighlight) {
-          _this.highlightPickedFeature(pickedColors);
-        }
-        if (enableSelect && type === 'click' && ((_pickedColors = pickedColors) === null || _pickedColors === void 0 ? void 0 : _pickedColors.toString()) !== [0, 0, 0, 0].toString()) {
-          _this.selectFeature(pickedColors);
-        }
-      });
+        }, _callee);
+      })));
     });
@@ -167,9 +180,11 @@ return _this;
       // 创建 picking framebuffer，后续实时 resize
+      var pickingColorTexture = createTexture2D({
+        width: width,
+        height: height,
+        wrapS: _gl.gl.CLAMP_TO_EDGE,
+        wrapT: _gl.gl.CLAMP_TO_EDGE,
+        label: 'Picking Texture'
+      });
       this.pickingFBO = createFramebuffer({
-        color: createTexture2D({
-          width: width,
-          height: height,
-          wrapS: _gl.gl.CLAMP_TO_EDGE,
-          wrapT: _gl.gl.CLAMP_TO_EDGE
-        })
+        color: pickingColorTexture
       });
@@ -276,4 +291,4 @@
     key: "selectFeatureHandle",
-    value: function selectFeatureHandle(_ref2) {
-      var featureId = _ref2.featureId;
+    value: function selectFeatureHandle(_ref3) {
+      var featureId = _ref3.featureId;
       var pickedColors = (0, _l7Utils.encodePickingColor)(featureId);
@@ -284,4 +299,4 @@ this.selectFeature(new Uint8Array(pickedColors));
     key: "highlightFeatureHandle",
-    value: function highlightFeatureHandle(_ref3) {
-      var featureId = _ref3.featureId;
+    value: function highlightFeatureHandle(_ref4) {
+      var featureId = _ref4.featureId;
       var pickedColors = (0, _l7Utils.encodePickingColor)(featureId);
@@ -288,0 +303,0 @@ this.highlightPickedFeature(new Uint8Array(pickedColors));

lib/services/shader/ShaderModuleService.js

@@ -37,3 +37,3 @@ "use strict";
 /* babel-plugin-inline-import '../../shaders/projection.glsl' */
-var projection = "#define TILE_SIZE 512.0\n#define PI 3.1415926536\n#define WORLD_SCALE TILE_SIZE / (PI * 2.0)\n#define EARTH_CIRCUMFERENCE 40.03e6\n\n#define COORDINATE_SYSTEM_LNGLAT 1.0        // mapbox\n#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset\n#define COORDINATE_SYSTEM_VECTOR_TILE 3.0\n#define COORDINATE_SYSTEM_IDENTITY 4.0\n#define COORDINATE_SYSTEM_P20 5.0           // amap\n#define COORDINATE_SYSTEM_P20_OFFSET 6.0    // amap offset\n#define COORDINATE_SYSTEM_METER_OFFSET 7.0\n\n#define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0\n#pragma include \"scene_uniforms\"\n\n\n// web mercator coords -> world coords\nvec2 project_mercator(vec2 lnglat) {\n   if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return lnglat;\n  }\n  float x = lnglat.x;\n  return vec2(\n    radians(x) + PI,\n    PI - log(tan(PI * 0.25 + radians(lnglat.y) * 0.5))\n  );\n}\n\nfloat project_scale(float meters) {\n  return meters * u_PixelsPerMeter.z;\n}\n\n\n// offset coords -> world coords\nvec4 project_offset(vec4 offset) {\n  float dy = offset.y;\n  dy = clamp(dy, -1., 1.);\n  vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy;\n  return vec4(offset.xyz * pixels_per_unit, offset.w);\n}\n\nvec3 project_normal(vec3 normal) {\n  vec4 normal_modelspace = u_ModelMatrix * vec4(normal, 0.0);\n  return normalize(normal_modelspace.xyz * u_PixelsPerMeter);\n}\n\nvec3 project_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01\n    || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // normals generated by the polygon tesselator are in lnglat offsets instead of meters\n    return normalize(vector * u_PixelsPerDegree);\n  }\n  return project_normal(vector);\n}\n// || u_CoordinateSystem < COORDINATE_SYSTEM_P20_OFFSET + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_P20_OFFSET - 0.01\n// reverse Y\nvec3 reverse_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 ||u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET ) {\n    return vector * vec3(1.0, -1.0, 1.0);\n  }\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return vector;\n  }\n  return vector;\n}\n\nvec4 project_mvt_offset_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return project_offset(vec4(0.0, 0.0, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  return position;\n}\n\nvec4 project_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    float X = position.x - u_ViewportCenter.x;\n    float Y = position.y - u_ViewportCenter.y;\n    return project_offset(vec4(X, Y, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return vec4(\n      (project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.),\n      project_scale(position.z),\n      position.w\n    );\n  }\n\n  // if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n \n\n  //    return vec4(\n  //     position.xy,\n  //     project_scale(position.z),\n  //     position.w);\n  // }\n  return position;\n\n  // TODO: \u74E6\u7247\u5750\u6807\u7CFB & \u5E38\u89C4\u4E16\u754C\u5750\u6807\u7CFB\n}\nvec2 project_pixel_size_to_clipspace(vec2 pixels) {\n  vec2 offset = pixels / u_ViewportSize * u_DevicePixelRatio * 2.0;\n  return offset * u_FocalDistance;\n}\n\n\n\nfloat project_pixel_allmap(float pixel) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) {\n    return pixel * pow(2.0, u_Zoom);\n  }\n  return pixel * u_FocalDistance ;\n}\n\n// \u9002\u914D\u7EB9\u7406\u8D34\u56FE\u7684\u7B49\u50CF\u7D20\u5927\u5C0F\nfloat project_pixel_texture(float pixel) {\n  // mapbox zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    return pixel * pow(0.5, u_Zoom) * u_FocalDistance ;\n  }\n\n  // amap2 zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n\n  // amap zoom > 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return pixel * pow(0.5, u_Zoom)* u_FocalDistance ;\n  }\n\n  // amap zoom < 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return pixel * pow(2.0, (20.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * 2.0 *  u_FocalDistance;;\n}\n\n// \u5728\u4E0D\u8BBA\u4EC0\u4E48\u5E95\u56FE\u4E0B\u9700\u8981\u7EDF\u4E00\u5904\u7406\u7684\u65F6\u5019\u4F7F\u7528\nfloat project_float_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // mapbox P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom));\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\n\n// Project meter into the unit of pixel which used in the camera world space\nfloat project_float_meter(float meter) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Since the zoom level uniform is updated by mapservice and it's alread been subtracted by 1\n    // Not sure if we are supposed to do that again\n   return meter;\n  } else  {\n    return project_float_pixel(meter);\n  }\n\n  // TODO: change the following code to make adaptations for amap\n  return u_FocalDistance * TILE_SIZE * pow(2.0, u_Zoom) * meter / EARTH_CIRCUMFERENCE;\n}\n\nfloat project_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\nvec2 project_pixel(vec2 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\nvec3 project_pixel(vec3 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) *  u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\n\nvec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n    position.w *= u_PixelsPerMeter.z;\n  }\n\n  return viewProjectionMatrix * position + center;\n}\n\n// Projects from common space coordinates to clip space\nvec4 project_common_position_to_clipspace(vec4 position) {\n  return project_common_position_to_clipspace(\n    position,\n    u_ViewProjectionMatrix,\n    u_ViewportCenterProjection\n  );\n}\n\nvec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {\n  vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n     pos.w = pos.w / u_PixelsPerMeter.z;\n  }\n  return pos;\n}\n\n\nbool isEqual( float a,  float b) {\n    return  a< b + 0.001 && a > b - 0.001;\n}\n\n// \u652F\u6301 GaodeV2\u3001Mapbox\nvec4 project_common_position_to_clipspace_v2(vec4 position) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    return u_Mvp * position;\n  } else {\n    return project_common_position_to_clipspace(position);\n  }\n}\n";
+var projection = "#define TILE_SIZE 512.0\n#define PI 3.1415926536\n#define WORLD_SCALE TILE_SIZE / (PI * 2.0)\n#define EARTH_CIRCUMFERENCE 40.03e6\n\n#define COORDINATE_SYSTEM_LNGLAT 1.0        // mapbox\n#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset\n#define COORDINATE_SYSTEM_VECTOR_TILE 3.0\n#define COORDINATE_SYSTEM_IDENTITY 4.0\n#define COORDINATE_SYSTEM_P20 5.0           // amap\n#define COORDINATE_SYSTEM_P20_OFFSET 6.0    // amap offset\n#define COORDINATE_SYSTEM_METER_OFFSET 7.0\n\n#define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0\n#pragma include \"scene_uniforms\"\n\n\n// web mercator coords -> world coords\nvec2 project_mercator(vec2 lnglat) {\n   if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return lnglat;\n  }\n  float x = lnglat.x;\n  return vec2(\n    radians(x) + PI,\n    PI - log(tan(PI * 0.25 + radians(lnglat.y) * 0.5))\n  );\n}\n\nfloat project_scale(float meters) {\n  return meters * u_PixelsPerMeter.z;\n}\n\n\n// offset coords -> world coords\nvec4 project_offset(vec4 offset) {\n  float dy = offset.y;\n  dy = clamp(dy, -1., 1.);\n  vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy;\n  return vec4(offset.xyz * pixels_per_unit, offset.w);\n}\n\nvec3 project_normal(vec3 normal) {\n  vec4 normal_modelspace = u_ModelMatrix * vec4(normal, 0.0);\n  return normalize(normal_modelspace.xyz * u_PixelsPerMeter);\n}\n\nvec3 project_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01\n    || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // normals generated by the polygon tesselator are in lnglat offsets instead of meters\n    return normalize(vector * u_PixelsPerDegree);\n  }\n  return project_normal(vector);\n}\n// || u_CoordinateSystem < COORDINATE_SYSTEM_P20_OFFSET + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_P20_OFFSET - 0.01\n// reverse Y\nvec3 reverse_offset_normal(vec3 vector) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 ||u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET ) {\n    return vector * vec3(1.0, -1.0, 1.0);\n  }\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.0\n    return vector;\n  }\n  return vector;\n}\n\nvec4 project_mvt_offset_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return project_offset(vec4(0.0, 0.0, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  return position;\n}\n\nvec4 project_position(vec4 position) {\n  float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;\n  float b = COORDINATE_SYSTEM_P20_OFFSET;\n  float c = COORDINATE_SYSTEM_LNGLAT;\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    float X = position.x - u_ViewportCenter.x;\n    float Y = position.y - u_ViewportCenter.y;\n    return project_offset(vec4(X, Y, position.z, position.w));\n  }\n  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {\n    return vec4(\n      project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,\n      project_scale(position.z),\n      position.w\n    );\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return vec4(\n      (project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.),\n      project_scale(position.z),\n      position.w\n    );\n  }\n\n  // if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n \n\n  //    return vec4(\n  //     position.xy,\n  //     project_scale(position.z),\n  //     position.w);\n  // }\n  return position;\n\n  // TODO: \u74E6\u7247\u5750\u6807\u7CFB & \u5E38\u89C4\u4E16\u754C\u5750\u6807\u7CFB\n}\nvec2 project_pixel_size_to_clipspace(vec2 pixels) {\n  vec2 offset = pixels / u_ViewportSize * u_DevicePixelRatio * 2.0;\n  return offset * u_FocalDistance;\n}\n\n\n\nfloat project_pixel_allmap(float pixel) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) {\n    return pixel * pow(2.0, u_Zoom);\n  }\n  return pixel * u_FocalDistance ;\n}\n\n// \u9002\u914D\u7EB9\u7406\u8D34\u56FE\u7684\u7B49\u50CF\u7D20\u5927\u5C0F\nfloat project_pixel_texture(float pixel) {\n  // mapbox zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    return pixel * pow(0.5, u_Zoom) * u_FocalDistance ;\n  }\n\n  // amap2 zoom > 12\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n\n  // amap zoom > 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    return pixel * pow(0.5, u_Zoom)* u_FocalDistance ;\n  }\n\n  // amap zoom < 12\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {\n    return pixel * pow(2.0, (20.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * 2.0 *  u_FocalDistance;;\n}\n\n// \u5728\u4E0D\u8BBA\u4EC0\u4E48\u5E95\u56FE\u4E0B\u9700\u8981\u7EDF\u4E00\u5904\u7406\u7684\u65F6\u5019\u4F7F\u7528\nfloat project_float_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // mapbox P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom));\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))* u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\n\n// Project meter into the unit of pixel which used in the camera world space\nfloat project_float_meter(float meter) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Since the zoom level uniform is updated by mapservice and it's alread been subtracted by 1\n    // Not sure if we are supposed to do that again\n   return meter;\n  } else  {\n    return project_float_pixel(meter);\n  }\n\n  // TODO: change the following code to make adaptations for amap\n  // return u_FocalDistance * TILE_SIZE * pow(2.0, u_Zoom) * meter / EARTH_CIRCUMFERENCE;\n}\n\nfloat project_pixel(float pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // amap P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // amap2 P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * u_FocalDistance;\n}\nvec2 project_pixel(vec2 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom)) * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\nvec3 project_pixel(vec3 pixel) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {\n    // P20 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF1\n    return pixel * pow(2.0, (19.0 - u_Zoom)) *  u_FocalDistance ;\n  }\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {\n    // P20_2 \u5750\u6807\u7CFB\u4E0B\uFF0C\u4E3A\u4E86\u548C Web \u58A8\u5361\u6258\u5750\u6807\u7CFB\u7EDF\u4E00\uFF0Czoom \u9ED8\u8BA4\u51CF3\n    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom))  * u_FocalDistance ;\n  }\n  return pixel * -1. * u_FocalDistance;\n}\n\nvec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n    position.w *= u_PixelsPerMeter.z;\n  }\n\n  return viewProjectionMatrix * position + center;\n}\n\n// Projects from common space coordinates to clip space\nvec4 project_common_position_to_clipspace(vec4 position) {\n  return project_common_position_to_clipspace(\n    position,\n    u_ViewProjectionMatrix,\n    u_ViewportCenterProjection\n  );\n}\n\nvec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {\n  vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||\n    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    // Needs to be divided with project_uCommonUnitsPerMeter\n     pos.w = pos.w / u_PixelsPerMeter.z;\n  }\n  return pos;\n}\n\n\nbool isEqual( float a,  float b) {\n    return  a< b + 0.001 && a > b - 0.001;\n}\n\n// \u652F\u6301 GaodeV2\u3001Mapbox\nvec4 project_common_position_to_clipspace_v2(vec4 position) {\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    return u_Mvp * position;\n  } else {\n    return project_common_position_to_clipspace(position);\n  }\n}\n";
 /* babel-plugin-inline-import '../../shaders/rotation_2d.glsl' */
@@ -40,0 +40,0 @@ var rotation_2d = "vec2 rotate_matrix(vec2 v, float a) {\n    float b = a / 180.0 * 3.1415926535897932384626433832795;\n    float s = sin(b);\n    float c = cos(b);\n    mat2 m = mat2(c, s, -s, c);\n    return m * v;\n}";

package.json

 {
   "name": "@antv/l7-core",
-  "version": "2.20.13",
+  "version": "2.20.14",
   "description": "",
@@ -28,3 +28,3 @@ "main": "lib/index.js",
     "@antv/async-hook": "^2.2.9",
-    "@antv/l7-utils": "2.20.13",
+    "@antv/l7-utils": "2.20.14",
     "@babel/runtime": "^7.7.7",
@@ -51,3 +51,3 @@ "@mapbox/tiny-sdf": "^1.2.5",
   },
-  "gitHead": "9487cca3bdd14eb2fc81b310e4eae5d30a30496f",
+  "gitHead": "ad997ac14616fa503fec4022f1a1a48747524f87",
   "publishConfig": {
@@ -54,0 +54,0 @@ "access": "public"

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

995962

increased by1.88%

Lines of code

20994

increased by1.22%

Dependency changes

• + Added@antv/l7-utils@2.20.14(transitive)

• - Removed@antv/l7-utils@2.20.13(transitive)

• Updated@antv/l7-utils@2.20.14