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,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"
|
||||
placeholder="Select start time" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts"
|
||||
<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>
|
||||
|
|
@ -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"
|
||||
<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">
|
||||
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,35 +64,51 @@
|
|||
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
|
||||
<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>
|
||||
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue