zqq:地图操作
This commit is contained in:
qqGroup0
parent
55d5508d27
commit
41435dee63
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue