zqq:地图操作

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/dist/Control.Geocoder.css';
-import 'leaflet-control-geocoder';
+// 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='
+  '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 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, {
+  const nameLayer = L.tileLayer(CIA_C + TK_KEY, {
-  //     maxZoom: 20,
+    maxZoom: 20,
-  //     tileSize: 256,
+    tileSize: 256,
-  //     zoomOffset: 1
+    zoomOffset: 1
-  // }).addTo(homeMap);
-
-  // 创建Geocoding控件
-  const geocoder = L.Control.geocoder({
-    defaultMarkGeocode: false,
-    placeholder: 'Enter address...',
-    collapsed: true,
   }).addTo(homeMap);
 
-  // 监听Geocoding控件的结果事件
+  //   // 创建Geocoding控件
-  geocoder.on('markgeocode', function (event) {
+  //   const geocoder = L.Control.geocoder({
-    const result = event.geocode || {};
+  //     defaultMarkGeocode: false,
-    onGeocodeResult(result);
+  //     placeholder: 'Enter address...',
-  });
+  //     collapsed: true,
+  //   }).addTo(homeMap);
+
+  //   // 监听Geocoding控件的结果事件
+  //   geocoder.on('markgeocode', function (event) {
+  //     const result = event.geocode || {};
+  //     onGeocodeResult(result);
+  //   });
 
 })
-const onGeocodeResult = (result) => {
+// const onGeocodeResult = (result) => {
-  homeMap.setView(result.center, 5);
+//   homeMap.setView(result.center, 5);
-  L.marker(result.center).addTo(homeMap);
+//   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);

src/views/dataService/remoteSensingData/components/searchCondition.vue

@@ -11,15 +11,20 @@
             <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"
+                <el-date-picker style="width: 90%;"
-                  placeholder="Select start time" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts"
+                                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>
@@ -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"
+                <el-date-picker style="width: 90%;"
-                  value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts" :disabled-date="disabledDate" />
+                                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%;">
+          <el-card class="box-card"
-            <span>Select a region  <el-switch
+                   style="margin-top: 3%;">
-                                      v-model="state.switch"
+            <span>Select a region
+              <el-switch v-model="state.switch"
                          size="large"
                          active-text="Area"
-                                      inactive-text="Polygon"
+                         inactive-text="Polygon" />
-                                    /></span>
+            </span>
-            <el-scrollbar wrap-class="list" view-class="view-box" :native="false">
+            <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,35 +64,51 @@
                       parseFloat(coordinate.Lng).toFixed(4)
                     }}</span>
                   </el-col>
-                  <el-col :span="2">
+                  <!-- <el-col :span="2">
-                    <el-button class="el-icon" @click="editCoordinate" size="small">
+                    <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
+            <el-tree-select class="satelliteSelect"
-              collapse-tags collapse-tags-tooltip :render-after-expand=" false " show-checkbox
+                            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>
 
@@ -98,19 +127,34 @@
           </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>
@@ -121,6 +165,7 @@ 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,6 +176,7 @@ const disabledDate = (time) => {
 }
 // 初始化数据
 const map = ref()
+
 const state = reactive({
   switch: true,
   startTime: '',
@@ -204,6 +250,7 @@ const state = reactive({
   data: {},
   data2: [],
   geometry: null,
+  address: '',
 })
 //获取所有卫星类型
 onMounted(() => {
@@ -276,10 +323,8 @@ const changeLatLon = (e) => {
       state.disLon = String((360 - state.disLon).toFixed(3)) + "°W"
     }
   }
-
 }
 
-
 // 添加坐标点
 const addCoordinate = () => {
   state.addCoord = !state.addCoord;
@@ -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,
@@ -456,7 +514,6 @@ defineExpose({
 	border: 1px solid #f7f7fa;
 	height: 52rem;
 
-
 	span {
 		display: block;
 		margin-bottom: 3%;
@@ -503,5 +560,13 @@ defineExpose({
 #map {
 	height: 58rem;
 	margin-left: 5px;
+	z-index: 1;
+}
+
+.addressGroup {
+	position: absolute;
+	top: 20px;
+	right: 30px;
+	z-index: 99;
 }
 </style>