zqq:遥感爬虫接口（待补充）

src/api/crawl/index.js

@@ -1,7 +1,5 @@
 import request, { crawlModule, moduleName } from '/@/utils/request';
 
-
-
 export const geoserve = (vordm_id, link, disaster_id, name) => {
 	return request({
 		url: '/api/' + crawlModule + '/geoserve/pushing',
@@ -10,22 +8,22 @@ export const geoserve = (vordm_id , link , disaster_id, name) =>{
 			vordm_id,
 			link,
 			disaster_id,
-            name
+			name,
-        }
+		},
 	});
-}
+};
 export const news = (disaster_id, keywords, page, isBaidu, id) => {
 	return request({
-        url: '/api/' + crawlModule + '/news/'+(isBaidu?"baidu":"bing"),
+		url: '/api/' + crawlModule + '/news/' + (isBaidu ? 'baidu' : 'bing'),
 		method: 'post',
 		data: {
 			disaster_id,
 			keywords,
 			page,
-            id
+			id,
-        }
+		},
 	});
-}
+};
 export const rs = (stime, etime, disaster_id, ranges, type = 1) => {
 	let method = 'sentinel';
 	if (type == 1) {
@@ -37,20 +35,23 @@ export const rs = (stime, etime, disaster_id,ranges ,type =1) =>{
 	}
 
 	return request({
-        url: '/api/' + crawlModule + '/news/'+method,
+		url: '/api/' + crawlModule + '/rs/' + method,
 		method: 'post',
 		data: {
-            stime, etime, disaster_id,ranges
+			stime,
-        }
+			etime,
+			disaster_id,
+			ranges,
+		},
 	});
-}
+};
 export const submit = (row) => {
 	return request({
 		url: '/api/' + moduleName + '/ui/crawlInfo/submit',
 		method: 'post',
-        data: row
+		data: row,
-    })
+	});
-}
+};
 export const getList = (current, size, param) => {
 	let params = {
 		current,
@@ -62,7 +63,6 @@ export const getList = (current, size, param) => {
 	return request({
 		url: '/api/' + moduleName + '/ui/crawlInfo/list',
 		method: 'get',
-        params: params
+		params: params,
 	});
-
+};
-}

src/components/Map.vue

@@ -6,7 +6,7 @@
   <script setup>
 import { ref, onMounted } from 'vue'
 import WKT from 'terraformer-wkt-parser'
-import * as turf from '@turf/turf'
+
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-draw/dist/leaflet.draw'
@@ -19,8 +19,10 @@ import * as omnivore from '@mapbox/leaflet-omnivore'
 const variableStore = useVariableStore()
 const map = ref()
 let homeMap = null
+let text = null
 let featureLayerG_area = null
 let featureLayerG_point = null
+let layerRectangle = null
 
 onMounted(() => {
   homeMap = L.map(map.value, {
@@ -42,8 +44,92 @@ onMounted(() => {
     tileSize: 256,
     zoomOffset: 1,
   }).addTo(homeMap)
-  
+  text = new L.Draw.Polygon(homeMap)
-
+  L.drawLocal = {
+    draw: {
+      handlers: {
+        circle: {
+          tooltip: {
+            start: '单击并拖动可绘制圆',
+          },
+          radius: '半径',
+        },
+        circlemarker: {
+          tooltip: {
+            start: '点击地图放置圆形标记',
+          },
+        },
+        marker: {
+          tooltip: {
+            start: '点击地图放置标记，Esc取消',
+          },
+        },
+        polygon: {
+          tooltip: {
+            start: '点击开始绘制，Esc取消',
+            cont: '单击以继续绘制，Esc取消',
+            end: '单击第一个点完成绘制，Esc取消',
+          },
+        },
+        polyline: {
+          error: '<strong>异常:</strong> 形状边缘不能交叉!',
+          tooltip: {
+            start: '点击开始绘制，Esc取消',
+            cont: '单击以继续绘制，Esc取消',
+            end: '双击完成绘制，Esc取消',
+          },
+        },
+        rectangle: {
+          tooltip: {
+            start: '单击并拖动以绘制矩形',
+            end: '完成',
+          },
+        },
+        simpleshape: {
+          tooltip: {
+            end: '释放鼠标完成绘图',
+          },
+        },
+      },
+    },
+    edit: {
+      toolbar: {
+        actions: {
+          save: {
+            title: '保存改动',
+            text: '保存',
+          },
+          cancel: {
+            title: '取消编辑，丢弃所有更改',
+            text: '取消',
+          },
+          clearAll: {
+            title: '清除所有标记',
+            text: '清除所有',
+          },
+        },
+        buttons: {
+          edit: '编辑图层',
+          editDisabled: '不需要编辑图层',
+          remove: '删除图层',
+          removeDisabled: '没有要删除的图层',
+        },
+      },
+      handlers: {
+        edit: {
+          tooltip: {
+            text: '拖动节点或标记来编辑图形',
+            subtext: '单击“取消”撤消更改',
+          },
+        },
+        remove: {
+          tooltip: {
+            text: '单击某个标记进行删除',
+          },
+        },
+      },
+    },
+  }
   featureLayerG_area = L.layerGroup().addTo(homeMap)
   featureLayerG_point = L.layerGroup().addTo(homeMap)
 })
@@ -56,32 +142,13 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    let layer = omnivore.wkt.parse(res)
+    return omnivore.wkt.parse(res).addTo(featureLayerG_point)
-    layer.addTo(featureLayerG_point)
+    // if(omnivore.wkt.parse(res) instanceof L.Marker){
-    let attr=Object.values(layer._layers) 
 
-    // 判断审核的数据类型，如果是点则直接flyTo
+    // }
-    if(attr[0].feature.geometry.type.indexOf('Polygon')==-1){
+    // else{
-      homeMap.flyTo([attr[0].feature.geometry.coordinates[1],attr[0].feature.geometry.coordinates[0]],3)
+    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
-    }
+    // }
-     // 判断审核的数据类型，如果是面则计算中心点 然后再fly
-    else{
-      let polygons=[];
-      for(let i=0;i<attr[0].feature.geometry.coordinates.length;i++){
-        console.log(attr[0].feature.geometry.coordinates[i])
-        polygons.push(turf.polygon([attr[0].feature.geometry.coordinates[i]]));
-      }
-      let centers = polygons.map(polygon => turf.centroid(polygon));
-      // console.log(centers)
-      let features=[]
-      for(let i=0;i<centers.length;i++){
-        features.push(turf.point(centers[i].geometry.coordinates))
-      }
-      let final_center=turf.center(turf.featureCollection(features))
-      // console.log(final_center)
-      homeMap.flyTo([final_center.geometry.coordinates[1],final_center.geometry.coordinates[0]],3)
-    }
-    return layer
 
   },
   /** 添加点标注
@@ -277,7 +344,10 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    
+    if (variableStore.polygoncontrol == 'option2') {
+      text = new L.Draw.Polygon(homeMap)
+      text.enable()
+    }
   },
   /**
    * 清楚wkt添加的所有
@@ -301,39 +371,73 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
-    
+    text = new L.Draw.Polygon(homeMap)
+    text.enable()
   },
   clearPolygon: () => {
     // console.log('1-2')
-    
+    text.disable()
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
     // variableStore.layerGroupPoint=null
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    
+    // console.log("2-3")
-    // homeMap.on('draw:created', function (elll) {
+    homeMap.on('draw:created', function (elll) {
-    //   featureLayerG_area.clearLayers()
+      featureLayerG_area.clearLayers()
-    //   variableStore.layerGroupPoly = null
+      variableStore.layerGroupPoly = null
-    //   elll.layer.setStyle({
+      elll.layer.setStyle({
-    //     color: '#FF0080',
+        color: '#FF0080',
-    //     opacity: 1,
+        opacity: 1,
-    //   })
+      })
-    //   featureLayerG_area.addLayer(elll.layer)
+      featureLayerG_area.addLayer(elll.layer)
-    //   let features = featureLayerG_area.toGeoJSON().features
+      let features = featureLayerG_area.toGeoJSON().features
-    //   // console.log(features)
+      // console.log(features)
-    //   variableStore.layerGroupPoly = features.map(function (feature) {
+      variableStore.layerGroupPoly = features.map(function (feature) {
-    //     return WKT.convert(feature.geometry)
+        return WKT.convert(feature.geometry)
-    //   })
+      })
-    //   variableStore.layerGroupPoly =
+      variableStore.layerGroupPoly =
-    //     variableStore.layerGroupPoly.join('\n')
+        variableStore.layerGroupPoly.join('\n')
-      
+      text.enable()
-    // })
+    })
   },
   drawDestroyed: () => {
-    
+    homeMap.off('draw:created', function (elll) {
+      elll.layer.setStyle({
+        color: '#FF0080',
+        opacity: 1,
+      })
+      featureLayerG_area.addLayer(elll.layer)
+      let features = featureLayerG_area.toGeoJSON().features
+      // console.log(features)
+      variableStore.layerGroupPoly = features.map(function (feature) {
+        return WKT.convert(feature.geometry)
+      })
+      variableStore.layerGroupPoly =
+        variableStore.layerGroupPoly.join('\n')
+      text = new L.Draw.Polygon(homeMap)
+      text.enable()
+    })
   },
+  drawRectangle: () => {
+    if (layerRectangle != null) {
+      homeMap.removeLayer(layerRectangle)
+      layerRectangle = null
+    }
+    homeMap.pm.enableDraw('Rectangle', {
+      snappable: true,
+      snapDistance: 20,
+    });
+    homeMap.on('pm:create', (e) => {
+      L.PM.reInitLayer(e.layer);
+      layerRectangle = e.layer
+    });
+  },
+  deleteRectangle: () => {
+    homeMap.removeLayer(layerRectangle)
+  }
+
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
 
@@ -341,3 +445,4 @@ defineExpose({
   mapOperations,
 })
   </script>
+  

src/utils/request.js

@@ -3,8 +3,8 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import qs from 'qs';
 import { Session } from '/@/utils/storage';
 
-// export const moduleName = 'zqq-biz-vordm';
+export const moduleName = 'zqq-biz-vordm';
-export const moduleName = 'biz-vordm';
+// export const moduleName = 'biz-vordm';
 export const crawlModule = 'vordm-crawl';
 // 配置新建一个 axios 实例
 const service = axios.create({

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

@@ -7,7 +7,7 @@
           <el-card class="box-card">
             <span>Select time range</span>
             <el-row class="block">
-              <el-col :span="3">
+              <el-col :span="5">
                 <span class="demonstration">Start time</span>
               </el-col>
               <el-col :span="19">
@@ -15,11 +15,12 @@
                                 v-model="state.startTime"
                                 type="datetime"
                                 placeholder="Select start time"
-                                :shortcuts="shortcuts" />
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts" />
               </el-col>
             </el-row>
             <el-row class="block">
-              <el-col :span="3">
+              <el-col :span="5">
                 <span class="demonstration">End time</span>
               </el-col>
               <el-col :span="19">
@@ -27,7 +28,8 @@
                                 v-model="state.endTime"
                                 type="datetime"
                                 placeholder="Select end time"
-                                :shortcuts="shortcuts" />
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts" />
               </el-col>
             </el-row>
           </el-card>
@@ -82,7 +84,7 @@
             <span>Select satellite type</span>
             <el-tree-select class="satelliteSelect"
                             v-model="state.satelliteSelected"
-                            :data="sensor"
+                            :data="state.sensor"
                             multiple
                             collapse-tags
                             collapse-tags-tooltip
@@ -98,7 +100,7 @@
                        v-model="state.selectID"
                        clearable
                        placeholder="Select VoRDM ID">
-              <el-option v-for="item in idOptions"
+              <el-option v-for="item in state.idOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
@@ -118,7 +120,9 @@
         </div>
       </el-col>
       <el-col :span="16">
-        <Map id="map"></Map>
+        <Map id="map"
+             ref="map">
+        </Map>
       </el-col>
 
     </el-row>
@@ -127,10 +131,21 @@
   
   <script setup>
 import Map from "/@/components/Map.vue";
-import { ref, reactive } from 'vue';
+import { ref, reactive, watch } from 'vue';
+import { rs, submit } from '/@/api/crawl/index';
+import { useUserInfo } from '/@/stores/userInfo';
+const userInfo = useUserInfo();
 
-// 卫星类型
+// 初始化数据
-const sensor = ref([
+const map = ref()
+const state = reactive({
+  startTime: '',
+  endTime: '',
+  addCoord: false,
+  satelliteSelected: [],
+  coordinateList: [],
+  selectID: '',
+  sensor: [
     {
       value: 'landsat',
       label: 'landsat',
@@ -245,43 +260,8 @@ const sensor = ref([
         },
       ],
     }
-])
+  ],
-
+  shortcuts: [
-// VoRDM ID
-const idOptions = [
-  {
-    value: '2023001001',
-    label: '2023001001',
-  },
-  {
-    value: '2023001002',
-    label: '2023001002',
-  },
-  {
-    value: '2023001003',
-    label: '2023001003',
-  },
-  {
-    value: '2023001004',
-    label: '2023001004',
-  },
-  {
-    value: '2023001005',
-    label: '2023001005',
-  },
-]
-
-// 初始化数据
-const state = reactive({
-  startTime: '',
-  endTime: '',
-  addCoord: false,
-  satelliteSelected: [],
-  coordinateList: [],
-  selectID: '',
-})
-
-const shortcuts = [
     {
       text: '1 month ago',
       value: () => {
@@ -306,41 +286,163 @@ const shortcuts = [
         return date
       },
     },
-]
+  ],
+  idOptions: [{
+    value: '1',
+    label: '1',
+  },
+  {
+    value: '2',
+    label: '2',
+  },
+  {
+    value: '3',
+    label: '3',
+  },
+  {
+    value: '4',
+    label: '4',
+  },
+  {
+    value: '5',
+    label: '5',
+  }],
+  layerInfo: null,
+  lat: '',
+  lon: '',
+  disLat: '',
+  disLon: '',
+})
+
+const onMapClick = (e) => {
+  state.lat = e.latlng.lat.toFixed(3);
+  state.lon = e.latlng.lng.toFixed(3);
+  state.coordinateList.push({
+    Lat: state.lat,
+    Lng: state.lon
+  })
+  //   changeLatLon(e)
+}
+
+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"
+    }
+  }
+
+}
+
 
 // 添加坐标点
 const addCoordinate = () => {
   state.addCoord = !state.addCoord;
-  state.coordinateList = [
+  if (state.addCoord && state.coordinateList.length <= 2) {
-    {
+    map.value.mapOperations.drawRectangle()
-      Lat: '43.538'
+    map.value.mapOperations.on("click", onMapClick)
-      ,
+    document.getElementsByClassName('coordinateBtn')[0].innerText = 'Stop';
-      Lng: '111.530'
-    },
-    {
-      Lat: '36.195'
-      ,
-      Lng: '120.761'
   }
-  ]
+  else {
+    map.value.mapOperations.off("click", onMapClick)
+    document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
+  }
+
 }
 // 清空坐标点
 const clearCoordinate = () => {
   state.coordinateList = [];
   state.startTime = '';
   state.endTime = '';
+  state.addCoord = false
+  map.value.mapOperations.deleteRectangle()
+  map.value.mapOperations.off("click", onMapClick)
+  document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
 }
 // 编辑坐标点
 const editCoordinate = () => {
-
 }
 
 // 开始爬虫
 const startCrawl = () => {
-  console.log("start time:", state.startTime)
+  var ranges = state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng
-  console.log("end time:", state.endTime)
+  var type = null
-  console.log("addCoord:", state.addCoord)
+  if (state.satelliteSelected[0] == 'landsat') {
-  console.log("satelliteSelected:", state.satelliteSelected)
+    type = '5'
+  } else if (state.satelliteSelected[0] == 'Sentinel') {
+    type = '6'
+  } else if (state.satelliteSelected[0] == '') {
+    type = '7'
+  }
+  var id = 2
+
+  var param = {
+    "stime": state.startTime,
+    "etime": state.endTime,
+    "disaster_id": state.selectID * 1,
+    "ranges": ranges,
+    "id": id
+  }
+
+  console.log(param);
+  submit(
+    {
+      type: type,
+      manageId: userInfo.userInfos.id,
+      status: 0,
+      disasterId: state.selectID,
+      id: (id ? id : null)
+    }
+  ).then(ret => {
+    if (ret == 1042) {
+      ElMessage.error("error")
+    } else {
+
+      rs(param).then(res => {
+        console.log(res);
+        // getData();
+        ElMessage({
+          message: 'Success, Start crawling.',
+          type: 'success',
+        })
+      })
+
+    }
+  })
 }
 
 // 清空搜索条件
@@ -352,6 +454,16 @@ const ClearCondition = () => {
   state.coordinateList = []
   state.selectID = ''
 }
+
+// 监听 
+watch(
+  () => state.coordinateList.length,
+  (newValue, oldValue) => {
+    if (newValue > 1) {
+      map.value.mapOperations.off("click", onMapClick)
+    }
+  },
+  { immediate: true })
   </script>
   
   <style scoped lang="scss">

src/views/dataService/remoteSensingData/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
-    <el-tabs v-model="state.activeName"
+    <el-tabs v-model="state.activeName">
-             @tab-click="handleClick">
       <el-tab-pane label="Search condition"
                    name="first">
         <search-condition></search-condition>

src/views/responseManagement/userResponse/index.vue

@@ -190,9 +190,6 @@
                     style="height:35px;"></el-input>
         </el-container>
 
-        <Map style="height:350px ; width:100% ;margin-bottom: 10px;"
-             ref="map"></Map>
-
         <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
                  ref="mapRef"></MapPage>
 
@@ -228,7 +225,6 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
 //引入地图
-import Map from '/@/components/Map.vue';
 import { useDateFormat } from '@vueuse/shared';
 import L from "leaflet";
 import '@geoman-io/leaflet-geoman-free';