@antv/l7-layers 2.20.19 → 2.21.0

package/es/tile/service/TilePickService.js

@@ -5,7 +5,6 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { TYPES } from '@antv/l7-core';
 import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
 import { TileSourceService } from "./TileSourceService";
 var SELECT = 'select';
@@ -42,7 +41,7 @@ export var TilePickService = /*#__PURE__*/function () {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               container = this.parent.getContainer();
-              pickingService = container.get(TYPES.IPickingService);
+              pickingService = container.pickingService;
               if (!(layer.type === 'RasterLayer')) {
                 _context.next = 8;
                 break;
@@ -170,7 +169,7 @@ export var TilePickService = /*#__PURE__*/function () {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "pickRasterLayer",
-    value: function pickRasterLayer(layer, target, parent) {
+    value: function pickRasterLayer() {
       return false;
     }
   }]);

package/es/tile/tile/Tile.js

@@ -118,8 +118,8 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
               }).shape('fill').color('#0f0').style({
                 opacity: 0.5
               });
-              container = createLayerContainer(this.parent.sceneContainer);
-              mask.setContainer(container, this.parent.sceneContainer);
+              container = createLayerContainer(this.parent.container);
+              mask.setContainer(container);
               _context.next = 5;
               return mask.init();
             case 5:
@@ -148,8 +148,8 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              container = createLayerContainer(this.parent.sceneContainer);
-              mask.setContainer(container, this.parent.sceneContainer);
+              container = createLayerContainer(this.parent.container);
+              mask.setContainer(container);
               _context2.next = 4;
               return mask.init();
             case 4:
@@ -176,8 +176,8 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
             case 0:
               // set flag
               layer.isTileLayer = true;
-              container = createLayerContainer(this.parent.sceneContainer);
-              layer.setContainer(container, this.parent.sceneContainer);
+              container = createLayerContainer(this.parent.container);
+              layer.setContainer(container);
               this.layers.push(layer);
               _context3.next = 6;
               return layer.init();
@@ -214,6 +214,7 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
     value: function getMainLayer() {
       return this.layers[0];
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "getFeatures",
     value: function getFeatures(sourceLayer) {
@@ -225,6 +226,7 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
      * @param id
      * @returns
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "getFeatureById",
     value: function getFeatureById(id) {

package/es/tile/utils/utils.d.ts

@@ -6,7 +6,3 @@ export declare const tileVectorParser: string[];
  * @returns
  */
 export declare function isTileGroup(layer: ILayer): boolean;
-export declare function getContainerSize(container: HTMLCanvasElement | HTMLElement): DOMRect | {
-    width: number;
-    height: number;
-};

package/es/tile/utils/utils.js

@@ -1,4 +1,3 @@
-import { DOM } from '@antv/l7-utils';
 export var tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
 
 /**
@@ -9,14 +8,4 @@ export var tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
 export function isTileGroup(layer) {
   var source = layer.getSource();
   return tileVectorParser.includes(source.parser.type);
-}
-export function getContainerSize(container) {
-  if (container.getContext) {
-    return {
-      width: container.width / DOM.DPR,
-      height: container.height / DOM.DPR
-    };
-  } else {
-    return container.getBoundingClientRect();
-  }
 }

package/lib/canvas/index.js

@@ -6,18 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 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 _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 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 _BaseLayer2 = _interopRequireDefault(require("../core/BaseLayer"));
-var _index = _interopRequireDefault(require("./models/index"));
+var _models = require("./models");
 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; } }
+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 type { ILayerConfig } from '@antv/l7-core';
 var CanvasLayer = exports.default = /*#__PURE__*/function (_BaseLayer) {
   (0, _inherits2.default)(CanvasLayer, _BaseLayer);
   var _super = _createSuper(CanvasLayer);
@@ -29,22 +31,28 @@ var CanvasLayer = exports.default = /*#__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;
   }
   (0, _createClass2.default)(CanvasLayer, [{
+    key: "getDefaultConfig",
+    value: function getDefaultConfig() {
+      return {
+        zIndex: 3,
+        contextType: 'canvas2d',
+        trigger: 'change'
+      };
+    }
+  }, {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var modelType;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              modelType = this.getModelType();
-              this.layerModel = new _index.default[modelType](this);
-              _context.next = 4;
+              this.layerModel = new _models.CanvasModel(this);
+              _context.next = 3;
               return this.initLayerModels();
-            case 4:
+            case 3:
             case "end":
               return _context.stop();
           }
@@ -56,46 +64,64 @@ var CanvasLayer = exports.default = /*#__PURE__*/function (_BaseLayer) {
       return buildModels;
     }()
   }, {
-    key: "hide",
-    value: function hide() {
-      // 清除画布
-      if (this.layerModel.clearCanvas) {
-        this.layerModel.clearCanvas();
-      }
+    key: "getModelType",
+    value: function getModelType() {
+      return this.getLayerConfig().contextType || 'canvas2d';
+    }
+  }, {
+    key: "draw",
+    value: function draw(_draw) {
       this.updateLayerConfig({
-        visible: false
+        draw: _draw
       });
-      this.reRender();
+      this.render();
       return this;
     }
   }, {
-    key: "renderModels",
-    value: function renderModels() {
-      var _this$layerModel,
-        _this2 = this;
-      if (this !== null && this !== void 0 && (_this$layerModel = this.layerModel) !== null && _this$layerModel !== void 0 && _this$layerModel.renderUpdate) {
-        this.layerModel.renderUpdate();
+    key: "getLayerConfig",
+    value: function getLayerConfig() {
+      var config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.getDefaultConfig()), (0, _get2.default)((0, _getPrototypeOf2.default)(CanvasLayer.prototype), "getLayerConfig", this).call(this));
+      if (config.zIndex < 3) {
+        config.zIndex = 3;
       }
-      this.models.forEach(function (model) {
-        model.draw({
-          uniforms: _this2.layerModel.getUninforms()
-        }, false);
-      });
+      return config;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$layerModel;
+      (_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 || _this$layerModel.renderCanvas();
       return this;
     }
   }, {
-    key: "getDefaultConfig",
-    value: function getDefaultConfig() {
-      var type = this.getModelType();
-      var defaultConfig = {
-        canvas: {}
-      };
-      return defaultConfig[type];
+    key: "getCanvas",
+    value: function getCanvas() {
+      var _this$layerModel2;
+      return (_this$layerModel2 = this.layerModel) === null || _this$layerModel2 === void 0 ? void 0 : _this$layerModel2.canvas;
     }
   }, {
-    key: "getModelType",
-    value: function getModelType() {
-      return 'canvas';
+    key: "show",
+    value: function show() {
+      var canvas = this.getCanvas();
+      if (canvas) {
+        canvas.style.display = 'unset';
+      }
+      return this;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var canvas = this.getCanvas();
+      if (canvas) {
+        canvas.style.display = 'none';
+      }
+      return this;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.layerModel.removeCanvas();
+      (0, _get2.default)((0, _getPrototypeOf2.default)(CanvasLayer.prototype), "destroy", this).call(this);
     }
   }]);
   return CanvasLayer;

package/lib/canvas/models/canvas.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CanvasModel = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -17,122 +17,133 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _interface = require("../../core/interface");
+var _constants = require("./constants");
 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 CanvaModel = exports.default = /*#__PURE__*/function (_BaseModel) {
-  (0, _inherits2.default)(CanvaModel, _BaseModel);
-  var _super = _createSuper(CanvaModel);
-  function CanvaModel() {
+var CanvasModel = exports.CanvasModel = /*#__PURE__*/function (_BaseModel) {
+  (0, _inherits2.default)(CanvasModel, _BaseModel);
+  var _super = _createSuper(CanvasModel);
+  function CanvasModel() {
     var _this;
-    (0, _classCallCheck2.default)(this, CanvaModel);
+    (0, _classCallCheck2.default)(this, CanvasModel);
     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), "updateMode", _interface.CanvasUpdateType.ALWAYS);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderUpdate", function () {
-      var _ref = _this.layer.getLayerConfig(),
-        _ref$zIndex = _ref.zIndex,
-        zIndex = _ref$zIndex === void 0 ? 10 : _ref$zIndex,
-        _ref$update = _ref.update,
-        update = _ref$update === void 0 ? _interface.CanvasUpdateType.ALWAYS : _ref$update,
-        _ref$animateOption = _ref.animateOption,
-        animateOption = _ref$animateOption === void 0 ? {
-          enable: false,
-          duration: 20
-        } : _ref$animateOption;
-      if (+_this.canvas.style.zIndex === zIndex) {
-        _this.canvas.style.zIndex = zIndex + '';
-      }
-      if (_this.updateMode !== update) {
-        _this.updateMode = update;
-        _this.unBindListener();
-        _this.bindListener();
-      }
-      if (_this.updateMode === _interface.CanvasUpdateType.ALWAYS && animateOption.enable) {
-        _this.renderCanvas();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canvas", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initCanvas", function () {
+      var _this$mapService$getC, _this$mapService$getC2, _this$mapService, _this$mapService$getM, _this$mapService2;
+      var _this$layerConfig = _this.layerConfig,
+        zIndex = _this$layerConfig.zIndex,
+        getContext = _this$layerConfig.getContext;
+      var canvas = document.createElement('canvas');
+      var modelType = _this.layer.getModelType();
+      _this.canvas = canvas;
+      canvas.classList.add('l7-canvas-layer');
+      canvas.style.position = 'absolute';
+      canvas.style.top = '0';
+      canvas.style.left = '0';
+      canvas.style.zIndex = String(zIndex);
+      _this.resetCanvasSize();
+      var container = (_this$mapService$getC = (_this$mapService$getC2 = (_this$mapService = _this.mapService).getCanvasOverlays) === null || _this$mapService$getC2 === void 0 ? void 0 : _this$mapService$getC2.call(_this$mapService)) !== null && _this$mapService$getC !== void 0 ? _this$mapService$getC : (_this$mapService$getM = (_this$mapService2 = _this.mapService).getMapCanvasContainer) === null || _this$mapService$getM === void 0 ? void 0 : _this$mapService$getM.call(_this$mapService2);
+      container === null || container === void 0 || container.appendChild(canvas);
+      _this.ctx = getContext ? getContext(canvas) : canvas.getContext(_constants.CanvasContextTypeMap[modelType]);
+      if (!_this.ctx) {
+        console.error('Failed to get rendering context for canvas');
       }
+      _this.bindListeners();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unBindListener", function () {
-      _this.mapService.off('mapchange', _this.renderCanvas);
-      _this.mapService.off('zoomstart', _this.clearCanvas);
-      _this.mapService.off('zoomend', _this.renderCanvas);
-      _this.mapService.off('movestart', _this.clearCanvas);
-      _this.mapService.off('moveend', _this.renderCanvas);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "bindListener", function () {
-      if (_this.updateMode === _interface.CanvasUpdateType.ALWAYS) {
-        _this.mapService.on('mapchange', _this.renderCanvas);
-      } else {
-        _this.mapService.on('zoomstart', _this.clearCanvas);
-        _this.mapService.on('zoomend', _this.renderCanvas);
-        _this.mapService.on('movestart', _this.clearCanvas);
-        _this.mapService.on('moveend', _this.renderCanvas);
-      }
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resetViewportSize", function () {
+      var _this$rendererService = _this.rendererService.getViewportSize(),
+        viewWidth = _this$rendererService.width,
+        viewHeight = _this$rendererService.height;
+      _this.viewportSize = [viewWidth, viewHeight];
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearCanvas", function () {
-      if (_this.ctx) {
-        var _this$rendererService = _this.rendererService.getViewportSize(),
-          w = _this$rendererService.width,
-          h = _this$rendererService.height;
-        _this.ctx.clearRect(0, 0, w, h);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resetCanvasSize", function () {
+      var canvas = _this.canvas;
+      if (!canvas) {
+        return;
       }
+      _this.resetViewportSize();
+      var _this$mapService$getS = _this.mapService.getSize(),
+        _this$mapService$getS2 = (0, _slicedToArray2.default)(_this$mapService$getS, 2),
+        width = _this$mapService$getS2[0],
+        height = _this$mapService$getS2[1];
+      var _this$viewportSize = (0, _slicedToArray2.default)(_this.viewportSize, 2),
+        viewWidth = _this$viewportSize[0],
+        viewHeight = _this$viewportSize[1];
+      canvas.width = viewWidth;
+      canvas.height = viewHeight;
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCanvas", function () {
-      var _this$rendererService2 = _this.rendererService.getViewportSize(),
-        viewWidth = _this$rendererService2.width,
-        viewHeight = _this$rendererService2.height;
-      if (_this.prevSize[0] !== viewWidth || _this.prevSize[1] !== viewHeight) {
-        _this.prevSize = [viewWidth, viewHeight];
-        var size = _this.mapService.getSize();
-        var _size = (0, _slicedToArray2.default)(size, 2),
-          width = _size[0],
-          height = _size[1];
-        _this.canvas.width = viewWidth;
-        _this.canvas.height = viewHeight;
-        _this.canvas.style.width = width + 'px';
-        _this.canvas.style.height = height + 'px';
+      var _ref;
+      if (!_this.canvas) {
+        _this.initCanvas();
       }
-      var _ref2 = _this.layer.getLayerConfig(),
-        drawingOnCanvas = _ref2.drawingOnCanvas;
-      if (_this.ctx) {
-        drawingOnCanvas({
-          canvas: _this.canvas,
-          ctx: _this.ctx,
-          mapService: _this.mapService,
-          size: [viewWidth, viewHeight]
-        });
+      var _this$layerConfig2 = _this.layerConfig,
+        draw = _this$layerConfig2.draw,
+        drawingOnCanvas = _this$layerConfig2.drawingOnCanvas;
+      var _this$viewportSize2 = (0, _slicedToArray2.default)(_this.viewportSize, 2),
+        width = _this$viewportSize2[0],
+        height = _this$viewportSize2[1];
+      var bounds = _this.mapService.getBounds();
+      (_ref = draw !== null && draw !== void 0 ? draw : drawingOnCanvas) === null || _ref === void 0 || _ref({
+        canvas: _this.canvas,
+        ctx: _this.ctx,
+        container: {
+          width: width,
+          height: height,
+          bounds: bounds
+        },
+        size: [width, height],
+        utils: {
+          lngLatToContainer: _this.lngLatToContainer
+        },
+        mapService: _this.mapService
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeCanvas", function () {
+      if (_this.canvas) {
+        var _this$canvas$parentEl;
+        (_this$canvas$parentEl = _this.canvas.parentElement) === null || _this$canvas$parentEl === void 0 || _this$canvas$parentEl.removeChild(_this.canvas);
+        _this.canvas = null;
       }
+      _this.unbindListeners();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMapResize", function () {
+      requestAnimationFrame(function () {
+        _this.resetCanvasSize();
+        _this.renderCanvas();
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lngLatToContainer", function (lngLat) {
+      var _this$mapService$lngL = _this.mapService.lngLatToContainer(lngLat),
+        x = _this$mapService$lngL.x,
+        y = _this$mapService$lngL.y;
+      return {
+        x: x * window.devicePixelRatio,
+        y: y * window.devicePixelRatio
+      };
     });
     return _this;
   }
-  (0, _createClass2.default)(CanvaModel, [{
-    key: "clearModels",
-    value: function clearModels() {
-      if (this.canvas) {
-        var _this$mapService$getC;
-        (_this$mapService$getC = this.mapService.getContainer()) === null || _this$mapService$getC === void 0 || _this$mapService$getC.removeChild(this.canvas);
-        // @ts-ignore
-        this.canvas = null;
-      }
-      this.unBindListener();
+  (0, _createClass2.default)(CanvasModel, [{
+    key: "layerConfig",
+    get: function get() {
+      return this.layer.getLayerConfig();
     }
   }, {
     key: "initModels",
     value: function () {
       var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _ref3, _ref3$update, update;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _ref3 = this.layer.getLayerConfig(), _ref3$update = _ref3.update, update = _ref3$update === void 0 ? _interface.CanvasUpdateType.ALWAYS : _ref3$update;
-              this.updateMode = update;
-              this.initCanvas();
               this.renderCanvas();
-              this.bindListener();
-              this.mapService.getContainer();
               return _context.abrupt("return", []);
-            case 7:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -144,58 +155,34 @@ var CanvaModel = exports.default = /*#__PURE__*/function (_BaseModel) {
       return initModels;
     }()
   }, {
-    key: "initCanvas",
-    value: function initCanvas() {
-      var _this$mapService$getC2;
-      var _ref4 = this.layer.getLayerConfig(),
-        zIndex = _ref4.zIndex;
-      var size = this.mapService.getSize();
-      var _size2 = (0, _slicedToArray2.default)(size, 2),
-        width = _size2[0],
-        height = _size2[1];
-      var _this$rendererService3 = this.rendererService.getViewportSize(),
-        viewWidth = _this$rendererService3.width,
-        viewHeight = _this$rendererService3.height;
-      this.prevSize = [viewWidth, viewHeight];
-      var canvas = document.createElement('canvas');
-      this.canvas = canvas;
-      canvas.width = viewWidth;
-      canvas.height = viewHeight;
-      canvas.style.pointerEvents = 'none';
-      canvas.style.width = width + 'px';
-      canvas.style.height = height + 'px';
-      canvas.style.position = 'absolute';
-      canvas.style.top = '0';
-      canvas.style.left = '0';
-      canvas.style.zIndex = zIndex + '';
-      (_this$mapService$getC2 = this.mapService.getContainer()) === null || _this$mapService$getC2 === void 0 || _this$mapService$getC2.appendChild(canvas);
-      var ctx = canvas.getContext('2d');
-      this.ctx = ctx;
+    key: "bindListeners",
+    value: function bindListeners() {
+      this.mapService.on('resize', this.onMapResize);
+      var _this$layerConfig3 = this.layerConfig,
+        trigger = _this$layerConfig3.trigger,
+        update = _this$layerConfig3.update;
+      if (update === _interface.CanvasUpdateType.ALWAYS || trigger === 'change') {
+        this.mapService.on('mapchange', this.renderCanvas);
+      } else {
+        this.mapService.on('zoomstart', this.removeCanvas);
+        this.mapService.on('zoomend', this.renderCanvas);
+        this.mapService.on('movestart', this.removeCanvas);
+        this.mapService.on('moveend', this.renderCanvas);
+      }
     }
   }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = (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:
-              return _context2.abrupt("return", this.initModels());
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }()
+    key: "unbindListeners",
+    value: function unbindListeners() {
+      this.mapService.off('resize', this.onMapResize);
+      this.mapService.off('mapchange', this.renderCanvas);
+      this.mapService.off('zoomstart', this.removeCanvas);
+      this.mapService.off('zoomend', this.renderCanvas);
+      this.mapService.off('movestart', this.removeCanvas);
+      this.mapService.off('moveend', this.renderCanvas);
+    }
   }, {
     key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes() {
-      return;
-    }
+    value: function registerBuiltinAttributes() {}
   }]);
-  return CanvaModel;
+  return CanvasModel;
 }(_BaseModel2.default);

package/lib/canvas/models/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CanvasContextTypeMap = void 0;
+var CanvasContextTypeMap = exports.CanvasContextTypeMap = {
+  canvas2d: '2d',
+  webgl: 'webgl',
+  webgl2: 'webgl2',
+  webgpu: 'webgpu'
+};

package/lib/canvas/models/index.js

@@ -1,12 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _canvas = _interopRequireDefault(require("./canvas"));
-var CanvasModels = {
-  canvas: _canvas.default
-};
-var _default = exports.default = CanvasModels;
+var _canvas = require("./canvas");
+Object.keys(_canvas).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _canvas[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _canvas[key];
+    }
+  });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});