From 1a3f0779b7a4474b309a6e74d7e1e59403ad695c Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Thu, 30 Mar 2023 17:13:45 +0800
Subject: [PATCH] =?UTF-8?q?zqq:=E9=81=A5=E6=84=9F=E5=BD=B1=E5=83=8F?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/components/Map.vue                        |  29 ++
 .../remoteSensingData/index.vue               | 316 +++++++++++++++++-
 3 files changed, 343 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Map.vue

diff --git a/package.json b/package.json
index b2adea0..fb8775b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 		"@element-plus/icons-vue": "^2.1.0",
 		"axios": "^1.3.4",
 		"echarts": "^5.4.2",
+        "leaflet": "^1.9.3",
 		"element-plus": "^2.3.1",
 		"js-cookie": "^3.0.1",
 		"mitt": "^3.0.0",
diff --git a/src/components/Map.vue b/src/components/Map.vue
new file mode 100644
index 0000000..743536d
--- /dev/null
+++ b/src/components/Map.vue
@@ -0,0 +1,29 @@
+<template>
+  <div ref="map"  class="container"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const map = ref()
+
+onMounted(() => {
+  const homeMap = L.map(map.value, {
+    preferCanvas: true,
+    crs: L.CRS.EPSG4326,
+    center: [29.563761, 106.550464],
+    zoom: 3,
+    minZoom: 1,
+    maxZoom: 18,
+    attributionControl: false, // 移除右下角leaflet标识
+    zoomControl: false
+  });
+  const IMG_C = "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 TK_KEY = "dc8182ebeca998e22154d404aa3c0c17";
+  L.tileLayer(IMG_C + TK_KEY, { maxZoom: 20, tileSize: 256, zoomOffset: 1 }).addTo(homeMap);
+})
+
+</script>
diff --git a/src/views/dataAcquisitionService/remoteSensingData/index.vue b/src/views/dataAcquisitionService/remoteSensingData/index.vue
index 0c18556..2162fdb 100644
--- a/src/views/dataAcquisitionService/remoteSensingData/index.vue
+++ b/src/views/dataAcquisitionService/remoteSensingData/index.vue
@@ -1,5 +1,315 @@
 <template>
-  <div>
-    remoteSensingData
+  <div class="container">
+    <div class="rsSelect">
+      <el-tabs v-model="activeName"
+               @tab-click="handleClick">
+        <el-tab-pane label="Search condition"
+                     name="first">
+
+          <el-card class="box-card">
+            <span>Select time range</span>
+            <div class="block">
+              <span class="demonstration">Start time</span>
+              <el-date-picker style="width: 70%;"
+                              v-model="startTime"
+                              type="datetime"
+                              placeholder="Select start time"
+                              :shortcuts="shortcuts" />
+            </div>
+
+            <div class="block">
+              <span class="demonstration">End time</span>
+              <el-date-picker style="width: 70%;"
+                              v-model="endTime"
+                              type="datetime"
+                              placeholder="Select end time"
+                              :shortcuts="shortcuts" />
+            </div>
+          </el-card>
+
+          <el-card class="box-card"
+                   style="margin-top: 3%;">
+            <span>Select a region</span>
+            <el-scrollbar wrap-class="list"
+                          view-class="view-box"
+                          :native="false">
+              <div class="coordinateContainer"
+                   v-for="(coordinate, i) in coordinateList">{{
+                    // coordinate
+                      'Lat:' + coordinate.lat.toFixed("3") + ',&nbsp;&nbsp;&nbsp;&nbsp;Lng:' + coordinate.lng.toFixed("3")
+                      }}
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <el-button class="el-icon-edit"
+                           size="small"></el-button>
+                <el-button class="el-icon-close"
+                           size="small"></el-button>
+              </div>
+            </el-scrollbar>
+            <el-button @click="addCoordinate">Add coordinates</el-button>
+            <el-button @click="clearCoordinate">Clear coordinates</el-button>
+          </el-card>
+
+          <el-card class="box-card"
+                   style="margin-top: 3%;">
+            <span>Select satellite type</span>
+            <el-scrollbar wrap-class="sensor_list"
+                          view-class="view-box"
+                          :native="false">
+              <el-tree-select class="satelliteSelect"
+                              v-model="satelliteSelected"
+                              :data="sensor"
+                              multiple
+                              :render-after-expand="false"
+                              show-checkbox
+                              placeholder="Select satellite type" />
+            </el-scrollbar>
+          </el-card>
+
+          <el-button @click="startCrawl">Start Crawl</el-button>
+          <el-button>Cancel</el-button>
+
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <Map id="map"></Map>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import Map from "/@/components/Map.vue";
+
+const activeName = ref('first')
+
+const startTime = ref('')
+const endTime = ref('')
+const addCoord = ref(false)
+const satelliteSelected = ref([])
+
+const coordinateList = ref([])
+const sensor = ref([
+  {
+    value: 'landsat',
+    label: 'landsat',
+    //   children: [{
+    //     value: 1 - 1,
+    //     label: 'LANDSAT_8_C1'
+    //   },
+    //   {
+    //     value: 1 - 2,
+    //     label: 'LANDSAT_ETM_C1'
+    //   },
+    //   {
+    //     value: 1 - 3,
+    //     label: 'LANDSAT_TM_C1'
+    //   }
+    //   ]
+  },
+  {
+    value: 'Sentinel',
+    label: 'Sentinel',
+    //   children: [{
+    //     value: 2 - 1,
+    //     label: 'Sentinel - 2',
+    //     children: [{
+    //       value: 2 - 1 - 1,
+    //       label: 'S2MSI2A'
+    //     }]
+    //   },
+    //   {
+    //     value: 2 - 2,
+    //     label: 'Sentinel - 1',
+    //     children: [{
+    //       value: 2 - 2 - 1,
+    //       label: 'SLC'
+    //     }]
+    //   }
+    //   ]
+  },
+  {
+    value: '国产系列卫星',
+    label: '国产系列卫星',
+    children: [
+      {
+        value: 'GF - 1',
+        label: 'GF - 1',
+      },
+      {
+        value: 'GF - 2',
+        label: 'GF - 2',
+      },
+      {
+        value: 'GF - 3',
+        label: 'GF - 3',
+      },
+      {
+        value: 'GF - 4',
+        label: 'GF - 4',
+      },
+      {
+        value: 'GF - 6',
+        label: 'GF - 6',
+      },
+      {
+        value: 'ZY - 3',
+        label: 'ZY - 3',
+      },
+      {
+        value: 'ZY - 302',
+        label: 'ZY - 302',
+      },
+      {
+        value: 'ZY - 02C',
+        label: 'ZY - 02C',
+      },
+    ],
+  },
+  {
+    value: '欧比特珠海一号系列卫星',
+    label: '欧比特珠海一号系列卫星',
+    children: [
+      {
+        value: 'OVS - 2A',
+        label: 'OVS - 2A',
+      },
+      {
+        value: 'OVS - 3A',
+        label: 'OVS - 3A',
+      },
+      {
+        value: 'OVS - 1A',
+        label: 'OVS - 1A',
+      },
+      {
+        value: 'OVS - 1B',
+        label: 'OVS - 1B',
+      },
+      {
+        value: 'OHS - 2A',
+        label: 'OHS - 2A',
+      },
+      {
+        value: 'OHS - 2B',
+        label: 'OHS - 2B',
+      },
+      {
+        value: 'OHS - 2C',
+        label: 'OHS - 2C',
+      },
+      {
+        value: 'OHS - 2D',
+        label: 'OHS - 2D',
+      },
+    ],
+  }
+])
+
+const shortcuts = [
+  {
+    text: '1 month ago',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+      return date
+    },
+  },
+  {
+    text: '3 months ago',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
+      return date
+    },
+  },
+  {
+    text: '6 months ago',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
+      return date
+    },
+  },
+]
+
+// 添加坐标点
+const addCoordinate = () => {
+  addCoord = !addCoord;
+  coordinateList = [
+    //   '43.538', '111.530', '36.195', '120.761'
+    {
+      Lat: '43.538'
+      ,
+      Lng: '111.530'
+    }, {
+      Lat: '36.195'
+      ,
+      Lng: '120.761'
+    }
+  ]
+}
+// 清空坐标点
+const clearCoordinate = () => {
+  coordinateList = [];
+  startTime = '';
+  endTime = '';
+}
+
+const startCrawl = () => {
+  console.log("start time:", startTime.value)
+  console.log("end time:", endTime.value)
+  console.log("addCoord:", addCoord.value)
+  console.log("satelliteSelected:", satelliteSelected.value)
+}
+
+</script>
+
+<style scoped lang="scss">
+.container {
+	padding: 2% 1%;
+	.rsSelect {
+		float: left;
+		border: 1px solid blue;
+		width: 30%;
+		height: 53rem;
+		span {
+			display: block;
+			margin-bottom: 3%;
+		}
+		.satelliteSelect {
+			width: 75%;
+			margin: 10px 0 10px 10px;
+		}
+
+		.el-tree {
+			margin: 10px 0 0 0;
+			color: black;
+			border-radius: 4px;
+		}
+
+		.el-tree-node__label {
+			font-size: 12px;
+		}
+
+		.block {
+			margin: 2% 0;
+			.demonstration {
+				float: left;
+				height: 20px;
+				line-height: 40px;
+				margin: 0 3%;
+				width: 20%;
+			}
+		}
+		.coordinateContainer {
+			width: 200px;
+			height: 200px;
+			border: 1px solid red;
+		}
+	}
+	#map {
+		width: 70%;
+		height: 53rem;
+		float: left;
+	}
+}
+</style>
\ No newline at end of file