@antv/l7-layers 2.9.32-alpha.4 → 2.9.32-alpha.5

package/es/utils/layerData.js

@@ -1,6 +1,7 @@
 import { Version } from '@antv/l7-maps';
 import Source from '@antv/l7-source';
 import { isColor, normalize, rgb2arr } from '@antv/l7-utils';
+import { cloneDeep } from 'lodash';
 
 function getArrowPoints(p1, p2) {
   var dir = [p2[0] - p1[0], p2[1] - p1[1]];
@@ -9,11 +10,11 @@ function getArrowPoints(p1, p2) {
   return arrowPoint;
 }
 
-function adjustData2Amap2Coordinates(mappedData, mapService) {
-  var _this = this;
-
+function adjustData2Amap2Coordinates(mappedData, mapService, layer) {
   // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
   if (mappedData.length > 0 && mapService.version === Version['GAODE2.x']) {
+    var layerCenter = layer.coordCenter;
+
     if (typeof mappedData[0].coordinates[0] === 'number') {
       // 单个的点数据
       // @ts-ignore
@@ -25,8 +26,9 @@ function adjustData2Amap2Coordinates(mappedData, mapService) {
 
         d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
         // @ts-ignore
+        // d.coordinates = mapService.lngLatToCoord(d.coordinates);
 
-        d.coordinates = _this.mapService.lngLatToCoord(d.coordinates);
+        d.coordinates = mapService.lngLatToCoordByLayer(d.coordinates, layerCenter);
       });
     } else {
       // 连续的线、面数据
@@ -39,8 +41,9 @@ function adjustData2Amap2Coordinates(mappedData, mapService) {
 
         d.originCoordinates = cloneDeep(d.coordinates); // 为了兼容高德1.x 需要保存一份原始的经纬度坐标数据（许多上层逻辑依赖经纬度数据）
         // @ts-ignore
+        // d.coordinates = mapService.lngLatToCoords(d.coordinates);
 
-        d.coordinates = _this.mapService.lngLatToCoords(d.coordinates);
+        d.coordinates = mapService.lngLatToCoordsByLayer(d.coordinates, layerCenter);
       });
     }
   }
@@ -158,7 +161,7 @@ function mapping(attributes, data, fontService, mapService, minimumColor, layer)
     return encodeRecord;
   }); // 调整数据兼容 Amap2.0
 
-  adjustData2Amap2Coordinates(mappedData, mapService); // 调整数据兼容 SimpleCoordinates
+  adjustData2Amap2Coordinates(mappedData, mapService, layer); // 调整数据兼容 SimpleCoordinates
 
   adjustData2SimpleCoordinates(mappedData, mapService);
   return mappedData;

package/lib/core/BaseLayer.js

@@ -499,7 +499,7 @@ var BaseLayer = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.IGlobalConfigServi
   }, {
     key: "source",
     value: function source(data, options) {
-      if (data !== null && data !== void 0 && data.data) {
+      if ((data === null || data === void 0 ? void 0 : data.type) === 'source') {
         // 判断是否为source
         this.setSource(data);
         return this;
@@ -1044,6 +1044,15 @@ var BaseLayer = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.IGlobalConfigServi
 
 
       this.layerSource.on('sourceUpdate', function () {
+        if (_this8.coordCenter === undefined) {
+          var layerCenter = _this8.layerSource.center;
+          _this8.coordCenter = layerCenter;
+          _this8.mapService.setCoordCenter && _this8.mapService.setCoordCenter(layerCenter); // // @ts-ignore
+          // this.mapService.map.customCoords.setCenter(layerCenter);
+          // // @ts-ignore
+          // this.mapService.setCustomCoordCenter(layerCenter);
+        }
+
         _this8.sourceEvent();
       });
     }
@@ -1174,6 +1183,8 @@ var BaseLayer = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.IGlobalConfigServi
               return reject(err);
             });
           } else {
+            // console.log(this.encodedData[1].originCoordinates[0])
+            // console.log(this.encodedData[1].coordinates[0])
             var _this9$styleAttribute = _this9.styleAttributeService.createAttributesAndIndices(_this9.encodedData, triangulation, segmentNumber),
                 attributes = _this9$styleAttribute.attributes,
                 elements = _this9$styleAttribute.elements,
@@ -1377,14 +1388,20 @@ var BaseLayer = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.IGlobalConfigServi
   }, {
     key: "dispatchModelLoad",
     value: function dispatchModelLoad(models) {
+      var _this11 = this;
+
       this.models.forEach(function (model) {
         return model.destroy();
       });
       this.models = [];
       this.models = models;
       this.emit('modelLoaded', null);
-      this.modelLoaded = true;
-      this.layerService.throttleRenderLayers();
+      this.modelLoaded = true; // Tip: setTimeout 用于延迟绘制，可以让拖动图层时连续的 setData 更加平滑 - L7Draw
+
+      setTimeout(function () {
+        // Tip: 使用 renderLayers 而不是 throttleRenderLayers，让图层之间的 setData 更新绘制不存在延迟
+        _this11.layerService.renderLayers();
+      }, 32);
     }
   }, {
     key: "reRender",

package/lib/mask/index.js

@@ -27,6 +27,8 @@ var _BaseLayer2 = _interopRequireDefault(require("../core/BaseLayer"));
 
 var _models = _interopRequireDefault(require("./models"));
 
+var _utils = require("../tile/utils");
+
 var _l7Core = require("@antv/l7-core");
 
 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; } } }; }
@@ -159,6 +161,12 @@ var MaskLayer = /*#__PURE__*/function (_BaseLayer) {
   }, {
     key: "getModelType",
     value: function getModelType() {
+      var parserType = this.layerSource.getParserType();
+
+      if ((0, _utils.isVectorTile)(parserType)) {
+        return 'vectorMask';
+      }
+
       return 'fill';
     }
   }]);

package/lib/mask/models/index.js

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _tileModel = _interopRequireDefault(require("../../tile/models/tileModel"));
+
 var _fill = _interopRequireDefault(require("./fill"));
 
 var MaskModels = {
-  fill: _fill.default
+  fill: _fill.default,
+  vectorMask: _tileModel.default
 };
 var _default = MaskModels;
 exports.default = _default;

package/lib/plugins/DataMappingPlugin.js

@@ -269,7 +269,7 @@ var DataMappingPlugin = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inver
 
       // 根据地图的类型判断是否需要对点位数据进行处理, 若是高德2.0则需要对坐标进行相对偏移
       if (mappedData.length > 0 && this.mapService.version === _l7Maps.Version['GAODE2.x']) {
-        var layerCenter = this.getLayerCenter(layer);
+        var layerCenter = layer.coordCenter || layer.getSource().center;
 
         if (typeof mappedData[0].coordinates[0] === 'number') {
           // 单个的点数据
@@ -288,7 +288,6 @@ var DataMappingPlugin = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inver
           });
         } else {
           // 连续的线、面数据
-          // @ts-ignore
           mappedData // TODO: 避免经纬度被重复计算导致坐标位置偏移
           .filter(function (d) {
             return !d.originCoordinates;
@@ -318,12 +317,6 @@ var DataMappingPlugin = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inver
         });
       }
     }
-  }, {
-    key: "getLayerCenter",
-    value: function getLayerCenter(layer) {
-      var source = layer.getSource();
-      return source.center;
-    }
   }, {
     key: "unProjectCoordinates",
     value: function unProjectCoordinates(coordinates) {

package/lib/plugins/ShaderUniformPlugin.js

@@ -62,13 +62,7 @@ _dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPE
         _this.coordinateSystemService.refresh(offset);
 
         if (version === 'GAODE2.x') {
-          var layerCenter = _this.getLayerCenter(layer); // @ts-ignore
-
-
-          _this.mapService.map.customCoords.setCenter(layerCenter); // @ts-ignore
-
-
-          _this.mapService.setCustomCoordCenter(layerCenter); // @ts-ignore
+          _this.setLayerCenter(layer); // @ts-ignore
 
 
           mvp = _this.mapService.map.customCoords.getMVPMatrix(); // mvp = amapCustomCoords.getMVPMatrix()
@@ -88,11 +82,16 @@ _dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_l7Core.TYPE
         }); // TODO：脏检查，决定是否需要渲染
       });
     }
+    /**
+     * 对于每个 layer 都有不同的几何中心点，因此在绘制每个 layer 的时候都需要重新设置
+     * @param layer
+     */
+
   }, {
-    key: "getLayerCenter",
-    value: function getLayerCenter(layer) {
-      var source = layer.getSource();
-      return source.center;
+    key: "setLayerCenter",
+    value: function setLayerCenter(layer) {
+      if (layer.coordCenter === undefined) layer.coordCenter = layer.getSource().center;
+      this.mapService.setCoordCenter && this.mapService.setCoordCenter(layer.coordCenter);
     }
   }]);
   return ShaderUniformPlugin;

package/lib/raster/index.js

@@ -87,6 +87,7 @@ var RaterLayer = /*#__PURE__*/function (_BaseLayer) {
       var type = this.getModelType();
       var defaultConfig = {
         raster: {},
+        rasterRgb: {},
         raster3d: {},
         rasterTile: {}
       };
@@ -102,6 +103,9 @@ var RaterLayer = /*#__PURE__*/function (_BaseLayer) {
         case 'raster':
           return 'raster';
 
+        case 'rasterRgb':
+          return 'rasterRgb';
+
         case 'rasterTile':
           return 'rasterTile';
 

package/lib/raster/models/index.js

@@ -11,8 +11,11 @@ var _tileModel = _interopRequireDefault(require("../../tile/models/tileModel"));
 
 var _raster = _interopRequireDefault(require("./raster"));
 
+var _rasterRgb = _interopRequireDefault(require("./rasterRgb"));
+
 var RasterModels = {
   raster: _raster.default,
+  rasterRgb: _rasterRgb.default,
   raster3d: _raster.default,
   rasterTile: _tileModel.default
 };

package/lib/raster/models/raster.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -78,53 +82,125 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
         u_colorTexture: this.colorTexture
       };
     }
+  }, {
+    key: "getRasterData",
+    value: function () {
+      var _getRasterData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(parserDataItem) {
+        var _yield$parserDataItem, rasterData, width, height;
+
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!Array.isArray(parserDataItem.data)) {
+                  _context.next = 4;
+                  break;
+                }
+
+                return _context.abrupt("return", {
+                  data: parserDataItem.data,
+                  width: parserDataItem.width,
+                  height: parserDataItem.height
+                });
+
+              case 4:
+                _context.next = 6;
+                return parserDataItem.data;
+
+              case 6:
+                _yield$parserDataItem = _context.sent;
+                rasterData = _yield$parserDataItem.rasterData;
+                width = _yield$parserDataItem.width;
+                height = _yield$parserDataItem.height;
+                return _context.abrupt("return", {
+                  data: Array.from(rasterData),
+                  width: width,
+                  height: height
+                });
+
+              case 11:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function getRasterData(_x) {
+        return _getRasterData.apply(this, arguments);
+      }
+
+      return getRasterData;
+    }()
   }, {
     key: "initModels",
-    value: function initModels(callbackModel) {
-      var _ref2 = this.layer.getLayerConfig(),
-          _ref2$mask = _ref2.mask,
-          mask = _ref2$mask === void 0 ? false : _ref2$mask,
-          _ref2$maskInside = _ref2.maskInside,
-          maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside,
-          rampColorsData = _ref2.rampColorsData,
-          rampColors = _ref2.rampColors;
-
-      var source = this.layer.getSource();
-      var createTexture2D = this.rendererService.createTexture2D;
-      var parserDataItem = source.data.dataArray[0];
-      this.texture = createTexture2D({
-        data: parserDataItem.data,
-        width: parserDataItem.width,
-        height: parserDataItem.height,
-        format: _l7Core.gl.LUMINANCE,
-        type: _l7Core.gl.FLOAT // aniso: 4,
+    value: function () {
+      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(callbackModel) {
+        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, rampColorsData, rampColors, source, createTexture2D, parserDataItem, _yield$this$getRaster, data, width, height, imageData;
 
-      });
-      var imageData = rampColorsData ? rampColorsData : (0, _l7Utils.generateColorRamp)(rampColors);
-      this.colorTexture = createTexture2D({
-        data: imageData.data,
-        width: imageData.width,
-        height: imageData.height,
-        flipY: false
-      });
-      this.layer.buildLayerModel({
-        moduleName: 'rasterImageData',
-        vertexShader: rasterVert,
-        fragmentShader: rasterFrag,
-        triangulation: _triangulation.RasterImageTriangulation,
-        primitive: _l7Core.gl.TRIANGLES,
-        depth: {
-          enable: false
-        },
-        stencil: (0, _l7Utils.getMask)(mask, maskInside),
-        pick: false
-      }).then(function (model) {
-        callbackModel([model]);
-      }).catch(function (err) {
-        console.warn(err);
-        callbackModel([]);
-      });
-    }
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _ref2 = this.layer.getLayerConfig(), _ref2$mask = _ref2.mask, mask = _ref2$mask === void 0 ? false : _ref2$mask, _ref2$maskInside = _ref2.maskInside, maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside, rampColorsData = _ref2.rampColorsData, rampColors = _ref2.rampColors;
+                source = this.layer.getSource();
+                createTexture2D = this.rendererService.createTexture2D;
+                parserDataItem = source.data.dataArray[0];
+                _context2.next = 6;
+                return this.getRasterData(parserDataItem);
+
+              case 6:
+                _yield$this$getRaster = _context2.sent;
+                data = _yield$this$getRaster.data;
+                width = _yield$this$getRaster.width;
+                height = _yield$this$getRaster.height;
+                this.texture = createTexture2D({
+                  data: data,
+                  width: width,
+                  height: height,
+                  format: _l7Core.gl.LUMINANCE,
+                  type: _l7Core.gl.FLOAT // aniso: 4,
+
+                });
+                imageData = rampColorsData ? rampColorsData : (0, _l7Utils.generateColorRamp)(rampColors);
+                this.colorTexture = createTexture2D({
+                  data: imageData.data,
+                  width: imageData.width,
+                  height: imageData.height,
+                  flipY: false
+                });
+                this.layer.buildLayerModel({
+                  moduleName: 'rasterImageData',
+                  vertexShader: rasterVert,
+                  fragmentShader: rasterFrag,
+                  triangulation: _triangulation.RasterImageTriangulation,
+                  primitive: _l7Core.gl.TRIANGLES,
+                  depth: {
+                    enable: false
+                  },
+                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
+                  pick: false
+                }).then(function (model) {
+                  callbackModel([model]);
+                }).catch(function (err) {
+                  console.warn(err);
+                  callbackModel([]);
+                });
+
+              case 14:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function initModels(_x2) {
+        return _initModels.apply(this, arguments);
+      }
+
+      return initModels;
+    }()
   }, {
     key: "buildModels",
     value: function buildModels(callbackModel) {

package/lib/raster/models/rasterRgb.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _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"));
+
+var _triangulation = require("../../core/triangulation");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/* babel-plugin-inline-import '../shaders/raster_rgb_frag.glsl' */
+var rasterFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nuniform float u_channelRMax: 256.;\nuniform float u_channelGMax: 256.;\nuniform float u_channelBMax: 256.;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec3 rgb = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).rgb;\n  gl_FragColor = vec4(rgb.r/u_channelRMax, rgb.g/u_channelGMax, rgb.b/u_channelBMax, u_opacity);\n}";
+
+/* babel-plugin-inline-import '../shaders/raster_2d_vert.glsl' */
+var rasterVert = "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";
+
+var RasterModel = /*#__PURE__*/function (_BaseModel) {
+  (0, _inherits2.default)(RasterModel, _BaseModel);
+
+  var _super = _createSuper(RasterModel);
+
+  function RasterModel() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, RasterModel);
+
+    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), "channelRMax", 256);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "channelGMax", 256);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "channelBMax", 256);
+    return _this;
+  }
+
+  (0, _createClass2.default)(RasterModel, [{
+    key: "getUninforms",
+    value: function getUninforms() {
+      var _ref = this.layer.getLayerConfig(),
+          _ref$opacity = _ref.opacity,
+          opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+          channelRMax = _ref.channelRMax,
+          channelGMax = _ref.channelGMax,
+          channelBMax = _ref.channelBMax;
+
+      return {
+        u_opacity: opacity || 1,
+        u_texture: this.texture,
+        u_channelRMax: channelRMax !== undefined ? channelRMax : this.channelRMax,
+        u_channelGMax: channelGMax !== undefined ? channelGMax : this.channelGMax,
+        u_channelBMax: channelBMax !== undefined ? channelBMax : this.channelBMax
+      };
+    }
+  }, {
+    key: "getRasterData",
+    value: function () {
+      var _getRasterData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(parserDataItem) {
+        var _yield$parserDataItem, rasterData, width, height, channelR, channelG, channelB;
+
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!Array.isArray(parserDataItem.data)) {
+                  _context.next = 4;
+                  break;
+                }
+
+                return _context.abrupt("return", {
+                  data: parserDataItem.data,
+                  width: parserDataItem.width,
+                  height: parserDataItem.height
+                });
+
+              case 4:
+                _context.next = 6;
+                return parserDataItem.data;
+
+              case 6:
+                _yield$parserDataItem = _context.sent;
+                rasterData = _yield$parserDataItem.rasterData;
+                width = _yield$parserDataItem.width;
+                height = _yield$parserDataItem.height;
+                channelR = _yield$parserDataItem.channelR;
+                channelG = _yield$parserDataItem.channelG;
+                channelB = _yield$parserDataItem.channelB;
+                this.channelRMax = channelR;
+                this.channelGMax = channelG;
+                this.channelBMax = channelB;
+                return _context.abrupt("return", {
+                  data: Array.from(rasterData),
+                  width: width,
+                  height: height
+                });
+
+              case 17:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getRasterData(_x) {
+        return _getRasterData.apply(this, arguments);
+      }
+
+      return getRasterData;
+    }()
+  }, {
+    key: "initModels",
+    value: function () {
+      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(callbackModel) {
+        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, source, createTexture2D, parserDataItem, _yield$this$getRaster, data, width, height;
+
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _ref2 = this.layer.getLayerConfig(), _ref2$mask = _ref2.mask, mask = _ref2$mask === void 0 ? false : _ref2$mask, _ref2$maskInside = _ref2.maskInside, maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside;
+                source = this.layer.getSource();
+                createTexture2D = this.rendererService.createTexture2D;
+                parserDataItem = source.data.dataArray[0];
+                _context2.next = 6;
+                return this.getRasterData(parserDataItem);
+
+              case 6:
+                _yield$this$getRaster = _context2.sent;
+                data = _yield$this$getRaster.data;
+                width = _yield$this$getRaster.width;
+                height = _yield$this$getRaster.height;
+                this.texture = createTexture2D({
+                  // @ts-ignore
+                  data: data,
+                  width: width,
+                  height: height,
+                  format: _l7Core.gl.RGB,
+                  type: _l7Core.gl.FLOAT
+                });
+                this.layer.buildLayerModel({
+                  moduleName: 'rasterImageDataRGBA',
+                  vertexShader: rasterVert,
+                  fragmentShader: rasterFrag,
+                  triangulation: _triangulation.RasterImageTriangulation,
+                  primitive: _l7Core.gl.TRIANGLES,
+                  depth: {
+                    enable: false
+                  },
+                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
+                  pick: false
+                }).then(function (model) {
+                  callbackModel([model]);
+                }).catch(function (err) {
+                  console.warn(err);
+                  callbackModel([]);
+                });
+
+              case 12:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function initModels(_x2) {
+        return _initModels.apply(this, arguments);
+      }
+
+      return initModels;
+    }()
+  }, {
+    key: "buildModels",
+    value: function buildModels(callbackModel) {
+      this.initModels(callbackModel);
+    }
+  }, {
+    key: "clearModels",
+    value: function clearModels() {
+      var _this$texture;
+
+      (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes() {
+      // 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) {
+            return [vertex[3], vertex[4]];
+          }
+        }
+      });
+    }
+  }]);
+  return RasterModel;
+}(_BaseModel2.default);
+
+exports.default = RasterModel;