江河点位修正

src/views/visualiz/water/lake/index.vue

@@ -25,6 +25,11 @@
     <mapNominal :param="nominalList"></mapNominal>
 <!--    <map-table-center :rowData="pointData"></map-table-center>-->
     <map-table :rowData="pointData"></map-table>
+    <a-modal @ok="updateCorrectLocation" :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+             v-model:visible="visibleRoadMap" :title="roadMapTitle"
+    >
+      <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -32,7 +37,8 @@ import {
   getLakePlace,
   getLakePlaceInnerCity,
   getLakeYear,
-  getInnerLakeYear
+  getInnerLakeYear,
+  updateLakeCorrectLocation
 } from "@/api/gis/gisApi";
 // import {
 //   getColumnOptions,
@@ -100,7 +106,11 @@ export default {
       value: '',
       result: [],
       searchKey: "",
-      searchId: -1
+      searchId: -1,
+      // 字典表单
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
+      form: {},
     };
   },
   mounted() {
@@ -255,6 +265,12 @@ export default {
           that.currentY = 0
           that.tipFlag = false
         },true)
+        myCompOverlay.addEventListener('contextmenu',function (e){
+          let currentId = e.target.getAttribute("id")
+          const {longitude, latitude, correctLng, correctLat,placeDictId} = that.pointData[currentId.substring(2, currentId.length)]
+          that.form = {longitude, latitude, correctLng, correctLat,placeDictId}
+          that.showRoadMap(that.form);
+        })
       })
     },
     whereChange(e) {
@@ -298,7 +314,10 @@ export default {
                   'regionLevel': item.regionLevel,
                   'longitude': item.longitude,
                   'latitude': item.latitude,
-                  'waterType' : item.waterType
+                  'waterType' : item.waterType,
+                  placeDictId: item.placeDictId,
+                  correctLng: item.correctLng,
+                  correctLat:item.correctLat
                 })
               })
             }
@@ -323,7 +342,10 @@ export default {
                   'regionLevel': item.regionLevel,
                   'longitude': item.longitude,
                   'latitude': item.latitude,
-                  'waterType' : item.waterType
+                  'waterType' : item.waterType,
+                  placeDictId: item.placeDictId,
+                  correctLng: item.correctLng,
+                  correctLat:item.correctLat
                 })
               })
             }
@@ -333,6 +355,83 @@ export default {
         })
       }
 
+    },
+    showRoadMap(form) {
+      const {longitude, latitude, correctLng, correctLat} = form
+      this.visibleRoadMap = true
+      // this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng ? correctLng : longitude ? longitude : 108.33, correctLat ? correctLat : latitude ? latitude : 22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
+          }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
+    updateCorrectLocation(){
+      const {correctLng, correctLat,placeDictId} =  that.form;
+      const reqData = {correctLng, correctLat,id:placeDictId};
+      console.log(that.form)
+      if(this.where.type == "0"){
+        reqData.type = "city"
+      }else{
+        reqData.type = "special"
+      }
+      updateLakeCorrectLocation(reqData).then(res=>{
+        if(res.data.code == 0){
+          this.visibleRoadMap = false
+          this.whereChange();
+        }
+      })
+
     }
   }
 }