diff --git a/src/views/responseManagement/userResponse/index.vue b/src/views/responseManagement/userResponse/index.vue index a3a79b6..51cf1dc 100644 --- a/src/views/responseManagement/userResponse/index.vue +++ b/src/views/responseManagement/userResponse/index.vue @@ -1,196 +1,375 @@ @@ -200,7 +379,7 @@ import en from 'element-plus/dist/locale/en.mjs' import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent } from 'vue'; import { ElMessageBox, ElMessage } from 'element-plus'; import { getList, review, responseEndedDisasterInfo } from '/@/api/disasterInfo/index'; -import { getDictionary,getList as getListNew } from '/@/api/system/dictbiz'; +import { getDictionary, getList as getListNew } from '/@/api/system/dictbiz'; import { useVariableStore } from '/@/stores/index.ts' //引入地图 import Map from '/@/components/Map.vue'; @@ -276,6 +455,8 @@ const state = reactive({ radio: null, dislat: '', dislon: '', + popupLat: null, + popupLon: null, wktPoint_Poly: undefined }); // 初始化表格数据 @@ -306,36 +487,68 @@ const onOpenEditRole = (type, row) => { //深拷贝 state.edit = JSON.parse(JSON.stringify(row)); state.dialogVisible = true; - setTimeout(() => { - state.radio = "1" - // mapRef.value.mapOperations.removeAll() - //赋值地图范围，并且可以修改点或者区域 - if (state.wktPoint_Poly) { - mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly) - } - state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry) - mapEvents('1') - }, 100); + if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'Point') { + setTimeout(() => { + state.radio = "1" + // mapRef.value.mapOperations.removeAll() + //赋值地图范围，并且可以修改点或者区域 + if (state.wktPoint_Poly) { + mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly) + } + state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry) + mapEvents('1') + }, 100); + } + else if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'POLYGON') { + setTimeout(() => { + state.radio = "2" + // mapRef.value.mapOperations.removeAll() + //赋值地图范围，并且可以修改点或者区域 + // if (state.wktPoint_Poly) { + // mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly) + // } + mapRef.value.mapOperations.wktParseToMap(row.geometry) + mapEvents('2') + }, 100); + } }; + +const manualCoordinate = () => { + const disLatLen = state.dislat.length + const disLonLen = state.dislon.length + const editLat = state.dislat.substring(0, disLatLen - 2) + const editLon = state.dislon.substring(0, disLonLen - 2) + mapRef.value.mapOperations.addInteractMarker(editLat, editLon) +} + const mapEvents = (ev) => { if (ev == '1') { // mapRef.value.mapOperations.clearPolygon() - mapRef.value.mapOperations.on("click", mapClick) - mapRef.value.mapOperations.on("mousemove", changelatlon) - mapRef.value.mapOperations.clearPolygon() - - } else if (ev == '2') { + state.popupLat = null + state.popupLon = null mapRef.value.mapOperations.off("click", mapClick); - mapRef.value.mapOperations.drawPolygon() + mapRef.value.mapOperations.off("mousemove", showLatLon) + mapRef.value.mapOperations.clearPolygon() + ev == '' + } + else if (ev == '2') { + mapRef.value.mapOperations.off("click", mapClick); + mapRef.value.mapOperations.off("mousemove", showLatLon) // mapRef.value.mapOperations.drawPolygon() // mapRef.value.mapOperations.drawCreated() - + ev == '' } - else { + else if (ev == '3') { + mapRef.value.mapOperations.on("click", mapClick) + mapRef.value.mapOperations.on("mousemove", showLatLon) mapRef.value.mapOperations.Edit() + ev == '' + } }; const ClearSubmit = () => { + state.dislat = '' + state.dislon = '' setTimeout(() => { mapRef.value.mapOperations.removeAll() variableStore.wktdata = null @@ -344,10 +557,12 @@ const ClearSubmit = () => { }, 100) } const mapClick = (res) => { - // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly ) - changelatlon(res); + // // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly ) + // mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3)) + // // console.log(state.wktPoint_Poly) + state.dislat = changeLat(res.latlng.lat.toFixed(3)) + state.dislon = changeLon(res.latlng.lng.toFixed(3)) mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3)) - // console.log(state.wktPoint_Poly) } const reviews = (index) => { //将修改后的地图位置赋值到state.edit.geometry @@ -378,48 +593,51 @@ const onHandleCurrentChange = (val) => { state.tableData.param.pageNum = val; getTableData(); }; -const changelatlon = (e) => { - //深拷贝e - state.dislat = e.latlng.lat.toFixed(3); - state.dislon = e.latlng.lng.toFixed(3); - // 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" + +// 调整纬度 +const changeLat = (lat) => { + if (lat < 0) { + lat = String(Math.abs(lat)) + "°S" } else { - state.dislat = String(state.dislat) + "°N" + lat = String(lat) + "°N" } - - if (state.dislon <= 180 && state.dislon >= 0) { - state.dislon = String(Math.abs(state.dislon)) + "°E" + return lat +} +// 调整经度 +const changeLon = (lon) => { + if (lon <= 180 && lon >= 0) { + lon = String(Math.abs(lon)) + "°E" } - else if (state.dislon > 180 && state.dislon <= 360) { - state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" + else if (lon > 180 && lon <= 360) { + lon = String((360 - lon).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 (lon < 0) { + let n = Math.floor(lon / 360) + lon = (lon - n * 360).toFixed(3) + if (lon <= 180 && lon >= 0) { + lon = String(Math.abs(lon)) + "°E" } - else if (state.dislon > 180 && state.dislon <= 360) { - state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" + else if (lon > 180 && lon <= 360) { + lon = String((360 - lon).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 (lon > 360) { + let n = Math.floor(lon / 360) + lon = (lon - n * 360).toFixed(3) + if (lon <= 180 && lon >= 0) { + lon = String(Math.abs(lon)) + "°E" } - else if (state.dislon > 180 && state.dislon <= 360) { - state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" + else if (lon > 180 && lon <= 360) { + lon = String((360 - lon).toFixed(3)) + "°W" } } - + return lon +} +// 展示鼠标指针经纬度 +const showLatLon = (e) => { + state.popupLat = changeLat(e.latlng.lat.toFixed(3)) + state.popupLon = changeLon(e.latlng.lng.toFixed(3)) } // 页面加载时 onMounted(() => { @@ -437,27 +655,35 @@ const getValue = (key) => { };