no message

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

@@ -88,6 +88,8 @@ export default {
   props: ["dataAll", "ConfigId"],
   data() {
     return {
+      layerIds: [],
+      sourceIds: [],
       setLoading: false,
       imageUrl: "",
       deviceMarkers: [],
@@ -289,12 +291,20 @@ export default {
       });
       this.pois = listCity.join(",");
       this.citys = [...new Set(this.pois.split(","))];
+      this.clearCitiesMarkersHandler()
+      this.citiesData = this.citiesData.filter(x=>this.citys.indexOf(x.name)!=-1)
+      this.citys = this.citys.filter(x=>this.citiesData.findIndex(y=>y.name==x)==-1)
+
       this.TripMapList.forEach(x => {
         if (x.MId) {
           this.SearchCity(x.MId);
         }
       });
       this.countriesData.forEach((x, i) => {
+        if(this.map && this.map.getLayer("world-layer-" + x.MId)) {
+          this.map.removeLayer("world-layer-" + x.MId);
+          this.map.removeSource("word-source" + x.MId);
+        }
         if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
           this.map.removeLayer("world-layer-" + x.MId);
         }
@@ -451,18 +461,31 @@ export default {
         err => {}
       );
     },
+    clearCountryFillRange(){
+      //删除图层
+      if (this.layerIds.length) {
+        this.layerIds.forEach(id => {
+          this.map.removeLayer(id)
+        })
+        this.layerIds = [];
+      }
+      //删除数据源
+      if (this.sourceIds.length) {
+        this.sourceIds.forEach(id =>{
+          this.map.removeSource(id)
+        })
+        this.sourceIds = [];
+      }
+    },
     addCountryFillRange() {
       this.countriesData.forEach((x, i) => {
         if (x.MName == "中国") {
           x.MName = "中华人民共和国";
         }
-        if (this.map.getLayer("world-layer-" + x.MId)) {
-          this.map.removeLayer("world-layer-" + x.MId);
-        }
         this.map.addLayer({
           id: "world-layer-" + x.MId,
           type: "fill",
-          source: "word-source",
+          source: "word-source" + x.MId,
           filter: ["==", "NAME_ZH", x.MName]
         });
         this.map.setPaintProperty("world-layer-" + x.MId, "fill-color", [
@@ -474,6 +497,14 @@ export default {
         ]);
       });
     },
+    clearCitiesMarkersHandler(){
+      if(this.deviceMarkers && this.deviceMarkers.length>0){
+        this.deviceMarkers.forEach(x=>{
+          x.remove()
+        })
+        this.deviceMarkers = []
+      }
+    },
     addMarker() {
       // let markerColor = calculateComplementaryColor("#71adeb");
       this.citiesData.forEach((item, i) => {
@@ -481,6 +512,7 @@ export default {
           .setLngLat([item.longitude, item.latitude])
           .addTo(this.map);
         this.addLabel(item, i);
+        this.deviceMarkers.push(marker);
       });
     },
     addLabel(item, i) {