no message

src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue

@@ -62,7 +62,7 @@
                 :preview-src-list="[PostConfig.MapUrl]">
               </el-image>
             </div>
-            <p v-else @click="ShowMap=!ShowMap">地图暂未生成图</p>
+            <p v-else @click="ShowMap=!ShowMap" style="cursor: pointer;">地图暂未生成图</p>
           </div>
         </div>
         <Tripmap v-if="ShowMap" :dataAll="PostConfig" :ConfigId="ConfigId" @Cancel="ShowMap=false" @Success="getMapImgSuccess"></Tripmap>

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

@@ -142,26 +142,26 @@ export default {
       "fill-outline-color": "#4f4f4f",
       "fill-opacity": 0.5
       },
-      paintHgBgObj: { //设置属性
+      paintHgBgObj: { //设置韩国背景属性
         "fill-color": [
         "case",
-        ["==",["get","name"],"江原道"],"#0080ff",
-        ["==",["get","name"],"京畿道"],"#FFC0CB",
-        ["==",["get","name"],"庆尚南道"],"#DB7093",
-        ["==",["get","name"],"庆尚北道"],"#EE82EE",
-        ["==",["get","name"],"全罗南道"],"#BA55D3",
-        ["==",["get","name"],"全罗北道"],"#6A5ACD",
-        ["==",["get","name"],"忠清南道"],"#0080ff",
-        ["==",["get","name"],"忠清北道"],"#FFC0CB",
-        ["==",["get","name"],"光州广域市"],"#DB7093",
-        ["==",["get","name"],"大邱广域市"],"#EE82EE",
-        ["==",["get","name"],"大田广域市"],"#BA55D3",
-        ["==",["get","name"],"釜山广域市"],"#6A5ACD",
-        ["==",["get","name"],"首尔特别市"],"#0080ff",
-        ["==",["get","name"],"蔚山广域市"],"#FFC0CB",
-        ["==",["get","name"],"仁川广域市"],"#DB7093",
-        ["==",["get","name"],"世宗特别自治市"],"#EE82EE",
-        ["==",["get","name"],"济州特别自治道"],"#BA55D3",
+        ["==",["get","name"],"江原道"],this.getRandomColor(),
+        ["==",["get","name"],"京畿道"],this.getRandomColor(),
+        ["==",["get","name"],"庆尚南道"],this.getRandomColor(),
+        ["==",["get","name"],"庆尚北道"],this.getRandomColor(),
+        ["==",["get","name"],"全罗南道"],this.getRandomColor(),
+        ["==",["get","name"],"全罗北道"],this.getRandomColor(),
+        ["==",["get","name"],"忠清南道"],this.getRandomColor(),
+        ["==",["get","name"],"忠清北道"],this.getRandomColor(),
+        ["==",["get","name"],"光州广域市"],this.getRandomColor(),
+        ["==",["get","name"],"大邱广域市"],this.getRandomColor(),
+        ["==",["get","name"],"大田广域市"],this.getRandomColor(),
+        ["==",["get","name"],"釜山广域市"],this.getRandomColor(),
+        ["==",["get","name"],"首尔特别市"],this.getRandomColor(),
+        ["==",["get","name"],"蔚山广域市"],this.getRandomColor(),
+        ["==",["get","name"],"仁川广域市"],this.getRandomColor(),
+        ["==",["get","name"],"世宗特别自治市"],this.getRandomColor(),
+        ["==",["get","name"],"济州特别自治道"],this.getRandomColor(),
         "#f5e205"
         ],
         "fill-outline-color": "#4f4f4f",
@@ -249,6 +249,7 @@ export default {
   },
   computed: {},
   mounted() {
+    this.setPaintRbBgList()
     this.initMap();
   },
   methods: {
@@ -299,24 +300,31 @@ export default {
       }
     },
     // 清除已有源
-    ClearSource(){
-      this.listCity.forEach((p, i) => {
-        if (this.map.getLayer("curve-layer-" + p.MId)) {
-          this.map.removeLayer("curve-layer-" + p.MId);
-          this.map.removeSource("curve-source-" + p.MId);
-        }
-      });
-      this.countriesData.forEach((x, i) => {
-        if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
-          this.map.removeLayer("world-layer-" + x.MId);
-        }
-        if (this.map && this.map.getLayer("mapLayer-" + x.MId)) {
-          this.map.removeLayer("mapLayer-" + x.MId);
+    ClearSource(Id,type){
+      if(type){
+        if(this.map.getLayer(Id)) {
+          this.map.removeLayer(Id);
+          if(type==2) this.map.removeSource(Id);
         }
-        if (this.map && this.map.getLayer("mapLayerId-" + x.MId)) {
-          this.map.removeLayer("mapLayerId-" + x.MId);
-        }
-      });
+      }else{
+        this.listCity.forEach((p, i) => {
+          if (this.map.getLayer("curve-layer-" + p.MId)) {
+            this.map.removeLayer("curve-layer-" + p.MId);
+            this.map.removeSource("curve-source-" + p.MId);
+          }
+        });
+        this.countriesData.forEach((x, i) => {
+          if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
+            this.map.removeLayer("world-layer-" + x.MId);
+          }
+          if (this.map && this.map.getLayer("mapLayer-" + x.MId)) {
+            this.map.removeLayer("mapLayer-" + x.MId);
+          }
+          if (this.map && this.map.getLayer("mapLayerId-" + x.MId)) {
+            this.map.removeLayer("mapLayerId-" + x.MId);
+          }
+        });
+      }
     },
     // 组装数据
     UpdateDatas(){
@@ -517,14 +525,9 @@ export default {
         this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
       } else {
         let MId = this.countriesData[index].MId;
-        if (this.map.getLayer("curve-layer-" + MId)) {
-          this.map.removeLayer("curve-layer-" + MId);
-          this.map.removeSource("curve-source-" + MId);
-        }
-        if (this.map && this.map.getLayer("world-layer-" + MId)) {
-          this.map.removeLayer("world-layer-" + MId);
-          // this.map.removeSource("word-source");
-        }
+        this.ClearSource('curve-layer-'+ MId,1)
+        this.ClearSource('curve-source-'+ MId,2)
+        this.ClearSource('world-layer-'+ MId,1)
         this.TripMapList.splice(index, 1);
         this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
       }
@@ -612,13 +615,15 @@ export default {
         err => {}
       );
     },
-    addCountryFillRange() {
-      let that = this
-      that.paintRbBgList = []
+    setPaintRbBgList(){
+      this.paintRbBgList = []
       for(let i=0;i<1000;i++){
-        let obj = [i, that.getRandomColor()]
-        that.paintRbBgList.push(obj)
+        let obj = [i, this.getRandomColor()]
+        this.paintRbBgList.push(obj)
       }
+    },
+    addCountryFillRange() {
+      let that = this
       this.countriesData.forEach((x, i) => {
         if (x.MName == "中国") x.MName = "中华人民共和国";
         if (x.MName == "韩国") x.MName = "大韩民国";
@@ -641,31 +646,7 @@ export default {
             "fill-opacity": 0.5
             }
           }else { source = "word-source-Korea";
-          paintBgObj = { //设置属性
-              "fill-color": [
-              "case",
-              ["==",["get","name"],"江原道"],that.getRandomColor(),
-              ["==",["get","name"],"京畿道"],that.getRandomColor(),
-              ["==",["get","name"],"庆尚南道"],that.getRandomColor(),
-              ["==",["get","name"],"庆尚北道"],that.getRandomColor(),
-              ["==",["get","name"],"全罗南道"],that.getRandomColor(),
-              ["==",["get","name"],"全罗北道"],that.getRandomColor(),
-              ["==",["get","name"],"忠清南道"],that.getRandomColor(),
-              ["==",["get","name"],"忠清北道"],that.getRandomColor(),
-              ["==",["get","name"],"光州广域市"],that.getRandomColor(),
-              ["==",["get","name"],"大邱广域市"],that.getRandomColor(),
-              ["==",["get","name"],"大田广域市"],that.getRandomColor(),
-              ["==",["get","name"],"釜山广域市"],that.getRandomColor(),
-              ["==",["get","name"],"首尔特别市"],that.getRandomColor(),
-              ["==",["get","name"],"蔚山广域市"],that.getRandomColor(),
-              ["==",["get","name"],"仁川广域市"],that.getRandomColor(),
-              ["==",["get","name"],"世宗特别自治市"],that.getRandomColor(),
-              ["==",["get","name"],"济州特别自治道"],that.getRandomColor(),
-              that.getRandomColor()
-              ],
-              "fill-outline-color": that.getRandomColor(),
-              "fill-opacity": 0.5
-            }
+            paintBgObj = that.paintHgBgObj
           }
         }
         this.map.addLayer({
@@ -675,12 +656,8 @@ export default {
           filter: ["==", "NAME_ZH", x.MName]
         });
         if(x.MId!=651&&x.MId!=891) {
-          if (this.map && this.map.getLayer("mapLayer-" + x.MId)) {
-            this.map.removeLayer("mapLayer-" + x.MId);
-          }
-          if (this.map && this.map.getLayer("mapLayerId-" + x.MId)) {
-            this.map.removeLayer("mapLayerId-" + x.MId);
-          }
+          that.ClearSource("mapLayer-" + x.MId,1)
+          that.ClearSource("mapLayerId-" + x.MId,1)
           this.map.setPaintProperty("world-layer-" + x.MId, "fill-color",[
             "match",
             ["get", "NAME_ZH"],
@@ -689,17 +666,12 @@ export default {
             ["rgba", 0, 122, 255, 0]
           ]);
         }else {
-          if (this.map.getLayer("world-layer-" + x.MId)) {
-            this.map.removeLayer("world-layer-" + x.MId);
-          }
+          that.ClearSource("world-layer-" + x.MId,1)
           this.map.addLayer({
             id: "mapLayer-"+ x.MId,
             type: "fill",
             source: source,
             filter: ["==", "NAME_ZH", x.MName],
-            // layout: {
-            //   'text-field': "{name}"
-            // }
           });
           this.map.addLayer({
             id: "mapLayerId-"+ x.MId,
@@ -710,9 +682,6 @@ export default {
         }
 
       });
-    },
-    getCityListColor(CityListAll){
-
     },
     clearCitiesMarkersHandler() {
       if (this.deviceMarkers && this.deviceMarkers.length > 0) {