no message

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

@@ -67,7 +67,8 @@
             <span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
           </div>
           <div style="margin-left: 20px;">
-            <span class="MapImgButtom setMapImg" @click="setLoading=true,getResultImg">生成图片</span>
+            <!-- setLoading=true, -->
+            <span class="MapImgButtom setMapImg" @click="getResultImg">生成图片</span>
           </div>
         </div>
       </div>
@@ -119,8 +120,18 @@ export default {
     };
   },
   watch: {
-    NationList: {
-      handler(val, oldVal) {},
+    citiesData: {
+      handler(val, oldVal) {
+        this.TripMapList.forEach(x => {
+          x.CityList.forEach(y=>{
+            this.citiesData.forEach(z=>{
+              if(y.MName==z.name&&y.PositionStr.Left){
+                z.PositionStr = JSON.parse(JSON.stringify(y.PositionStr))
+              }
+            })
+          })
+        })
+      },
       deep: true,
       immediate: false
     },
@@ -159,6 +170,7 @@ export default {
 
           this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
         }
+        console.log(this.TripMapList,'----TripMapList')
       },
       deep: true,
       immediate: true
@@ -190,13 +202,13 @@ export default {
         this.TripMapList[0].MName &&
         this.TripMapList[0].CityList.length > 0
       ) {
-        this.drawMap()
+        this.drawMap(1)
       }
     });
-    //this.addDocumentEventListener();
     },
     // 绘制地图
-    async drawMap(){
+    async drawMap(type){
+      console.log(type,'1初始化----  2数据更新')
       // 显示国家
       this.addCountryFillRange();
 
@@ -212,6 +224,21 @@ export default {
       this.addMarker(); //标记
       this.createLineHandler(); //连线
       await this.addCountriesMaker(); //标记国家
+      //this.addDocumentEventListener();
+    },
+    // 记录PositionStr
+    SavePositionStr(){
+      this.TripMapList.forEach(x=>{
+        x.CityList.forEach(y=>{
+          this.citiesData.forEach(z=>{
+            if(y.MName==z.name){
+              y.PositionStr = JSON.parse(JSON.stringify(z.PositionStr))
+            }
+          })
+        })
+      })
+      this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList))
+      // this.$forceUpdate()
     },
     // 导出地图片
     getResultImg() {
@@ -241,6 +268,19 @@ export default {
         return
         image.download = "map.png";
         image.click();
+        that.setLoading = false
+        that.deviceMarkers.forEach((x,index)=>{
+        var currentMarkerLngLat = x.getLngLat();
+        this.citiesData.forEach(y=>{
+          if(y.longitude!=currentMarkerLngLat.lng||y.latitude!=currentMarkerLngLat.lat){
+            y.PositionStr.Left = currentMarkerLngLat.lng
+            y.PositionStr.Right = currentMarkerLngLat.lat
+          }else{
+            y.PositionStr.Top = currentMarkerLngLat.lng
+            y.PositionStr.Bottom = currentMarkerLngLat.lat
+          }
+        })
+      })
       });
     },
     Cancel(){
@@ -287,12 +327,20 @@ export default {
       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)
 
+      console.log(this.citiesData,'=00000000-----')
       this.countries = [...new Set(listCountries)];
       this.clearCountriesMaker()
       this.countriesData = this.countriesData.filter(x=>this.countries.indexOf(x.MName)!=-1)
       this.countries = this.countries.filter(x=>this.countriesData.findIndex(y=>y.MName==x)==-1)
 
       this.TripMapList.forEach(x => {
+        x.CityList.forEach(y=>{
+          this.citiesData.forEach(z=>{
+            if(y.MName==z.name&&y.PositionStr.Left!=0){
+              z.PositionStr = JSON.parse(JSON.stringify(y.PositionStr))
+            }
+          })
+       })
         if (x.MId) {
           this.SearchCity(x.MId);
         }
@@ -304,7 +352,7 @@ export default {
         this.TripMapList[0].MName &&
         this.TripMapList[0].CityList.length > 0
       ) {
-        this.drawMap()
+        this.drawMap(2)
       }
     },
     // 获取国家
@@ -474,28 +522,51 @@ export default {
     },
     addMarker() {
       // let markerColor = calculateComplementaryColor("#71adeb");
+      // console.log(this.citiesData,'----00')
       this.citiesData.forEach((item, i) => {
         var marker = new mapboxgl.Marker({ color: "#d73b33", scale: 0.5 })
           .setLngLat([item.longitude, item.latitude])
           .addTo(this.map);
-        this.addLabel(item, i);
+        if(item.PositionStr.Left&&item.PositionStr.Right){
+          this.addLabel(item, i, item.PositionStr);
+        }else{
+          this.addLabel(item, i);
+        }
+
         this.deviceMarkers.push(marker);
       });
     },
-    addLabel(item, i) {
+    addLabel(item, i, PositionStr) {
+      let that = this
       let el = document.createElement("div");
       el.style.cursor = "pointer";
       // let html = `<div class='arror-box-map hide' id='marker_${i}' data-x-drift='${item
       //   .name.length *
       //   10}'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span><div>`;
       // html = `<div style='position:relative'><div>${item.name}</div>${html}</div>`;
+      // .setLngLat([item.PositionStr.Left?item.PositionStr.Left:item.longitude, item.PositionStr.Right?item.PositionStr.Right:item.latitude])
       el.innerHTML = item.name;
       var marker = new mapboxgl.Marker(el, {
         offset: [0, -25],
         draggable: true
       })
-        .setLngLat([item.longitude, item.latitude])
-        .addTo(this.map);
+      if(PositionStr){
+        marker.setLngLat([PositionStr.Left, PositionStr.Right])
+      }else{
+        marker.setLngLat([item.longitude, item.latitude])
+      }
+      // marker.setLngLat([item.PositionStr.Left?item.PositionStr.Left:item.longitude, item.PositionStr.Right?item.PositionStr.Right:item.latitude])
+      marker.addTo(this.map);
+        let currentMarkerLngLat = marker.getLngLat();
+        // that.citiesData[i].PositionStr.Left = currentMarkerLngLat.lng
+        // that.citiesData[i].PositionStr.Right = currentMarkerLngLat.lat
+        marker.on('dragend', function() {
+          currentMarkerLngLat = marker.getLngLat();
+          that.citiesData[i].PositionStr.Left = currentMarkerLngLat.lng
+          that.citiesData[i].PositionStr.Right = currentMarkerLngLat.lat
+          that.SavePositionStr()
+        });
+
       this.deviceMarkers.push(marker);
     },
     async getCoordinates(cityName) {
@@ -511,7 +582,14 @@ export default {
         const data = await response.json();
         if (data.features.length > 0) {
           const [longitude, latitude] = data.features[0].center;
-          this.citiesData.push({ name: cityName, longitude, latitude });
+          this.citiesData.push({ name: cityName, longitude, latitude,
+            PositionStr:{
+              Left: 0,
+              Top: 0,
+              Right: 0,
+              Bottom: 0,
+            }
+          });
         } else {
           this.coordinates = null;
           this.error = true;