fix mbgl 3d专题图移除操作遗留问题

zhurc · zhurc · commit 505a31747266 · 2018-03-15T11:18:09.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -137,6 +137,7 @@
 - 修复多个客户端专题图叠加偏移的问题
 - 修复 `mapboxgl.supermap.MapvLayer` 的 `clearData` 失败的问题
 - 修复客户端3D专题图高亮时底色穿透问题
+- 修复移除客户端3D专题图图层报错问题
 
 ### Classic
 
diff --git a/dist/iclient9-mapboxgl.js b/dist/iclient9-mapboxgl.js
@@ -51532,11 +51532,13 @@ var Theme3DLayer = exports.Theme3DLayer = function () {
             //移除图层
             var layerId = this.id ? this.id : "theme3DLayer";
             if (this.map.getLayer(layerId)) {
+                this.map.off('mousemove', layerId, this._onMouseMove.bind(this));
                 this.map.removeLayer(layerId);
             }
             //移除高亮图层
             var highlightLayerId = "highlightLayer";
             if (this.map.getLayer(highlightLayerId)) {
+                this._selectFeatureId = null;
                 this.map.removeLayer(highlightLayerId);
             }
 
@@ -51660,29 +51662,30 @@ var Theme3DLayer = exports.Theme3DLayer = function () {
                 "filter": ["in", "$id", ""]
             });
 
-            var me = this;
-            var canvas = document.querySelector('.mapboxgl-canvas-container.mapboxgl-interactive');
-            var featureId;
-            map.on('mousemove', function (e) {
-                canvas.style.cursor = 'auto';
-
-                var features = map.queryRenderedFeatures(e.point, { layers: [me.id] });
+            this._selectFeatureId = null;
+            map.on('mousemove', this.id, this._onMouseMove.bind(this));
+        }
+    }, {
+        key: '_onMouseMove',
+        value: function _onMouseMove(e) {
+            var me = this,
+                map = this.map;
+            var features = map.queryRenderedFeatures(e.point, { layers: [me.id] });
 
-                if (me.highlight && me.highlight.callback) {
-                    me.highlight.callback(features, e);
-                }
+            if (me.highlight && me.highlight.callback) {
+                me.highlight.callback(features, e);
+            }
 
-                if (!features || features.length < 1) {
-                    me._clearHighlight.call(me);
-                    return;
-                }
-                var id = features[0].id;
-                if (featureId === id) {
-                    return;
-                }
-                featureId = id;
-                map.setFilter("highlightLayer", ['==', '$id', featureId]);
-            });
+            if (!features || features.length < 1) {
+                me._clearHighlight.call(me);
+                return;
+            }
+            var id = features[0].id;
+            if (this._selectFeatureId === id) {
+                return;
+            }
+            this._selectFeatureId = id;
+            map.setFilter("highlightLayer", ['==', '$id', this._selectFeatureId]);
         }
     }, {
         key: '_clearHighlight',
diff --git a/dist/iclient9-mapboxgl.min.js b/dist/iclient9-mapboxgl.min.js
diff --git a/src/mapboxgl/overlay/theme/Theme3DLayer.js b/src/mapboxgl/overlay/theme/Theme3DLayer.js
@@ -233,11 +233,13 @@ export class Theme3DLayer {
         //移除图层
         var layerId = this.id ? this.id : "theme3DLayer";
         if (this.map.getLayer(layerId)) {
+            this.map.off('mousemove', layerId, this._onMouseMove.bind(this));
             this.map.removeLayer(layerId);
         }
         //移除高亮图层
         var highlightLayerId = "highlightLayer";
         if (this.map.getLayer(highlightLayerId)) {
+            this._selectFeatureId = null;
             this.map.removeLayer(highlightLayerId);
         }
 
@@ -350,29 +352,28 @@ export class Theme3DLayer {
             "filter": ["in", "$id", ""]
         });
 
-        var me = this;
-        var canvas = document.querySelector('.mapboxgl-canvas-container.mapboxgl-interactive');
-        var featureId;
-        map.on('mousemove', function (e) {
-            canvas.style.cursor = 'auto';
+        this._selectFeatureId = null;
+        map.on('mousemove', this.id, this._onMouseMove.bind(this));
+    }
 
-            var features = map.queryRenderedFeatures(e.point, {layers: [me.id]});
+    _onMouseMove(e) {
+        var me = this, map = this.map;
+        var features = map.queryRenderedFeatures(e.point, {layers: [me.id]});
 
-            if (me.highlight && me.highlight.callback) {
-                me.highlight.callback(features, e);
-            }
+        if (me.highlight && me.highlight.callback) {
+            me.highlight.callback(features, e);
+        }
 
-            if (!features || features.length < 1) {
-                me._clearHighlight.call(me);
-                return;
-            }
-            var id = features[0].id;
-            if (featureId === id) {
-                return;
-            }
-            featureId = id;
-            map.setFilter("highlightLayer", ['==', '$id', featureId]);
-        });
+        if (!features || features.length < 1) {
+            me._clearHighlight.call(me);
+            return;
+        }
+        var id = features[0].id;
+        if (this._selectFeatureId === id) {
+            return;
+        }
+        this._selectFeatureId = id;
+        map.setFilter("highlightLayer", ['==', '$id', this._selectFeatureId]);
     }
 
     _clearHighlight() {
