@antv/l7-layers 2.9.27-alpha.2 → 2.9.27-alpha.4

package/es/tile/tmsTileLayer.js

@@ -12,6 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import BaseTileLayer from "./tileLayer/baseTileLayer";
+import { tileAllLoad } from "./utils";
 export var TMSTileLayer = /*#__PURE__*/function (_BaseTileLayer) {
   _inherits(TMSTileLayer, _BaseTileLayer);
 
@@ -83,18 +84,39 @@ export var TMSTileLayer = /*#__PURE__*/function (_BaseTileLayer) {
 
           var _layers = _this2.tileLayerManager.getChilds(tile.layerIDList);
 
-          _this2.tileLayerManager.updateLayersConfig(_layers, 'visible', tile.isVisible);
+          _this2.updateTileVisible(tile, _layers);
 
           _this2.setPickState(_layers);
         }
       });
-      this.parent.renderLayers();
 
       if (this.tilesetManager.isLoaded) {
         // 将事件抛出，图层上可以使用瓦片
         this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
       }
     }
+  }, {
+    key: "emitTileVisibleEvent",
+    value: function emitTileVisibleEvent(tile, callback) {
+      if (tile.isVisible) {
+        callback();
+      } else {
+        tileAllLoad(tile, function () {
+          callback();
+        });
+      }
+    }
+  }, {
+    key: "updateTileVisible",
+    value: function updateTileVisible(tile, layers) {
+      var _this3 = this;
+
+      this.emitTileVisibleEvent(tile, function () {
+        _this3.tileLayerManager.updateLayersConfig(layers, 'visible', tile.isVisible);
+
+        _this3.layerService.reRender();
+      });
+    }
   }]);
 
   return TMSTileLayer;

package/es/tile/utils.d.ts

@@ -11,3 +11,7 @@ export declare function getContainerSize(container: HTMLCanvasElement | HTMLElem
 };
 export declare function readRasterValue(tile: Tile, mapService: IMapService, x: number, y: number): any;
 export declare function readPixel(x: number, y: number, rendererService: IRendererService): false | Uint8Array;
+export declare function isTileLoaded(tile: Tile): boolean;
+export declare function isTileChildLoaded(tile: Tile): boolean;
+export declare function isTileParentLoaded(tile: Tile): boolean;
+export declare function tileAllLoad(tile: Tile, callback: () => void): void;

package/es/tile/utils.js

@@ -128,4 +128,34 @@ export function readPixel(x, y, rendererService) {
     data: new Uint8Array(1 * 1 * 4)
   });
   return pickedColors;
+}
+export function isTileLoaded(tile) {
+  return tile.layerIDList.length === tile.loadedLayers;
+}
+export function isTileChildLoaded(tile) {
+  var childs = tile.children;
+  return childs.filter(function (child) {
+    return isTileLoaded(child);
+  }).length === childs.length;
+}
+export function isTileParentLoaded(tile) {
+  var parent = tile.parent;
+
+  if (!parent) {
+    return true;
+  } else {
+    return isTileLoaded(parent);
+  }
+}
+export function tileAllLoad(tile, callback) {
+  var timer = window.setInterval(function () {
+    var tileLoaded = isTileLoaded(tile);
+    var tileChildLoaded = isTileChildLoaded(tile);
+    var tileParentLoaded = isTileParentLoaded(tile);
+
+    if (tileLoaded && tileChildLoaded && tileParentLoaded) {
+      callback();
+      window.clearInterval(timer);
+    }
+  }, 36);
 }

package/es/utils/dataMappingStyle.js

@@ -23,6 +23,9 @@ function registerStyleAttribute(fieldName, layer, field, values, updateOptions)
 
 
 function handleStyleDataMapping(configToUpdate, layer) {
+  // 瓦片图层不需要进行样式数据映射
+  if (layer.tileLayer || layer.isTileLayer) return;
+
   if (configToUpdate.opacity) {
     // 处理 style 中 opacity 属性的数据映射
     handleStyleFloat('opacity', layer, configToUpdate.opacity);

package/es/utils/layerData.js

@@ -17,7 +17,7 @@ function adjustData2Amap2Coordinates(mappedData, mapService) {
     if (typeof mappedData[0].coordinates[0] === 'number') {
       // 单个的点数据
       // @ts-ignore
-      mappedData // TODO: 避免经纬度被重复计算导致坐标位置偏移
+      mappedData // 避免经纬度被重复计算导致坐标位置偏移
       .filter(function (d) {
         return !d.originCoordinates;
       }).map(function (d) {
@@ -31,7 +31,7 @@ function adjustData2Amap2Coordinates(mappedData, mapService) {
     } else {
       // 连续的线、面数据
       // @ts-ignore
-      mappedData // TODO: 避免经纬度被重复计算导致坐标位置偏移
+      mappedData // 避免经纬度被重复计算导致坐标位置偏移
       .filter(function (d) {
         return !d.originCoordinates;
       }).map(function (d) {

package/es/utils/updateShape.js

@@ -1,4 +1,4 @@
-// TODO: shapeUpdateList 存储一系列的 shape 类型
+// shapeUpdateList 存储一系列的 shape 类型
 // 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
 var shapeUpdateList = [// PointLayer
 ['circle', 'cylinder'], ['square', 'cylinder'], ['triangle', 'cylinder'], ['pentagon', 'cylinder'], ['hexagon', 'cylinder'], ['octogon', 'cylinder'], ['hexagram', 'cylinder'], ['rhombus', 'cylinder'], ['vesica', 'cylinder']];
@@ -11,7 +11,7 @@ export function updateShape(layer, lastShape, currentShape) {
 
     shapeUpdateList.map(function (shapes) {
       if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
-        // TODO: dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
+        // dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
         layer.dataState.dataSourceNeedUpdate = true;
         return;
       }

package/es/wind/index.js

@@ -44,7 +44,9 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
       this.layerModel.initModels(function (models) {
         _this2.models = models;
 
-        _this2.renderLayers();
+        _this2.emit('modelLoaded', null);
+
+        _this2.layerService.throttleRenderLayers();
       });
     }
   }, {
@@ -53,7 +55,9 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
       var _this3 = this;
 
       this.layerModel.buildModels(function (models) {
-        return _this3.models = models;
+        _this3.models = models;
+
+        _this3.emit('modelLoaded', null);
       });
     }
   }, {

package/es/wind/models/wind.js

@@ -11,7 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import { AttributeType, gl } from '@antv/l7-core';
-import { FrequencyController } from '@antv/l7-utils';
+import { FrequencyController, getMask } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { RasterImageTriangulation } from "../../core/triangulation";
 
@@ -19,7 +19,7 @@ import { RasterImageTriangulation } from "../../core/triangulation";
 var WindFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nvoid main() {\n  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));\n  gl_FragColor = color;\n  gl_FragColor.a *= u_opacity;\n}\n";
 
 /* babel-plugin-inline-import '../shaders/wind_vert.glsl' */
-var WindVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   }\n}\n";
+var WindVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   \n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   }\n}\n";
 import { Wind } from "./windRender";
 var defaultRampColors = {
   0.0: '#3288bd',
@@ -149,9 +149,7 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
           height: imageHeight
         });
 
-        _this3.layerService.updateLayerRenderList();
-
-        _this3.layerService.renderLayers();
+        _this3.layerService.reRender();
       });
       this.layer.buildLayerModel({
         moduleName: 'wind',
@@ -162,7 +160,9 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
         depth: {
           enable: false
         },
-        blend: this.getBlend()
+        stencil: getMask(mask, maskInside),
+        blend: this.getBlend(),
+        pick: false
       }).then(function (model) {
         _this3.colorModel = model;
         callbackModel([model]);
@@ -225,7 +225,7 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
             type: gl.FLOAT
           },
           size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
+          update: function update(feature, featureIdx, vertex) {
             return [vertex[3], vertex[4]];
           }
         }
@@ -291,7 +291,7 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
         var _this$wind$draw = this.wind.draw(),
             d = _this$wind$draw.d,
             w = _this$wind$draw.w,
-            h = _this$wind$draw.h; // TODO: 恢复 L7 渲染流程中 gl 状态
+            h = _this$wind$draw.h; // 恢复 L7 渲染流程中 gl 状态
 
 
         this.rendererService.setBaseState();

package/es/wind/shaders/wind_vert.glsl

@@ -8,7 +8,7 @@ varying vec2 v_texCoord;
 void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
-   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   
    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
       gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
    } else {

package/lib/Geometry/index.js

@@ -71,7 +71,9 @@ var GeometryLayer = /*#__PURE__*/function (_BaseLayer) {
       this.layerModel.initModels(function (models) {
         _this2.models = models;
 
-        _this2.renderLayers();
+        _this2.emit('modelLoaded', null);
+
+        _this2.layerService.throttleRenderLayers();
       });
     }
   }, {
@@ -80,7 +82,9 @@ var GeometryLayer = /*#__PURE__*/function (_BaseLayer) {
       var _this3 = this;
 
       this.layerModel.buildModels(function (models) {
-        return _this3.models = models;
+        _this3.models = models;
+
+        _this3.emit('modelLoaded', null);
       });
     }
   }, {

package/lib/Geometry/models/billboard.js

@@ -181,8 +181,7 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
           wrapS: _l7Core.gl.CLAMP_TO_EDGE,
           wrapT: _l7Core.gl.CLAMP_TO_EDGE
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
+        this.layerService.reRender();
       }
     }
   }, {
@@ -207,7 +206,6 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
         descriptor: {
           name: 'a_Extrude',
           buffer: {
-            // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],
             type: _l7Core.gl.FLOAT
@@ -219,21 +217,19 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
             return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
           }
         }
-      }); // point layer size;
-
+      });
       this.styleAttributeService.registerStyleAttribute({
         name: 'uv',
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
           buffer: {
-            // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],
             type: _l7Core.gl.FLOAT
           },
           size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
+          update: function update(feature, featureIdx, vertex) {
             return [vertex[2], vertex[3]];
           }
         }

package/lib/Geometry/models/plane.js

@@ -281,9 +281,7 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
             wrapT: _l7Core.gl.CLAMP_TO_EDGE
           });
 
-          _this3.layerService.updateLayerRenderList();
-
-          _this3.layerService.renderLayers();
+          _this3.layerService.reRender();
         };
 
         img.src = mapTexture;
@@ -318,10 +316,10 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
       var gridX1 = gridX + 1;
       var gridY1 = gridY + 1;
       var widthStep = imgWidth / gridX;
-      var heihgtStep = imgHeight / gridY;
+      var heightStep = imgHeight / gridY;
 
       for (var iy = 0; iy < gridY1; iy++) {
-        var imgIndexY = Math.floor(iy * heihgtStep);
+        var imgIndexY = Math.floor(iy * heightStep);
         var imgLen = imgIndexY * imgWidth;
 
         for (var ix = 0; ix < gridX1; ix++) {
@@ -344,7 +342,7 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
         };
       });
       this.layer.updateModelData(modelData);
-      this.layerService.renderLayers();
+      this.layerService.throttleRenderLayers();
     }
     /**
      * load terrain texture & offset attribute z
@@ -423,7 +421,7 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
             type: _l7Core.gl.FLOAT
           },
           size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
+          update: function update(feature, featureIdx, vertex) {
             return [vertex[3], vertex[4]];
           }
         }

package/lib/Geometry/models/sprite.js

@@ -67,8 +67,7 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
           _ref$spriteBottom = _ref.spriteBottom,
           spriteBottom = _ref$spriteBottom === void 0 ? -100000 : _ref$spriteBottom;
 
-      var updateZ = _this.spriteUpdate; // const bottomZ = -100000;
-
+      var updateZ = _this.spriteUpdate;
       var bottomZ = spriteBottom;
       var topZ = _this.spriteTop;
 
@@ -96,7 +95,7 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateModel", function () {
       // @ts-ignore
-      var attributes = _this.layer.createAttrubutes({
+      var attributes = _this.layer.createAttributes({
         triangulation: _this.planeGeometryUpdateTriangulation
       });
 
@@ -104,7 +103,7 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
         m.updateAttributes(attributes);
       });
 
-      _this.layer.renderLayers();
+      _this.layerService.throttleRenderLayers();
 
       _this.timer = requestAnimationFrame(_this.updateModel);
     });
@@ -280,9 +279,7 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
             wrapT: _l7Core.gl.CLAMP_TO_EDGE
           });
 
-          _this4.layerService.updateLayerRenderList();
-
-          _this4.layerService.renderLayers();
+          _this4.layerService.reRender();
         };
 
         img.src = mapTexture;

package/lib/canvas/index.js

@@ -45,6 +45,7 @@ var CanvasLayer = /*#__PURE__*/function (_BaseLayer) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "type", 'CanvasLayer');
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "forceRender", true);
     return _this;
   }
 
@@ -58,7 +59,9 @@ var CanvasLayer = /*#__PURE__*/function (_BaseLayer) {
       this.layerModel.initModels(function (models) {
         _this2.models = models;
 
-        _this2.renderLayers();
+        _this2.emit('modelLoaded', null);
+
+        _this2.layerService.throttleRenderLayers();
       });
     }
   }, {
@@ -67,8 +70,40 @@ var CanvasLayer = /*#__PURE__*/function (_BaseLayer) {
       var _this3 = this;
 
       this.layerModel.buildModels(function (models) {
-        return _this3.models = models;
+        _this3.models = models;
+
+        _this3.emit('modelLoaded', null);
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this$layerModel;
+
+      // 清除画布
+      this.layerModel.clearCanvas && ((_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 ? void 0 : _this$layerModel.clearCanvas());
+      this.updateLayerConfig({
+        visible: false
+      });
+      this.reRender();
+      return this;
+    }
+  }, {
+    key: "renderModels",
+    value: function renderModels() {
+      var _this$layerModel2,
+          _this4 = this;
+
+      if (this !== null && this !== void 0 && (_this$layerModel2 = this.layerModel) !== null && _this$layerModel2 !== void 0 && _this$layerModel2.renderUpdate) {
+        this.layerModel.renderUpdate();
+      }
+
+      this.models.forEach(function (model) {
+        model.draw({
+          uniforms: _this4.layerModel.getUninforms()
+        }, false);
       });
+      return this;
     }
   }, {
     key: "getConfigSchema",

package/lib/citybuliding/building.js

@@ -57,7 +57,9 @@ var CityBuildingLayer = /*#__PURE__*/function (_BaseLayer) {
       this.layerModel.initModels(function (models) {
         _this2.models = models;
 
-        _this2.renderLayers();
+        _this2.emit('modelLoaded', null);
+
+        _this2.layerService.throttleRenderLayers();
       });
     }
   }, {
@@ -66,7 +68,9 @@ var CityBuildingLayer = /*#__PURE__*/function (_BaseLayer) {
       var _this3 = this;
 
       this.layerModel.buildModels(function (models) {
-        return _this3.models = models;
+        _this3.models = models;
+
+        _this3.emit('modelLoaded', null);
       });
     }
   }, {

package/lib/citybuliding/models/build.js

@@ -170,7 +170,7 @@ var CityBuildModel = /*#__PURE__*/function (_BaseModel) {
             type: _l7Core.gl.FLOAT
           },
           size: 1,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
+          update: function update(feature) {
             var _feature$size = feature.size,
                 size = _feature$size === void 0 ? 10 : _feature$size;
             return Array.isArray(size) ? [size[0]] : [size];
@@ -189,8 +189,7 @@ var CityBuildModel = /*#__PURE__*/function (_BaseModel) {
             type: _l7Core.gl.FLOAT
           },
           size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
-            var size = feature.size;
+          update: function update(feature, featureIdx, vertex) {
             return [vertex[3], vertex[4]];
           }
         }