@antv/l7-layers 2.8.32 → 2.8.35

package/lib/Geometry/models/billboard.js

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var planeFrag = "\nuniform sampler2D u_texture;\nuniform float u_opacity;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\n\n#pragma include \"picking\"\nvoid main() {\n  gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));\n  gl_FragColor.a *= u_opacity;\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+var planeVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform float u_raisingHeight: 0.0;\nuniform mat4 u_Mvp;\nuniform float u_opacity;\nuniform vec2 u_size: [1.0, 1.0];\nuniform mat2 u_RotateMatrix;\n\nattribute vec3 a_Extrude;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nattribute vec3 a_Color;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\nvoid main() {\n   vec3 extrude = a_Extrude;\n   v_Color = a_Color;\n   v_uv = a_Uv;\n\n   float raiseHeight = u_raisingHeight;\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n      raiseHeight = u_raisingHeight * mapboxZoomScale;\n   }\n\n   // \u8BA1\u7B97\u7ECF\u7EAC\u5EA6\u70B9\u4F4D\u5750\u6807\n   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n   // \u8BA1\u7B97\u7ED5 z \u8F74\u65CB\u8F6C\u540E\u7684\u504F\u79FB\n   vec2 offsetXY = project_pixel(u_RotateMatrix * vec2(extrude.x * u_size.x, 0.0));\n   // \u7ED5 z \u8F74\u65CB\u8F6C\n   float x = project_pos.x + offsetXY.x;\n   float y = project_pos.y + offsetXY.y;\n   // z \u8F74\u4E0D\u53C2\u4E0E\u65CB\u8F6C\n   float z = project_pixel(extrude.y * u_size.y + raiseHeight);\n\n\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      // gl_Position = u_Mvp * (vec4(project_pos.xy, a_Position.z, 1.0));\n      gl_Position = u_Mvp * (vec4(x, y, z, 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(x , y, z , 1.0));\n   }\n\n   setPickingColor(a_PickingColor);\n}\n";
+
+var BillBoardModel = function (_BaseModel) {
+  (0, _inherits2.default)(BillBoardModel, _BaseModel);
+
+  var _super = _createSuper(BillBoardModel);
+
+  function BillBoardModel() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BillBoardModel);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "texture", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "terrainImage", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "terrainImageLoaded", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mapTexture", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "radian", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "planeGeometryTriangulation", function () {
+      var _ref = _this.layer.getLayerConfig(),
+          _ref$center = _ref.center,
+          center = _ref$center === void 0 ? [120, 30] : _ref$center;
+
+      return {
+        size: 4,
+        indices: [0, 1, 2, 2, 3, 0],
+        vertices: [].concat((0, _toConsumableArray2.default)(center), [1, 1], (0, _toConsumableArray2.default)(center), [0, 1], (0, _toConsumableArray2.default)(center), [0, 0], (0, _toConsumableArray2.default)(center), [1, 0])
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(BillBoardModel, [{
+    key: "getUninforms",
+    value: function getUninforms() {
+      var _ref2 = this.layer.getLayerConfig(),
+          opacity = _ref2.opacity,
+          _ref2$width = _ref2.width,
+          width = _ref2$width === void 0 ? 1 : _ref2$width,
+          _ref2$height = _ref2.height,
+          height = _ref2$height === void 0 ? 1 : _ref2$height,
+          _ref2$raisingHeight = _ref2.raisingHeight,
+          raisingHeight = _ref2$raisingHeight === void 0 ? 0 : _ref2$raisingHeight;
+
+      var rotateFlag = 1;
+
+      if (this.mapService.version === 'GAODE2.x' || this.mapService.version === 'GAODE1.x') {
+        rotateFlag = -1;
+      }
+
+      this.radian = rotateFlag * Math.PI * (this.mapService.getRotation() % 360) / 180;
+      return {
+        u_raisingHeight: Number(raisingHeight),
+        u_RotateMatrix: new Float32Array([Math.cos(this.radian), Math.sin(this.radian), -Math.sin(this.radian), Math.cos(this.radian)]),
+        u_opacity: opacity || 1,
+        u_texture: this.texture,
+        u_size: [width, height]
+      };
+    }
+  }, {
+    key: "clearModels",
+    value: function clearModels() {
+      var _this$texture;
+
+      this.terrainImage = null;
+      (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
+    }
+  }, {
+    key: "initModels",
+    value: function initModels() {
+      var _ref3 = this.layer.getLayerConfig(),
+          _ref3$mask = _ref3.mask,
+          mask = _ref3$mask === void 0 ? false : _ref3$mask,
+          _ref3$maskInside = _ref3.maskInside,
+          maskInside = _ref3$maskInside === void 0 ? true : _ref3$maskInside,
+          mapTexture = _ref3.mapTexture,
+          drawCanvas = _ref3.drawCanvas;
+
+      this.mapTexture = mapTexture;
+      var createTexture2D = this.rendererService.createTexture2D;
+      this.texture = createTexture2D({
+        height: 0,
+        width: 0
+      });
+
+      if (drawCanvas) {
+        this.updateTexture(drawCanvas);
+      }
+
+      return [this.layer.buildLayerModel({
+        moduleName: 'geometry_billboard',
+        vertexShader: planeVert,
+        fragmentShader: planeFrag,
+        triangulation: this.planeGeometryTriangulation,
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: true
+        },
+        blend: this.getBlend(),
+        stencil: (0, _l7Utils.getMask)(mask, maskInside)
+      })];
+    }
+  }, {
+    key: "buildModels",
+    value: function buildModels() {
+      return this.initModels();
+    }
+  }, {
+    key: "updateTexture",
+    value: function updateTexture(drawCanvas) {
+      var createTexture2D = this.rendererService.createTexture2D;
+
+      var _ref4 = this.layer.getLayerConfig(),
+          _ref4$canvasWidth = _ref4.canvasWidth,
+          canvasWidth = _ref4$canvasWidth === void 0 ? 1 : _ref4$canvasWidth,
+          _ref4$canvasHeight = _ref4.canvasHeight,
+          canvasHeight = _ref4$canvasHeight === void 0 ? 1 : _ref4$canvasHeight;
+
+      var canvas = document.createElement('canvas');
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+      var ctx = canvas.getContext('2d');
+
+      if (ctx) {
+        drawCanvas(canvas);
+        this.texture = createTexture2D({
+          data: canvas,
+          width: canvas.width,
+          height: canvas.height,
+          wrapS: _l7Core.gl.CLAMP_TO_EDGE,
+          wrapT: _l7Core.gl.CLAMP_TO_EDGE
+        });
+        this.layerService.updateLayerRenderList();
+        this.layerService.renderLayers();
+      }
+    }
+  }, {
+    key: "getConfigSchema",
+    value: function getConfigSchema() {
+      return {
+        properties: {
+          opacity: {
+            type: 'number',
+            minimum: 0,
+            maximum: 1
+          }
+        }
+      };
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes() {
+      this.styleAttributeService.registerStyleAttribute({
+        name: 'extrude',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Extrude',
+          buffer: {
+            usage: _l7Core.gl.DYNAMIC_DRAW,
+            data: [],
+            type: _l7Core.gl.FLOAT
+          },
+          size: 3,
+          update: function update(feature, featureIdx, vertex, attributeIdx) {
+            var extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
+            var extrudeIndex = attributeIdx % 4 * 3;
+            return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
+          }
+        }
+      });
+      this.styleAttributeService.registerStyleAttribute({
+        name: 'uv',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Uv',
+          buffer: {
+            usage: _l7Core.gl.DYNAMIC_DRAW,
+            data: [],
+            type: _l7Core.gl.FLOAT
+          },
+          size: 2,
+          update: function update(feature, featureIdx, vertex, attributeIdx) {
+            return [vertex[2], vertex[3]];
+          }
+        }
+      });
+    }
+  }]);
+  return BillBoardModel;
+}(_BaseModel2.default);
+
+exports.default = BillBoardModel;
+//# sourceMappingURL=billboard.js.map

package/lib/Geometry/models/billboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Geometry/models/billboard.ts"],"names":["BillBoardModel","layer","getLayerConfig","center","size","indices","vertices","opacity","width","height","raisingHeight","rotateFlag","mapService","version","radian","Math","PI","getRotation","u_raisingHeight","Number","u_RotateMatrix","Float32Array","cos","sin","u_opacity","u_texture","texture","u_size","terrainImage","destroy","mask","maskInside","mapTexture","drawCanvas","createTexture2D","rendererService","updateTexture","buildLayerModel","moduleName","vertexShader","planeVert","fragmentShader","planeFrag","triangulation","planeGeometryTriangulation","primitive","gl","TRIANGLES","depth","enable","blend","getBlend","stencil","initModels","canvasWidth","canvasHeight","canvas","document","createElement","ctx","getContext","data","wrapS","CLAMP_TO_EDGE","wrapT","layerService","updateLayerRenderList","renderLayers","properties","type","minimum","maximum","styleAttributeService","registerStyleAttribute","name","AttributeType","Attribute","descriptor","buffer","usage","DYNAMIC_DRAW","FLOAT","update","feature","featureIdx","vertex","attributeIdx","extrude","extrudeIndex","BaseModel"],"mappings":"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","sourcesContent":["import {\n  AttributeType,\n  gl,\n  IAttrubuteAndElements,\n  IEncodeFeature,\n  IModelUniform,\n  ITexture2D,\n} from '@antv/l7-core';\nimport { getMask, isMini } from '@antv/l7-utils';\nimport BaseModel from '../../core/BaseModel';\nimport { IGeometryLayerStyleOptions } from '../../core/interface';\nimport planeFrag from '../shaders/billboard_frag.glsl';\nimport planeVert from '../shaders/billboard_vert.glsl';\n\nexport default class BillBoardModel extends BaseModel {\n  protected texture: ITexture2D;\n  protected terrainImage: HTMLImageElement;\n  protected terrainImageLoaded: boolean = false;\n  protected mapTexture: string | undefined;\n  private radian: number = 0; // 旋转的弧度\n\n  public planeGeometryTriangulation = () => {\n    const {\n      center = [120, 30],\n    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;\n    return {\n      size: 4,\n      indices: [0, 1, 2, 2, 3, 0],\n      vertices: [\n        ...center,\n        ...[1, 1],\n        ...center,\n        ...[0, 1],\n        ...center,\n        ...[0, 0],\n        ...center,\n        ...[1, 0],\n      ],\n    };\n  };\n\n  public getUninforms(): IModelUniform {\n    const {\n      opacity,\n      width = 1,\n      height = 1,\n      raisingHeight = 0,\n    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;\n\n    /**\n     *               rotateFlag\n     * L7MAP            1\n     * MAPBOX           1\n     * GAODE2.x         -1\n     * GAODE1.x         -1\n     */\n    let rotateFlag = 1;\n    if (\n      this.mapService.version === 'GAODE2.x' ||\n      this.mapService.version === 'GAODE1.x'\n    ) {\n      rotateFlag = -1;\n    }\n    // 控制图标的旋转角度（绕 Z 轴旋转）\n    this.radian =\n      (rotateFlag * Math.PI * (this.mapService.getRotation() % 360)) / 180;\n\n    return {\n      u_raisingHeight: Number(raisingHeight),\n      u_RotateMatrix: new Float32Array([\n        // z\n        Math.cos(this.radian),\n        Math.sin(this.radian),\n        -Math.sin(this.radian),\n        Math.cos(this.radian),\n      ]),\n      u_opacity: opacity || 1,\n      u_texture: this.texture,\n      u_size: [width, height],\n    };\n  }\n\n  public clearModels(): void {\n    // @ts-ignore\n    this.terrainImage = null;\n    this.texture?.destroy();\n  }\n\n  public initModels() {\n    const {\n      mask = false,\n      maskInside = true,\n      mapTexture,\n      drawCanvas,\n    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;\n    this.mapTexture = mapTexture;\n\n    const { createTexture2D } = this.rendererService;\n    this.texture = createTexture2D({\n      height: 0,\n      width: 0,\n    });\n\n    if (drawCanvas) {\n      this.updateTexture(drawCanvas);\n    }\n\n    return [\n      this.layer.buildLayerModel({\n        moduleName: 'geometry_billboard',\n        vertexShader: planeVert,\n        fragmentShader: planeFrag,\n        triangulation: this.planeGeometryTriangulation,\n        primitive: gl.TRIANGLES,\n        // primitive: gl.LINES,\n        depth: { enable: true },\n        blend: this.getBlend(),\n        stencil: getMask(mask, maskInside),\n      }),\n    ];\n  }\n\n  public buildModels() {\n    return this.initModels();\n  }\n\n  public updateTexture(drawCanvas: (canvas: HTMLCanvasElement) => void): void {\n    const { createTexture2D } = this.rendererService;\n\n    const {\n      canvasWidth = 1,\n      canvasHeight = 1,\n    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;\n    const canvas = document.createElement('canvas');\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const ctx = canvas.getContext('2d');\n    if (ctx) {\n      drawCanvas(canvas);\n      this.texture = createTexture2D({\n        data: canvas,\n        width: canvas.width,\n        height: canvas.height,\n        wrapS: gl.CLAMP_TO_EDGE,\n        wrapT: gl.CLAMP_TO_EDGE,\n      });\n      this.layerService.updateLayerRenderList();\n      this.layerService.renderLayers();\n    }\n  }\n\n  protected getConfigSchema() {\n    return {\n      properties: {\n        opacity: {\n          type: 'number',\n          minimum: 0,\n          maximum: 1,\n        },\n      },\n    };\n  }\n\n  protected registerBuiltinAttributes() {\n    this.styleAttributeService.registerStyleAttribute({\n      name: 'extrude',\n      type: AttributeType.Attribute,\n      descriptor: {\n        name: 'a_Extrude',\n        buffer: {\n          // give the WebGL driver a hint that this buffer may change\n          usage: gl.DYNAMIC_DRAW,\n          data: [],\n          type: gl.FLOAT,\n        },\n        size: 3,\n        update: (\n          feature: IEncodeFeature,\n          featureIdx: number,\n          vertex: number[],\n          attributeIdx: number,\n        ) => {\n          const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];\n          const extrudeIndex = (attributeIdx % 4) * 3;\n          return [\n            extrude[extrudeIndex],\n            extrude[extrudeIndex + 1],\n            extrude[extrudeIndex + 2],\n          ];\n        },\n      },\n    });\n    // point layer size;\n    this.styleAttributeService.registerStyleAttribute({\n      name: 'uv',\n      type: AttributeType.Attribute,\n      descriptor: {\n        name: 'a_Uv',\n        buffer: {\n          // give the WebGL driver a hint that this buffer may change\n          usage: gl.DYNAMIC_DRAW,\n          data: [],\n          type: gl.FLOAT,\n        },\n        size: 2,\n        update: (\n          feature: IEncodeFeature,\n          featureIdx: number,\n          vertex: number[],\n          attributeIdx: number,\n        ) => {\n          return [vertex[2], vertex[3]];\n        },\n      },\n    });\n  }\n}\n"],"file":"billboard.js"}

package/lib/Geometry/models/index.js

@@ -7,13 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _billboard = _interopRequireDefault(require("./billboard"));
+
 var _plane = _interopRequireDefault(require("./plane"));
 
 var _sprite = _interopRequireDefault(require("./sprite"));
 
 var GeometryModels = {
   plane: _plane.default,
-  sprite: _sprite.default
+  sprite: _sprite.default,
+  billboard: _billboard.default
 };
 var _default = GeometryModels;
 exports.default = _default;

package/lib/Geometry/models/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Geometry/models/index.ts"],"names":["GeometryModels","plane","PlaneModel","sprite","SpriteModel"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA,IAAMA,cAAmD,GAAG;AAC1DC,EAAAA,KAAK,EAAEC,cADmD;AAE1DC,EAAAA,MAAM,EAAEC;AAFkD,CAA5D;eAIeJ,c","sourcesContent":["import PlaneModel from './plane';\nimport SpriteModel from './sprite';\nexport type GeometryModelType = 'plane' | 'sprite';\n\nconst GeometryModels: { [key in GeometryModelType]: any } = {\n  plane: PlaneModel,\n  sprite: SpriteModel,\n};\nexport default GeometryModels;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Geometry/models/index.ts"],"names":["GeometryModels","plane","PlaneModel","sprite","SpriteModel","billboard","BillBoardModel"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAGA,IAAMA,cAAmD,GAAG;AAC1DC,EAAAA,KAAK,EAAEC,cADmD;AAE1DC,EAAAA,MAAM,EAAEC,eAFkD;AAG1DC,EAAAA,SAAS,EAAEC;AAH+C,CAA5D;eAKeN,c","sourcesContent":["import BillBoardModel from './billboard';\nimport PlaneModel from './plane';\nimport SpriteModel from './sprite';\nexport type GeometryModelType = 'plane' | 'sprite' | 'billboard';\n\nconst GeometryModels: { [key in GeometryModelType]: any } = {\n  plane: PlaneModel,\n  sprite: SpriteModel,\n  billboard: BillBoardModel,\n};\nexport default GeometryModels;\n"],"file":"index.js"}

package/lib/Geometry/models/plane.js

@@ -56,9 +56,9 @@ var PlaneModel = function (_BaseModel) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "texture", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "terrainImage", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "terrainImageLoaded", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mapTexture", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "positions", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "indices", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "planeGeometryTriangulation", function () {
       var _this2;
 
@@ -79,11 +79,8 @@ var PlaneModel = function (_BaseModel) {
           indices = _this$initPlane.indices,
           positions = _this$initPlane.positions;
 
-      _this.positions = positions;
-      _this.indices = indices;
-
       if (terrainTexture) {
-        _this.loadTerrainTexture();
+        _this.loadTerrainTexture(positions, indices);
       }
 
       return {
@@ -92,13 +89,6 @@ var PlaneModel = function (_BaseModel) {
         size: 5
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "planeGeometryUpdateTriangulation", function () {
-      return {
-        vertices: _this.positions,
-        indices: _this.indices,
-        size: 5
-      };
-    });
     return _this;
   }
 
@@ -132,9 +122,9 @@ var PlaneModel = function (_BaseModel) {
             var _ref2 = this.mapService.lngLatToCoord([x + lng, -y + lat]),
                 _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
                 a = _ref3[0],
-                b = _ref3[1];
+                _b = _ref3[1];
 
-            positions.push(a, b, 0);
+            positions.push(a, _b, 0);
           } else {
             positions.push(x + lng, -y + lat, 0);
           }
@@ -148,12 +138,12 @@ var PlaneModel = function (_BaseModel) {
         for (var _ix = 0; _ix < gridX; _ix++) {
           var _a = _ix + gridX1 * _iy;
 
-          var _b = _ix + gridX1 * (_iy + 1);
+          var _b2 = _ix + gridX1 * (_iy + 1);
 
           var c = _ix + 1 + gridX1 * (_iy + 1);
           var d = _ix + 1 + gridX1 * _iy;
-          indices.push(_a, _b, d);
-          indices.push(_b, c, d);
+          indices.push(_a, _b2, d);
+          indices.push(_b2, c, d);
         }
       }
 
@@ -192,6 +182,7 @@ var PlaneModel = function (_BaseModel) {
     value: function clearModels() {
       var _this$texture2;
 
+      this.terrainImage = null;
       (_this$texture2 = this.texture) === null || _this$texture2 === void 0 ? void 0 : _this$texture2.destroy();
     }
   }, {
@@ -228,101 +219,42 @@ var PlaneModel = function (_BaseModel) {
         }
       })];
     }
-  }, {
-    key: "getImageData",
-    value: function getImageData(img) {
-      var canvas = document.createElement('canvas');
-      var ctx = canvas.getContext('2d');
-      var width = img.width,
-          height = img.height;
-      canvas.width = width;
-      canvas.height = height;
-      ctx.drawImage(img, 0, 0, width, height);
-      var imageData = ctx.getImageData(0, 0, width, height);
-      return imageData;
-    }
-  }, {
-    key: "loadTerrainTexture",
-    value: function loadTerrainTexture() {
-      var _this3 = this;
-
-      var _ref6 = this.layer.getLayerConfig(),
-          _ref6$mask = _ref6.mask,
-          mask = _ref6$mask === void 0 ? false : _ref6$mask,
-          _ref6$maskInside = _ref6.maskInside,
-          maskInside = _ref6$maskInside === void 0 ? true : _ref6$maskInside,
-          _ref6$widthSegments = _ref6.widthSegments,
-          widthSegments = _ref6$widthSegments === void 0 ? 1 : _ref6$widthSegments,
-          _ref6$heightSegments = _ref6.heightSegments,
-          heightSegments = _ref6$heightSegments === void 0 ? 1 : _ref6$heightSegments,
-          terrainTexture = _ref6.terrainTexture,
-          _ref6$rgb2height = _ref6.rgb2height,
-          rgb2height = _ref6$rgb2height === void 0 ? function (r, g, b) {
-        return r + g + b;
-      } : _ref6$rgb2height;
-
-      var terrainImage = new Image();
-      terrainImage.crossOrigin = 'anonymous';
-
-      terrainImage.onload = function () {
-        var imgWidth = terrainImage.width;
-        var imgHeight = terrainImage.height;
-
-        var imageData = _this3.getImageData(terrainImage).data;
-
-        var gridX = Math.floor(widthSegments);
-        var gridY = Math.floor(heightSegments);
-        var gridX1 = gridX + 1;
-        var gridY1 = gridY + 1;
-        var widthStep = imgWidth / gridX;
-        var heihgtStep = imgHeight / gridY;
-
-        for (var iy = 0; iy < gridY1; iy++) {
-          var imgIndexY = Math.floor(iy * heihgtStep);
-          var imgLen = imgIndexY * imgWidth;
-
-          for (var ix = 0; ix < gridX1; ix++) {
-            var imgIndexX = Math.floor(ix * widthStep);
-            var imgDataIndex = (imgLen + imgIndexX) * 4;
-            var r = imageData[imgDataIndex];
-            var g = imageData[imgDataIndex + 1];
-            var b = imageData[imgDataIndex + 2];
-            var z = (iy * gridX1 + ix) * 5 + 2;
-            _this3.positions[z] = rgb2height(r, g, b);
-          }
-        }
-
-        _this3.layer.models = [_this3.layer.buildLayerModel({
-          moduleName: 'geometry_plane',
-          vertexShader: planeVert,
-          fragmentShader: planeFrag,
-          triangulation: _this3.planeGeometryUpdateTriangulation,
-          primitive: _l7Core.gl.TRIANGLES,
-          depth: {
-            enable: true
-          },
-          blend: _this3.getBlend(),
-          stencil: (0, _l7Utils.getMask)(mask, maskInside),
-          cull: {
-            enable: true,
-            face: _l7Core.gl.BACK
-          }
-        })];
-
-        _this3.layerService.renderLayers();
-      };
-
-      terrainImage.src = terrainTexture;
-    }
   }, {
     key: "buildModels",
     value: function buildModels() {
       return this.initModels();
     }
+  }, {
+    key: "createModelData",
+    value: function createModelData(options) {
+      if (options) {
+        var _ref6 = this.layer.getLayerConfig(),
+            oldwidthSegments = _ref6.widthSegments,
+            oldheightSegments = _ref6.heightSegments,
+            oldwidth = _ref6.width,
+            oldheight = _ref6.height;
+
+        var _ref7 = options,
+            widthSegments = _ref7.widthSegments,
+            heightSegments = _ref7.heightSegments,
+            width = _ref7.width,
+            height = _ref7.height;
+        this.layer.style({
+          widthSegments: widthSegments !== undefined ? widthSegments : oldwidthSegments,
+          heightSegments: heightSegments !== undefined ? heightSegments : oldheightSegments,
+          width: width !== undefined ? width : oldwidth,
+          height: height !== undefined ? height : oldheight
+        });
+      }
+
+      var oldFeatures = this.layer.getEncodedData();
+      var res = this.styleAttributeService.createAttributesAndIndices(oldFeatures, this.planeGeometryTriangulation);
+      return res;
+    }
   }, {
     key: "updateTexture",
     value: function updateTexture(mapTexture) {
-      var _this4 = this;
+      var _this3 = this;
 
       var createTexture2D = this.rendererService.createTexture2D;
 
@@ -331,7 +263,7 @@ var PlaneModel = function (_BaseModel) {
         img.crossOrigin = 'anonymous';
 
         img.onload = function () {
-          _this4.texture = createTexture2D({
+          _this3.texture = createTexture2D({
             data: img,
             width: img.width,
             height: img.height,
@@ -339,9 +271,9 @@ var PlaneModel = function (_BaseModel) {
             wrapT: _l7Core.gl.CLAMP_TO_EDGE
           });
 
-          _this4.layerService.updateLayerRenderList();
+          _this3.layerService.updateLayerRenderList();
 
-          _this4.layerService.renderLayers();
+          _this3.layerService.renderLayers();
         };
 
         img.src = mapTexture;
@@ -352,6 +284,99 @@ var PlaneModel = function (_BaseModel) {
         });
       }
     }
+  }, {
+    key: "getImageData",
+    value: function getImageData(img) {
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      var width = img.width,
+          height = img.height;
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      var imageData = ctx.getImageData(0, 0, width, height);
+      return imageData;
+    }
+  }, {
+    key: "translateVertex",
+    value: function translateVertex(positions, indices, image, widthSegments, heightSegments, rgb2height) {
+      var imgWidth = image.width;
+      var imgHeight = image.height;
+      var imageData = this.getImageData(image).data;
+      var gridX = Math.floor(widthSegments);
+      var gridY = Math.floor(heightSegments);
+      var gridX1 = gridX + 1;
+      var gridY1 = gridY + 1;
+      var widthStep = imgWidth / gridX;
+      var heihgtStep = imgHeight / gridY;
+
+      for (var iy = 0; iy < gridY1; iy++) {
+        var imgIndexY = Math.floor(iy * heihgtStep);
+        var imgLen = imgIndexY * imgWidth;
+
+        for (var ix = 0; ix < gridX1; ix++) {
+          var imgIndexX = Math.floor(ix * widthStep);
+          var imgDataIndex = (imgLen + imgIndexX) * 4;
+          var _r = imageData[imgDataIndex];
+          var _g = imageData[imgDataIndex + 1];
+          var _b3 = imageData[imgDataIndex + 2];
+          var z = (iy * gridX1 + ix) * 5 + 2;
+          positions[z] = rgb2height(_r, _g, _b3);
+        }
+      }
+
+      var oldFeatures = this.layer.getEncodedData();
+      var modelData = this.styleAttributeService.createAttributesAndIndices(oldFeatures, function () {
+        return {
+          vertices: positions,
+          indices: indices,
+          size: 5
+        };
+      });
+      this.layer.updateModelData(modelData);
+      this.layerService.renderLayers();
+    }
+  }, {
+    key: "loadTerrainTexture",
+    value: function loadTerrainTexture(positions, indices) {
+      var _this4 = this;
+
+      var _ref8 = this.layer.getLayerConfig(),
+          _ref8$widthSegments = _ref8.widthSegments,
+          widthSegments = _ref8$widthSegments === void 0 ? 1 : _ref8$widthSegments,
+          _ref8$heightSegments = _ref8.heightSegments,
+          heightSegments = _ref8$heightSegments === void 0 ? 1 : _ref8$heightSegments,
+          terrainTexture = _ref8.terrainTexture,
+          _ref8$rgb2height = _ref8.rgb2height,
+          rgb2height = _ref8$rgb2height === void 0 ? function (r, g, b) {
+        return r + g + b;
+      } : _ref8$rgb2height;
+
+      if (this.terrainImage) {
+        if (this.terrainImageLoaded) {
+          this.translateVertex(positions, indices, this.terrainImage, widthSegments, heightSegments, rgb2height);
+        } else {
+          this.terrainImage.onload = function () {
+            _this4.translateVertex(positions, indices, _this4.terrainImage, widthSegments, heightSegments, rgb2height);
+          };
+        }
+      } else {
+        var terrainImage = new Image();
+        this.terrainImage = terrainImage;
+        terrainImage.crossOrigin = 'anonymous';
+
+        terrainImage.onload = function () {
+          _this4.terrainImageLoaded = true;
+          setTimeout(function () {
+            return _this4.layer.emit('terrainImageLoaded', null);
+          });
+
+          _this4.translateVertex(positions, indices, terrainImage, widthSegments, heightSegments, rgb2height);
+        };
+
+        terrainImage.src = terrainTexture;
+      }
+    }
   }, {
     key: "getConfigSchema",
     value: function getConfigSchema() {