zqq:遥感影像获取
This commit is contained in:
qqGroup0
parent
ee30abff14
commit
1a3f0779b7
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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") + ', Lng:' + coordinate.lng.toFixed("3")
|
||||
}}
|
||||
|
||||
<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>
|
||||
</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>
|
||||
Loading…
Reference in New Issue