From 41435dee6377577ede11ae0f1707047a1ef34ea8 Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Thu, 15 Jun 2023 18:24:41 +0800
Subject: [PATCH] =?UTF-8?q?zqq:=E5=9C=B0=E5=9B=BE=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map.vue                        |  79 +++--
 .../components/searchCondition.vue            | 335 +++++++++++-------
 2 files changed, 251 insertions(+), 163 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index a922f2a..d801e7e 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,9 +1,10 @@
 <template>
-  <div ref="map" class="container"></div>
+  <div ref="map"
+       class="container"></div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import WKT from 'terraformer-wkt-parser'
 import * as turf from '@turf/turf'
 import L from 'leaflet'
@@ -13,10 +14,11 @@ import 'leaflet-draw/dist/leaflet.draw.css'
 import '@geoman-io/leaflet-geoman-free';
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
 import 'Leaflet-ImageOverlay-Rotated'
-import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
-import 'leaflet-control-geocoder';
+// import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
+// import 'leaflet-control-geocoder';
 import { useVariableStore } from '/@/stores/index.ts'
 import * as omnivore from '@mapbox/leaflet-omnivore'
+import axios from "axios";
 const variableStore = useVariableStore()
 const map = ref()
 let homeMap = null
@@ -24,6 +26,9 @@ let featureLayerG_area = null
 let featureLayerG_point = null
 let layerRectangle = null
 
+const state = reactive({
+  markerLayer: null
+})
 
 onMounted(() => {
   homeMap = L.map(map.value, {
@@ -31,7 +36,7 @@ onMounted(() => {
     crs: L.CRS.EPSG4326,
     center: [29.563761, 106.550464],
     zoom: 3,
-    minZoom: 1,
+    minZoom: 3,
     maxZoom: 18,
     attributionControl: false, // 移除右下角leaflet标识
     zoomControl: false,
@@ -49,32 +54,32 @@ onMounted(() => {
 
   featureLayerG_area = L.layerGroup().addTo(homeMap)
   featureLayerG_point = L.layerGroup().addTo(homeMap)
-  // 'http://t0.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='
-  // const CIA_C = "http://t0.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
-  // const nameLayer =  L.tileLayer(CIA_C + TK_KEY, {
-  //     maxZoom: 20,
-  //     tileSize: 256,
-  //     zoomOffset: 1
-  // }).addTo(homeMap);
-
-  // 创建Geocoding控件
-  const geocoder = L.Control.geocoder({
-    defaultMarkGeocode: false,
-    placeholder: 'Enter address...',
-    collapsed: true,
+  'http://t0.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='
+  const CIA_C = "http://t0.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
+  const nameLayer = L.tileLayer(CIA_C + TK_KEY, {
+    maxZoom: 20,
+    tileSize: 256,
+    zoomOffset: 1
   }).addTo(homeMap);
 
-  // 监听Geocoding控件的结果事件
-  geocoder.on('markgeocode', function (event) {
-    const result = event.geocode || {};
-    onGeocodeResult(result);
-  });
+  //   // 创建Geocoding控件
+  //   const geocoder = L.Control.geocoder({
+  //     defaultMarkGeocode: false,
+  //     placeholder: 'Enter address...',
+  //     collapsed: true,
+  //   }).addTo(homeMap);
+
+  //   // 监听Geocoding控件的结果事件
+  //   geocoder.on('markgeocode', function (event) {
+  //     const result = event.geocode || {};
+  //     onGeocodeResult(result);
+  //   });
 
 })
-const onGeocodeResult = (result) => {
-  homeMap.setView(result.center, 5);
-  L.marker(result.center).addTo(homeMap);
-}
+// const onGeocodeResult = (result) => {
+//   homeMap.setView(result.center, 5);
+//   L.marker(result.center).addTo(homeMap);
+// }
 
 /** WKT加载点和多边形
    * Object param 参数集合
@@ -309,7 +314,6 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-
   },
   /**
    * 清楚wkt添加的所有
@@ -425,6 +429,25 @@ const mapOperations = {
   },
   removeEdit: () => {
     homeMap.pm.toggleGlobalRemovalMode();
+  },
+  //   地理编码检索
+  addressSelect: (keyWord) => {
+    if (state.markerLayer) {
+      homeMap.removeLayer(state.markerLayer)
+    }
+
+    let addressServer = 'http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"' + keyWord + '"}&tk=dc8182ebeca998e22154d404aa3c0c17'
+
+    const service = axios.get(addressServer).then(res => {
+      homeMap.flyTo(L.latLng([res.data.location.lat, res.data.location.lon]), 6)
+      const markerParam = {
+        'x': res.data.location.lat,
+        'y': res.data.location.lon
+      }
+      state.markerLayer = L.marker(
+        new L.latLng(res.data.location.lat, res.data.location.lon),
+      ).addTo(homeMap)
+    })
   }
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
diff --git a/src/views/dataService/remoteSensingData/components/searchCondition.vue b/src/views/dataService/remoteSensingData/components/searchCondition.vue
index 3571a62..ecb9c17 100644
--- a/src/views/dataService/remoteSensingData/components/searchCondition.vue
+++ b/src/views/dataService/remoteSensingData/components/searchCondition.vue
@@ -11,16 +11,21 @@
             <p style="color: #aa4434;">Disaster time: {{ state.data.disasterTime }}</p>
             <p style="color: #878787; ">Disaster Country: {{ state.data.disasterCountry }}</p>
           </el-card>
-          <el-card class="box-card" style="margin-top: 3%;">
+          <el-card class="box-card"
+                   style="margin-top: 3%;">
             <span>Select time range</span>
             <el-row class="block">
               <el-col :span="5">
                 <span class="demonstration">Start time</span>
               </el-col>
               <el-col :span="19">
-                <el-date-picker style="width: 90%;" v-model="state.startTime" type="datetime"
-                  placeholder="Select start time" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts"
-                  :disabled-date="disabledDate" />
+                <el-date-picker style="width: 90%;"
+                                v-model="state.startTime"
+                                type="datetime"
+                                placeholder="Select start time"
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts"
+                                :disabled-date="disabledDate" />
               </el-col>
             </el-row>
             <el-row class="block">
@@ -28,20 +33,28 @@
                 <span class="demonstration">End time</span>
               </el-col>
               <el-col :span="19">
-                <el-date-picker style="width: 90%;" v-model="state.endTime" type="datetime" placeholder="Select end time"
-                  value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts" :disabled-date="disabledDate" />
+                <el-date-picker style="width: 90%;"
+                                v-model="state.endTime"
+                                type="datetime"
+                                placeholder="Select end time"
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts"
+                                :disabled-date="disabledDate" />
               </el-col>
             </el-row>
           </el-card>
 
-          <el-card class="box-card" style="margin-top: 3%;">
-            <span>Select a region  <el-switch
-                                      v-model="state.switch"
-                                      size="large"
-                                      active-text="Area"
-                                      inactive-text="Polygon"
-                                    /></span>
-            <el-scrollbar wrap-class="list" view-class="view-box" :native="false">
+          <el-card class="box-card"
+                   style="margin-top: 3%;">
+            <span>Select a region
+              <el-switch v-model="state.switch"
+                         size="large"
+                         active-text="Area"
+                         inactive-text="Polygon" />
+            </span>
+            <el-scrollbar wrap-class="list"
+                          view-class="view-box"
+                          :native="false">
               <div v-for="(coordinate, i) in   state.coordinateList  ">
                 <el-row class="coordinateContainer">
                   <el-col :span="1"></el-col>
@@ -51,36 +64,52 @@
                       parseFloat(coordinate.Lng).toFixed(4)
                     }}</span>
                   </el-col>
-                  <el-col :span="2">
-                    <el-button class="el-icon" @click="editCoordinate" size="small">
+                  <!-- <el-col :span="2">
+                    <el-button class="el-icon"
+                               @click="editCoordinate"
+                               size="small">
                       <ele-Edit />
                     </el-button>
-                  </el-col>
+                  </el-col> -->
                   <el-col :span="2">
-                    <el-button class="el-icon" @click="state.coordinateList.splice(i, 1);" size="small">
+                    <el-button class="el-icon"
+                               @click="state.coordinateList.splice(i, 1);"
+                               size="small">
                       <ele-Delete />
                     </el-button>
                   </el-col>
                 </el-row>
               </div>
+              <div v-if="state.switch==false">
+                {{variableStore.layerGroupPoly}}
+              </div>
             </el-scrollbar>
             <el-row>
               <el-col :span=" 1 "></el-col>
               <el-col :span=" 7 ">
-                <el-button class="coordinateBtn" @click=" addCoordinate ">Add coordinates</el-button>
+                <el-button class="coordinateBtn"
+                           @click=" addCoordinate ">Add coordinates</el-button>
               </el-col>
               <el-col :span=" 7 ">
-                <el-button class="coordinateBtn" @click=" clearCoordinate ">Clear coordinates</el-button>
+                <el-button class="coordinateBtn"
+                           @click=" clearCoordinate ">Clear coordinates</el-button>
               </el-col>
             </el-row>
 
           </el-card>
 
-          <el-card class="box-card" style="margin-top: 3%;">
+          <el-card class="box-card"
+                   style="margin-top: 3%;">
             <span>Select satellite type</span>
-            <el-tree-select class="satelliteSelect" v-model=" state.satelliteSelected " :data=" state.sensor " multiple
-              collapse-tags collapse-tags-tooltip :render-after-expand=" false " show-checkbox
-              placeholder="Select satellite type" />
+            <el-tree-select class="satelliteSelect"
+                            v-model=" state.satelliteSelected "
+                            :data=" state.sensor "
+                            multiple
+                            collapse-tags
+                            collapse-tags-tooltip
+                            :render-after-expand=" false "
+                            show-checkbox
+                            placeholder="Select satellite type" />
           </el-card>
 
           <!-- <el-card class="box-card"
@@ -98,29 +127,45 @@
           </el-card> -->
           <el-card style="margin-top:3%;">
             <el-row>
-                <el-button class="lowerBtn" @click=" startCrawl ">Start Crawl</el-button>
+              <el-button class="lowerBtn"
+                         @click=" startCrawl ">Start Crawl</el-button>
             </el-row>
             <el-row>
-                <el-button class="lowerBtn" @click=" ClearCondition ">Go Back</el-button>
+              <el-button class="lowerBtn"
+                         @click=" ClearCondition ">Go Back</el-button>
             </el-row>
+
           </el-card>
         </div>
       </el-col>
       <el-col :span=" 16 ">
-        <Map id="map" ref="map">
+        <Map id="map"
+             ref="map">
         </Map>
       </el-col>
+    </el-row>
 
+    <el-row class="addressGroup">
+      <el-input v-model="state.address"
+                placeholder="Please input location"
+                class="input-with-select"
+                clearable>
+        <template #append>
+          <el-button :icon="Search"
+                     @click="addressSelect" />
+        </template>
+      </el-input>
     </el-row>
   </div>
 </template>
   
 <script setup>
 import Map from "/@/components/Map.vue";
-import { ref, reactive, watch, defineExpose, onMounted,defineEmits } from 'vue';
-import { rs, submit ,rs2  } from '/@/api/crawl/index';
+import { ref, reactive, watch, defineExpose, onMounted, defineEmits } from 'vue';
+import { rs, submit, rs2 } from '/@/api/crawl/index';
 import { useUserInfo } from '/@/stores/userInfo';
 import { ElMessage, ElMessageBox } from "element-plus";
+import { Search } from '@element-plus/icons-vue'
 import { useVariableStore } from '/@/stores/index.ts';
 import { getList as BizDict } from "/@/api/system/dictbiz.js";
 const variableStore = useVariableStore();
@@ -131,8 +176,9 @@ const disabledDate = (time) => {
 }
 // 初始化数据
 const map = ref()
+
 const state = reactive({
-  switch:true,
+  switch: true,
   startTime: '',
   endTime: '',
   addCoord: false,
@@ -149,7 +195,7 @@ const state = reactive({
       label: 'Sentinel',
     },
   ],
-  dictData:[],
+  dictData: [],
   shortcuts: [
     {
       text: '1 month ago',
@@ -202,24 +248,25 @@ const state = reactive({
   disLat: '',
   disLon: '',
   data: {},
-  data2:[],
+  data2: [],
   geometry: null,
+  address: '',
 })
 //获取所有卫星类型
 onMounted(() => {
   BizDict({ code: 'satelliteType' }).then(res => {
-    let data =  res.map(item=>{
-      return {value:item.dictValue,label:item.dictValue}
+    let data = res.map(item => {
+      return { value: item.dictValue, label: item.dictValue }
     })
-    state.data2=data;
+    state.data2 = data;
     //初始化加载根据state.switch判断，当时true的时候加载 landsat、Sentinel。否者加载出这两个以外所有内容
-    if(state.switch){
-      state.sensor=state.data2.filter(item=>{
-        return item.value=='landsat'||item.value=='sentinel'
+    if (state.switch) {
+      state.sensor = state.data2.filter(item => {
+        return item.value == 'landsat' || item.value == 'sentinel'
       })
-    }else{
-      state.sensor=state.data2.filter(item=>{
-        return item.value!='landsat'&&item.value!='sentinel'
+    } else {
+      state.sensor = state.data2.filter(item => {
+        return item.value != 'landsat' && item.value != 'sentinel'
       })
     }
     state.dictData = res;
@@ -276,14 +323,12 @@ const changeLatLon = (e) => {
       state.disLon = String((360 - state.disLon).toFixed(3)) + "°W"
     }
   }
-
 }
 
-
 // 添加坐标点
 const addCoordinate = () => {
   state.addCoord = !state.addCoord;
-  if(state.switch){
+  if (state.switch) {
     if (state.addCoord && state.coordinateList.length <= 2) {
       map.value.mapOperations.drawRectangle()
       map.value.mapOperations.on("click", onMapClick)
@@ -293,13 +338,13 @@ const addCoordinate = () => {
       map.value.mapOperations.off("click", onMapClick)
       document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
     }
-  }else{
-      map.value.mapOperations.drawCreated()
-     
-      map.value.mapOperations.off("click", onMapClick)
-      map.value.mapOperations.drawPolygon()
-      map.value.mapOperations.wktParseToMap(state.geometry)
-      
+  } else {
+    map.value.mapOperations.drawCreated()
+
+    map.value.mapOperations.off("click", onMapClick)
+    map.value.mapOperations.drawPolygon()
+    map.value.mapOperations.wktParseToMap(state.geometry)
+
   }
 
 }
@@ -308,7 +353,7 @@ const mapClick = (res) => {
 }
 // 清空坐标点
 const clearCoordinate = () => {
-  if(!state.switch){
+  if (!state.switch) {
     map.value.mapOperations.clearPolygon()
     return;
   }
@@ -333,68 +378,68 @@ const startCrawl = () => {
     ElMessage.error("Please select the search end time")
     return;
   }
-  if ((state.coordinateList.length == 0 || !state.coordinateList[0].Lat || !state.coordinateList[0].Lng || !state.coordinateList[1].Lat || !state.coordinateList[1].Lng)&&state.switch) {
+  if ((state.coordinateList.length == 0 || !state.coordinateList[0].Lat || !state.coordinateList[0].Lng || !state.coordinateList[1].Lat || !state.coordinateList[1].Lng) && state.switch) {
     ElMessage.error("Please draw the area on the map")
     return;
   }
-  if(!state.switch&&variableStore.layerGroupPoly==null){
+  if (!state.switch && variableStore.layerGroupPoly == null) {
     ElMessage.error("Please draw the area on the map")
     return;
   }
 
 
-  var ranges =state.switch? state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng:variableStore.layerGroupPoly;
+  var ranges = state.switch ? state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng : variableStore.layerGroupPoly;
   var param = []
-  
-  state.satelliteSelected.forEach(data=>{
+
+  state.satelliteSelected.forEach(data => {
 
     // state.dictData.ma
-    var obj = state.dictData.find(function(item) {
+    var obj = state.dictData.find(function (item) {
       return item.dictValue === data;
     });
-    param.push( {
-        type: obj.dictKey,
-        startDate: state.startTime,
-        endDate: state.endTime,
-        manageId: userInfo.userInfos.id,
-        range:ranges,
-        status: 0,
-        disasterId: state.data.disasterId,
+    param.push({
+      type: obj.dictKey,
+      startDate: state.startTime,
+      endDate: state.endTime,
+      manageId: userInfo.userInfos.id,
+      range: ranges,
+      status: 0,
+      disasterId: state.data.disasterId,
     })
   })
   //提交后台数据
-  submit( param ).then(ret => {
-    let arrParams=[];
-    ret.forEach(res=>{
-      var obj1 = state.dictData.find(function(item) {
-          return item.dictKey == res.type;
+  submit(param).then(ret => {
+    let arrParams = [];
+    ret.forEach(res => {
+      var obj1 = state.dictData.find(function (item) {
+        return item.dictKey == res.type;
       });
       arrParams.push({
-        type:obj1.dictValue,
-        range:res.range,
-        id:res.id
+        type: obj1.dictValue,
+        range: res.range,
+        id: res.id
       })
     })
     //调用爬虫服务
-    rs2(state.data.disasterId,arrParams,state.startTime,state.endTime).then(res => {
+    rs2(state.data.disasterId, arrParams, state.startTime, state.endTime).then(res => {
       //获取arrParams中的type 使用，分割
-      var typeArr=[];
-      arrParams.forEach(item=>{
+      var typeArr = [];
+      arrParams.forEach(item => {
         typeArr.push(item.type)
       })
-      var typeStr=typeArr.join('、')
+      var typeStr = typeArr.join('、')
+
+      // getData();
+      //使用英语询问是否停留在当前页，还是返回到列表页
+      ElMessageBox.confirm('The ' + typeStr + ' data has been crawled, do you want to stay on this page?', 'Prompt', {
+        confirmButtonText: 'Stay',
+        cancelButtonText: 'Return to the list',
+        type: 'warning'
+      }).then(() => {
+      }).catch(() => {
+        emit('response')
+      });
 
-        // getData();
-        //使用英语询问是否停留在当前页，还是返回到列表页
-        ElMessageBox.confirm('The '+typeStr+' data has been crawled, do you want to stay on this page?', 'Prompt', {
-          confirmButtonText: 'Stay',
-          cancelButtonText: 'Return to the list',
-          type: 'warning'
-        }).then(() => {
-        }).catch(() => {
-          emit('response')
-        });
-        
     })
   })
 }
@@ -410,6 +455,19 @@ const ClearCondition = () => {
   emit('response')
 }
 
+// 地理编码检索
+const addressSelect = () => {
+  if (state.address) {
+    map.value.mapOperations.addressSelect(state.address)
+  }
+  else {
+    ElMessage({
+      message: 'Warning, please enter location !',
+      type: 'error',
+    })
+  }
+}
+
 // 监听 
 watch(
   () => state.coordinateList.length,
@@ -424,13 +482,13 @@ watch(
 watch(
   () => state.switch,
   (newValue, oldValue) => {
-    if(newValue){
-      state.sensor=state.data2.filter(item=>{
-        return item.value=='landsat'||item.value=='sentinel'
+    if (newValue) {
+      state.sensor = state.data2.filter(item => {
+        return item.value == 'landsat' || item.value == 'sentinel'
       })
-    }else{
-      state.sensor=state.data2.filter(item=>{
-        return item.value!='landsat'&&item.value!='sentinel'&&item.value!='obiter'&&item.value!='domestic'
+    } else {
+      state.sensor = state.data2.filter(item => {
+        return item.value != 'landsat' && item.value != 'sentinel' && item.value != 'obiter' && item.value != 'domestic'
       })
     }
   },
@@ -453,55 +511,62 @@ defineExpose({
   
 <style scoped lang="scss">
 .rsSelect {
-  border: 1px solid #f7f7fa;
-  height: 52rem;
+	border: 1px solid #f7f7fa;
+	height: 52rem;
 
+	span {
+		display: block;
+		margin-bottom: 3%;
+		font-size: 18px;
+	}
 
-  span {
-    display: block;
-    margin-bottom: 3%;
-    font-size: 18px;
-  }
+	.satelliteSelect,
+	.idSelect {
+		width: 90%;
+		margin: 2% 3% 0 3%;
+	}
 
-  .satelliteSelect,
-  .idSelect {
-    width: 90%;
-    margin: 2% 3% 0 3%;
-  }
+	.block {
+		margin-top: 2%;
+	}
 
-  .block {
-    margin-top: 2%;
-  }
+	.demonstration {
+		font-size: 14px;
+		float: left;
+		height: 20px;
+		line-height: 40px;
+	}
 
-  .demonstration {
-    font-size: 14px;
-    float: left;
-    height: 20px;
-    line-height: 40px;
-  }
+	.coordinateContainer {
+		margin: 3%;
+		height: 15px;
+	}
 
-  .coordinateContainer {
-    margin: 3%;
-    height: 15px;
-  }
+	.coordinateBtn {
+		width: 90%;
+		word-break: keep-all;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
-  .coordinateBtn {
-    width: 90%;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .lowerBtn {
-    width: 100%;
-    text-align: center;
-    margin-top: 5px;
-  }
+	.lowerBtn {
+		width: 100%;
+		text-align: center;
+		margin-top: 5px;
+	}
 }
 
 #map {
-  height: 58rem;
-  margin-left: 5px;
+	height: 58rem;
+	margin-left: 5px;
+	z-index: 1;
+}
+
+.addressGroup {
+	position: absolute;
+	top: 20px;
+	right: 30px;
+	z-index: 99;
 }
 </style>
\ No newline at end of file