no message

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

@@ -40,6 +40,7 @@
               </el-option>
             </el-select>
             <el-color-picker
+              v-if="x.MId!=651&&x.MId!=891"
               style="vertical-align: middle;"
               v-model="x.ColorStr"
               @change="getColorStr"
@@ -64,13 +65,13 @@
           <div>
             <span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
           </div>
-          <div style="margin-left: 20px;">
+          <!-- <div style="margin-left: 20px;">
             <span
               class="MapImgButtom setMapImg"
               @click="SavePositionStr"
               >保存坐标</span
             >
-          </div>
+          </div> -->
           <div style="margin-left: 20px;">
             <span
               class="MapImgButtom setMapImg"
@@ -241,7 +242,7 @@ export default {
 
           this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
         }
-        // console.log(this.TripMapList, "----TripMapList");
+        console.log(this.TripMapList, "----TripMapList");
       },
       deep: true,
       immediate: true
@@ -263,7 +264,7 @@ export default {
         zoom: 6,
         preserveDrawingBuffer: true
       });
-      this.map.on("load", async () => {
+      this.map.on("style.load", async () => {
         this.map.addSource("word-source", {
           type: "geojson",
           data: worldGeoJSON,
@@ -300,6 +301,35 @@ export default {
         this.drawMap(2);
       }
     },
+    // 绘制地图
+    async drawMap(type) {
+      console.log(type, "1初始化----  2数据更新");
+      // 显示国家
+      this.addCountryFillRange();
+
+      // 获取坐标信息
+      await this.calcCitiesGeoInfoHandler();
+      // 可见范围
+      const bounds = new mapboxgl.LngLatBounds();
+      this.citiesData.forEach(city => {
+        bounds.extend([city.longitude, city.latitude]);
+      });
+      this.map.fitBounds(bounds,{
+        padding: 150, // 可选：在地图边界周围添加一些内边距
+      });
+      if(this.countriesData&&this.countriesData.length>0&&this.countriesData.length==1){
+        this.map.setCenter(bounds.getCenter());
+      }
+      // 更新数据时再标记
+      if(type==2){
+        this.addMarker(); //标记
+      }
+      this.createLineHandler(); //连线
+      await this.addCountriesMaker(); //标记国家
+
+      //this.addDocumentEventListener();
+    },
+
     // 组装数据
     UpdateDatas(){
       let listCity = [];
@@ -337,6 +367,8 @@ export default {
       this.citys = this.citys.filter(
         x => this.citiesData.findIndex(y => y.name == x) == -1
       );
+      // console.log(this.citys,'-----222')
+      // console.log(this.citiesData,'-----111')
 
       this.countries = [...new Set(listCountries)];
       this.clearCountriesMaker();
@@ -372,7 +404,7 @@ export default {
     // 清除已有源
     ClearSource(Id,type){
       if(type){
-        if(this.map.getLayer(Id)) {
+        if(this.map&&this.map.getLayer(Id)) {
           this.map.removeLayer(Id);
           if(type==2) this.map.removeSource(Id);
         }
@@ -397,30 +429,6 @@ export default {
       }
     },
 
-    // 绘制地图
-    async drawMap(type) {
-      console.log(type, "1初始化----  2数据更新");
-      // 显示国家
-      this.addCountryFillRange();
-
-      // 获取坐标信息
-      await this.calcCitiesGeoInfoHandler();
-      // 可见范围
-      const bounds = new mapboxgl.LngLatBounds();
-      this.citiesData.forEach(city => {
-        bounds.extend([city.longitude, city.latitude]);
-      });
-      this.map.fitBounds(bounds,{
-        padding: 150, // 可选：在地图边界周围添加一些内边距
-      });
-      if(this.countriesData&&this.countriesData.length>0&&this.countriesData.length==1){
-        this.map.setCenter(bounds.getCenter());
-      }
-      this.addMarker(); //标记
-      this.createLineHandler(); //连线
-      await this.addCountriesMaker(); //标记国家
-      //this.addDocumentEventListener();
-    },
     // 保存标记坐标
     SavePositionStr() {
       this.TripMapList.forEach(x => {
@@ -652,7 +660,7 @@ export default {
             paintBgObj = that.paintHgBgObj
           }
         }
-        this.map.addLayer({
+        this.map&&this.map.addLayer({
           id: "world-layer-" + x.MId,
           type: "fill",
           source: source,
@@ -661,7 +669,7 @@ export default {
         if(x.MId!=651&&x.MId!=891) {
           that.ClearSource("mapLayer-" + x.MId,1)
           that.ClearSource("mapLayerId-" + x.MId,1)
-          this.map.setPaintProperty("world-layer-" + x.MId, "fill-color",[
+          this.map&&this.map.setPaintProperty("world-layer-" + x.MId, "fill-color",[
             "match",
             ["get", "NAME_ZH"],
             x.name,
@@ -670,13 +678,13 @@ export default {
           ]);
         }else {
           that.ClearSource("world-layer-" + x.MId,1)
-          this.map.addLayer({
+          this.map&&this.map.addLayer({
             id: "mapLayer-"+ x.MId,
             type: "fill",
             source: source,
             filter: ["==", "NAME_ZH", x.name],
           });
-          this.map.addLayer({
+          this.map&&this.map.addLayer({
             id: "mapLayerId-"+ x.MId,
             type: "fill",
             source: source,
@@ -686,6 +694,29 @@ export default {
 
       });
     },
+    // 编辑国家和城市
+    async EditCountryCity(end){
+      const query = await fetch(
+        `https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`,
+        { method: 'GET' }
+      );
+      const json = await query.json();
+      const data = json.routes[0];
+      const route = data.geometry.coordinates;
+      const geojson = {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: route
+        }
+      };
+      this.countriesData.forEach((x, i) => {
+        if (this.map.getSource('world-layer-'+x.MId)) {
+          this.map.getSource('route').setData(geojson);
+        }
+      })
+    },
     clearCitiesMarkersHandler() {
       if (this.deviceMarkers && this.deviceMarkers.length > 0) {
         this.deviceMarkers.forEach(x => {
@@ -696,17 +727,16 @@ 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);
+          console.log(item.Lng,'=====')
         if (item.Lng && item.Lat) {
           this.addLabel(item, i, item);
         } else {
           this.addLabel(item, i);
         }
-
         this.deviceMarkers.push(marker);
       });
     },
@@ -729,6 +759,7 @@ export default {
         let currentMarkerLngLat = marker.getLngLat();
         that.citiesData[i].Lng = currentMarkerLngLat.lng;
         that.citiesData[i].Lat = currentMarkerLngLat.lat;
+        that.SavePositionStr()
       });
 
       this.deviceMarkers.push(marker);
@@ -746,7 +777,8 @@ export default {
         const data = await response.json();
         if (data.features.length > 0) {
           const [longitude, latitude] = data.features[0].center;
-          this.citiesData.push({
+          let tempI = this.citiesData.findIndex(y=>y.name==cityName)
+          if(tempI==-1) this.citiesData.push({
             name: cityName,
             longitude,
             latitude,
@@ -771,6 +803,7 @@ export default {
     },
     createLineHandler() {
       // let poilines = this.pois.split(",");
+      let that = this
       this.listCity.forEach((p, i) => {
         if (i < this.listCity.length - 1) {
           let x = this.citiesData.find(x => x.name == p.MName);
@@ -794,11 +827,11 @@ export default {
               }
             ]
           };
-          this.map.addSource("curve-source-" + p.MId, {
+          that.map&&that.map.addSource("curve-source-" + p.MId, {
             type: "geojson",
             data: geojson
           });
-          this.map.addLayer({
+          that.map&&that.map.addLayer({
             id: "curve-layer-" + p.MId,
             type: "line",
             source: "curve-source-" + p.MId,
@@ -923,6 +956,7 @@ export default {
               TripMapList = that.TripMapList.filter(y=> y.MName==x.MName)
               TripMapList[0].Lng = currentMarkerLngLat.lng;
               TripMapList[0].Lat = currentMarkerLngLat.lat;
+              that.SavePositionStr()
             });
             this.countriesMarkers.push(marker);
           }