修复 mapvlayer 事件回调无效

Author: xilanhuaweidapao

src/common/overlay/mapv/MapvRenderer.js

@@ -35,7 +35,8 @@ export class MapvRenderer extends BaseLayer {
         this.targetElement = targetElement;
         this.canvas = this._createCanvas(id, mapElement);
         this.canvasLayer = {
-          canvas: this.canvas
+          canvas: this.canvas,
+          devicePixelRatio: this.devicePixelRatio
         }
         this.init(options);
         this.argCheck(options);

src/mapboxgl/overlay/MapvLayer.js

@@ -55,9 +55,10 @@ export class MapvLayer {
       transferCoordinate: this._transferCoordinate,
       getCenterPixel: this._getCenterPixel,
       getResolution: this._getResolution,
-      validZoom: this._validZoom
+      validZoom: this._validZoom.bind(this)
     }, { mapElement: this.map.getCanvas(), targetElement: this.mapContainer, id: this.id });
     this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
+    this.bindEvent();
   }
 
   /**
@@ -66,14 +67,15 @@ export class MapvLayer {
      */
   onRemove() {
     this.renderer.destroy();
+    this.unbindEvent();
   }
 
   /**
      * @function MapvLayer.prototype.render
      * @description 渲染图层。
      */
   render() {
-    this.renderer.draw();
+    this.renderer && this.renderer.draw();
   }
 
   _transferCoordinate() {
@@ -98,10 +100,9 @@ export class MapvLayer {
   }
 
   _validZoom() {
-    var self = this;
     if (
-      (self.options.minZoom && this.map.getZoom() < self.options.minZoom) ||
-      (self.options.maxZoom && this.map.getZoom() > self.options.maxZoom)
+      (this.mapVOptions.minZoom && this.map.getZoom() < this.mapVOptions.minZoom) ||
+      (this.mapVOptions.maxZoom && this.map.getZoom() > this.mapVOptions.maxZoom)
     ) {
       return false;
     }
@@ -218,12 +219,12 @@ export class MapvLayer {
   */
   bindEvent() {
     var map = this.map;
-    if (this.options.methods) {
-      if (this.options.methods.click) {
-        map.on('click', this.clickEvent);
+    if (this.mapVOptions.methods) {
+      if (this.mapVOptions.methods.click) {
+        map.on('click', this.renderer.clickEvent);
       }
-      if (this.options.methods.mousemove) {
-        map.on('mousemove', this.mousemoveEvent);
+      if (this.mapVOptions.methods.mousemove) {
+        map.on('mousemove', this.renderer.mousemoveEvent);
       }
     }
   }
@@ -234,11 +235,11 @@ export class MapvLayer {
    */
   unbindEvent() {
     var map = this.map;
-    if (this.options.methods) {
-      if (this.options.methods.click) {
+    if (this.mapvOptions.methods) {
+      if (this.mapvOptions.methods.click) {
         map.off('click', this.clickEvent);
       }
-      if (this.options.methods.mousemove) {
+      if (this.mapvOptions.methods.mousemove) {
         map.off('mousemove', this.mousemoveEvent);
       }
     }

src/maplibregl/overlay/MapvLayer.js

@@ -43,7 +43,7 @@ export class MapvLayer {
       transferCoordinate: this._transferCoordinate,
       getCenterPixel: this._getCenterPixel,
       getResolution: this._getResolution,
-      validZoom: this._validZoom
+      validZoom: this._validZoom.bind(this)
     }, { id: this.id, targetElement: this.mapContainer, mapElement: this.map.getCanvas() });
     this._bindEvent();
   }