注释

src/views/responseManagement/userResponse/index.vue

@@ -130,9 +130,9 @@
       </el-container>
       <el-container style="margin-top: 2%;margin-bottom: 2%;" v-if="state.radio==='1'?true:false">
         <span style="line-height: 35px;"> Latitude：</span>
-        <el-input v-model="input" placeholder="请输入内容" style="height:35px;margin-right: 1%;"></el-input>
+        <el-input placeholder="请输入内容" style="height:35px;margin-right: 1%;" v-model="state.dislat"></el-input>
         <span style="line-height: 35px;">Longitude：</span>
-        <el-input v-model="input" placeholder="请输入内容" style="height:35px;"></el-input>
+        <el-input  placeholder="请输入内容" style="height:35px;" ></el-input>
       </el-container>
       <Map style="height:350px ; width:100% ;margin-bottom: 10px;" ref="map"></Map>
       <el-form-item label="Disaster Time">
@@ -156,7 +156,7 @@
 </template>
 
 <script  setup name="userResponse">
-import { reactive, onMounted, ref, nextTick } from 'vue';
+import { reactive, onMounted, ref, nextTick,watchEffect } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
@@ -167,7 +167,7 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import 'leaflet-draw/dist/leaflet.draw'
 import 'leaflet-draw/dist/leaflet.draw.css'
-const map = ref(null);
+const map = ref();
 const activeName = ref('first');
 
 const handleClick = (tab, event) => {
@@ -196,6 +196,8 @@ const state = reactive({
   selectName: 'first',
   edit: {},
   radio:null,
+  dislat:'',
+  dislon:''
 });
 // 初始化表格数据
 const getTableData = () => {
@@ -253,12 +255,75 @@ const onHandleCurrentChange = (val) => {
   state.tableData.param.pageNum = val;
   getTableData();
 };
+const onMapClick = (e) => {
+  state.lat = e.latlng.lat.toFixed(3);
+  state.lon = e.latlng.lng.toFixed(3);
+  map.value.mapOperations.addInteractMarker(state.lat, state.lon)
+}
+const changelatlon = (e) => {
+
+state.dislat = e.latlng.lat.toFixed(3);
+state.dislon = e.latlng.lng.toFixed(3);
+// state.lon = state.lon % 360;
+// if (state.lon < 0) {
+//   state.lon = state.lon + 360;
+// }
+// state.lon = state.lon.toFixed(3);
+if (state.dislat < 0) {
+  state.dislat = String(Math.abs(state.dislat)) + "°S"
+}
+else {
+  state.dislat = String(state.dislat) + "°N"
+}
+
+if (state.dislon <= 180 && state.dislon >= 0) {
+  state.dislon = String(Math.abs(state.dislon)) + "°E"
+}
+else if (state.dislon > 180 && state.dislon <= 360) {
+  state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+}
+else if (state.dislon < 0) {
+  let n = Math.floor(state.dislon / 360)
+  state.dislon = (state.dislon - n * 360).toFixed(3)
+  if (state.dislon <= 180 && state.dislon >= 0) {
+    state.dislon = String(Math.abs(state.dislon)) + "°E"
+  }
+  else if (state.dislon > 180 && state.dislon <= 360) {
+    state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+  }
+}
+else if (state.dislon > 360) {
+  let n = Math.floor(state.dislon / 360)
+  state.dislon = (state.dislon - n * 360).toFixed(3)
+  if (state.dislon <= 180 && state.dislon >= 0) {
+    state.dislon = String(Math.abs(state.dislon)) + "°E"
+  }
+  else if (state.dislon > 180 && state.dislon <= 360) {
+    state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+  }
+}
+
+}
 // 页面加载时
 onMounted(() => {
   getTableData();
   getDictionary({ code: 'disaster' }).then((res) => {
     state.disasterTypeList = res;
   });
+  watchEffect(() => {
+    if (state.radio== "1") {      
+      // map.value.mapOperations.on("click", onMapClick)
+      // map.value.mapOperations.clearPolygon()     
+      // map.value.mapOperations.on("mousemove", changelatlon)
+      // variableStore.polygoncontrol = "option1"
+    }
+    else {      
+      // map.value.mapOperations.off("click", onMapClick)
+      // map.value.mapOperations.drawPolygon()
+      // map.value.mapOperations.drawCreated()
+      // variableStore.polygoncontrol = "option2"
+    }
+  })
 });
 const getValue = (key) => {
   //返回state.disasterTypeLis 对应的value