yaowang
/
vordm-admin
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zqq:地图操作

This commit is contained in:
qqGroup0 2023-06-15 18:24:41 +08:00
parent 55d5508d27
commit 41435dee63
2 changed files with 251 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Map.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div ref="map" class="container"></div> <div ref="map"
class="container"></div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, reactive, onMounted } from 'vue'
import WKT from 'terraformer-wkt-parser' import WKT from 'terraformer-wkt-parser'
import * as turf from '@turf/turf' import * as turf from '@turf/turf'
import L from 'leaflet' 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';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'; import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import 'Leaflet-ImageOverlay-Rotated' import 'Leaflet-ImageOverlay-Rotated'
import 'leaflet-control-geocoder/dist/Control.Geocoder.css'; // import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
import 'leaflet-control-geocoder'; // import 'leaflet-control-geocoder';
import { useVariableStore } from '/@/stores/index.ts' import { useVariableStore } from '/@/stores/index.ts'
import * as omnivore from '@mapbox/leaflet-omnivore' import * as omnivore from '@mapbox/leaflet-omnivore'
import axios from "axios";
const variableStore = useVariableStore() const variableStore = useVariableStore()
const map = ref() const map = ref()
let homeMap = null let homeMap = null
@ -24,6 +26,9 @@ let featureLayerG_area = null
let featureLayerG_point = null let featureLayerG_point = null
let layerRectangle = null let layerRectangle = null
const state = reactive({
markerLayer: null
})
onMounted(() => { onMounted(() => {
homeMap = L.map(map.value, { homeMap = L.map(map.value, {
@ -31,7 +36,7 @@ onMounted(() => {
crs: L.CRS.EPSG4326, crs: L.CRS.EPSG4326,
center: [29.563761, 106.550464], center: [29.563761, 106.550464],
zoom: 3, zoom: 3,
minZoom: 1, minZoom: 3,
maxZoom: 18, maxZoom: 18,
attributionControl: false, // 移除右下角leaflet标识 attributionControl: false, // 移除右下角leaflet标识
zoomControl: false, zoomControl: false,
@ -49,32 +54,32 @@ onMounted(() => {
featureLayerG_area = L.layerGroup().addTo(homeMap) featureLayerG_area = L.layerGroup().addTo(homeMap)
featureLayerG_point = 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=' '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 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, { const nameLayer = L.tileLayer(CIA_C + TK_KEY, {
// maxZoom: 20, maxZoom: 20,
// tileSize: 256, tileSize: 256,
// zoomOffset: 1 zoomOffset: 1
// }).addTo(homeMap);
// 创建Geocoding控件
const geocoder = L.Control.geocoder({
defaultMarkGeocode: false,
placeholder: 'Enter address...',
collapsed: true,
}).addTo(homeMap); }).addTo(homeMap);
// 监听Geocoding控件的结果事件 // // 创建Geocoding控件
geocoder.on('markgeocode', function (event) { // const geocoder = L.Control.geocoder({
const result = event.geocode || {}; // defaultMarkGeocode: false,
onGeocodeResult(result); // placeholder: 'Enter address...',
}); // collapsed: true,
// }).addTo(homeMap);
// // 监听Geocoding控件的结果事件
// geocoder.on('markgeocode', function (event) {
// const result = event.geocode || {};
// onGeocodeResult(result);
// });
}) })
const onGeocodeResult = (result) => { // const onGeocodeResult = (result) => {
homeMap.setView(result.center, 5); // homeMap.setView(result.center, 5);
L.marker(result.center).addTo(homeMap); // L.marker(result.center).addTo(homeMap);
} // }
/** WKT加载点和多边形 /** WKT加载点和多边形
* Object param 参数集合 * Object param 参数集合
@ -309,7 +314,6 @@ const mapOperations = {
featureLayerG_point.clearLayers() featureLayerG_point.clearLayers()
variableStore.layerGroupPoint = null variableStore.layerGroupPoint = null
variableStore.layerGroupPoly = null variableStore.layerGroupPoly = null
}, },
/** /**
* 清楚wkt添加的所有 * 清楚wkt添加的所有
@ -425,6 +429,25 @@ const mapOperations = {
}, },
removeEdit: () => { removeEdit: () => {
homeMap.pm.toggleGlobalRemovalMode(); 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); //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);

335
src/views/dataService/remoteSensingData/components/searchCondition.vue
View File

@ -11,16 +11,21 @@
<p style="color: #aa4434;">Disaster time: {{ state.data.disasterTime }}</p> <p style="color: #aa4434;">Disaster time: {{ state.data.disasterTime }}</p>
<p style="color: #878787; ">Disaster Country: {{ state.data.disasterCountry }}</p> <p style="color: #878787; ">Disaster Country: {{ state.data.disasterCountry }}</p>
</el-card> </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> <span>Select time range</span>
<el-row class="block"> <el-row class="block">
<el-col :span="5"> <el-col :span="5">
<span class="demonstration">Start time</span> <span class="demonstration">Start time</span>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-date-picker style="width: 90%;" v-model="state.startTime" type="datetime" <el-date-picker style="width: 90%;"
placeholder="Select start time" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts" v-model="state.startTime"
:disabled-date="disabledDate" /> type="datetime"
placeholder="Select start time"
value-format="YYYY-MM-DD HH:mm:ss"
:shortcuts="state.shortcuts"
:disabled-date="disabledDate" />
</el-col> </el-col>
</el-row> </el-row>
<el-row class="block"> <el-row class="block">
@ -28,20 +33,28 @@
<span class="demonstration">End time</span> <span class="demonstration">End time</span>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-date-picker style="width: 90%;" v-model="state.endTime" type="datetime" placeholder="Select end time" <el-date-picker style="width: 90%;"
value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts" :disabled-date="disabledDate" /> 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-col>
</el-row> </el-row>
</el-card> </el-card>
<el-card class="box-card" style="margin-top: 3%;"> <el-card class="box-card"
<span>Select a region <el-switch style="margin-top: 3%;">
v-model="state.switch" <span>Select a region
size="large" <el-switch v-model="state.switch"
active-text="Area" size="large"
inactive-text="Polygon" active-text="Area"
/></span> inactive-text="Polygon" />
<el-scrollbar wrap-class="list" view-class="view-box" :native="false"> </span>
<el-scrollbar wrap-class="list"
view-class="view-box"
:native="false">
<div v-for="(coordinate, i) in state.coordinateList "> <div v-for="(coordinate, i) in state.coordinateList ">
<el-row class="coordinateContainer"> <el-row class="coordinateContainer">
<el-col :span="1"></el-col> <el-col :span="1"></el-col>
@ -51,36 +64,52 @@
parseFloat(coordinate.Lng).toFixed(4) parseFloat(coordinate.Lng).toFixed(4)
}}</span> }}</span>
</el-col> </el-col>
<el-col :span="2"> <!-- <el-col :span="2">
<el-button class="el-icon" @click="editCoordinate" size="small"> <el-button class="el-icon"
@click="editCoordinate"
size="small">
<ele-Edit /> <ele-Edit />
</el-button> </el-button>
</el-col> </el-col> -->
<el-col :span="2"> <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 /> <ele-Delete />
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div v-if="state.switch==false">
{{variableStore.layerGroupPoly}}
</div>
</el-scrollbar> </el-scrollbar>
<el-row> <el-row>
<el-col :span=" 1 "></el-col> <el-col :span=" 1 "></el-col>
<el-col :span=" 7 "> <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>
<el-col :span=" 7 "> <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-col>
</el-row> </el-row>
</el-card> </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> <span>Select satellite type</span>
<el-tree-select class="satelliteSelect" v-model=" state.satelliteSelected " :data=" state.sensor " multiple <el-tree-select class="satelliteSelect"
collapse-tags collapse-tags-tooltip :render-after-expand=" false " show-checkbox v-model=" state.satelliteSelected "
placeholder="Select satellite type" /> :data=" state.sensor "
multiple
collapse-tags
collapse-tags-tooltip
:render-after-expand=" false "
show-checkbox
placeholder="Select satellite type" />
</el-card> </el-card>
<!-- <el-card class="box-card" <!-- <el-card class="box-card"
@ -98,29 +127,45 @@
</el-card> --> </el-card> -->
<el-card style="margin-top:3%;"> <el-card style="margin-top:3%;">
<el-row> <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-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-row>
</el-card> </el-card>
</div> </div>
</el-col> </el-col>
<el-col :span=" 16 "> <el-col :span=" 16 ">
<Map id="map" ref="map"> <Map id="map"
ref="map">
</Map> </Map>
</el-col> </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> </el-row>
</div> </div>
</template> </template>
<script setup> <script setup>
import Map from "/@/components/Map.vue"; import Map from "/@/components/Map.vue";
import { ref, reactive, watch, defineExpose, onMounted,defineEmits } from 'vue'; import { ref, reactive, watch, defineExpose, onMounted, defineEmits } from 'vue';
import { rs, submit ,rs2 } from '/@/api/crawl/index'; import { rs, submit, rs2 } from '/@/api/crawl/index';
import { useUserInfo } from '/@/stores/userInfo'; import { useUserInfo } from '/@/stores/userInfo';
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { useVariableStore } from '/@/stores/index.ts'; import { useVariableStore } from '/@/stores/index.ts';
import { getList as BizDict } from "/@/api/system/dictbiz.js"; import { getList as BizDict } from "/@/api/system/dictbiz.js";
const variableStore = useVariableStore(); const variableStore = useVariableStore();
@ -131,8 +176,9 @@ const disabledDate = (time) => {
} }
// 初始化数据 // 初始化数据
const map = ref() const map = ref()
const state = reactive({ const state = reactive({
switch:true, switch: true,
startTime: '', startTime: '',
endTime: '', endTime: '',
addCoord: false, addCoord: false,
@ -149,7 +195,7 @@ const state = reactive({
label: 'Sentinel', label: 'Sentinel',
}, },
], ],
dictData:[], dictData: [],
shortcuts: [ shortcuts: [
{ {
text: '1 month ago', text: '1 month ago',
@ -202,24 +248,25 @@ const state = reactive({
disLat: '', disLat: '',
disLon: '', disLon: '',
data: {}, data: {},
data2:[], data2: [],
geometry: null, geometry: null,
address: '',
}) })
//获取所有卫星类型 //获取所有卫星类型
onMounted(() => { onMounted(() => {
BizDict({ code: 'satelliteType' }).then(res => { BizDict({ code: 'satelliteType' }).then(res => {
let data = res.map(item=>{ let data = res.map(item => {
return {value:item.dictValue,label:item.dictValue} return { value: item.dictValue, label: item.dictValue }
}) })
state.data2=data; state.data2 = data;
//初始化加载根据state.switch判断，当时true的时候加载 landsat、Sentinel。否者加载出这两个以外所有内容 //初始化加载根据state.switch判断，当时true的时候加载 landsat、Sentinel。否者加载出这两个以外所有内容
if(state.switch){ if (state.switch) {
state.sensor=state.data2.filter(item=>{ state.sensor = state.data2.filter(item => {
return item.value=='landsat'||item.value=='sentinel' return item.value == 'landsat' || item.value == 'sentinel'
}) })
}else{ } else {
state.sensor=state.data2.filter(item=>{ state.sensor = state.data2.filter(item => {
return item.value!='landsat'&&item.value!='sentinel' return item.value != 'landsat' && item.value != 'sentinel'
}) })
} }
state.dictData = res; state.dictData = res;
@ -276,14 +323,12 @@ const changeLatLon = (e) => {
state.disLon = String((360 - state.disLon).toFixed(3)) + "°W" state.disLon = String((360 - state.disLon).toFixed(3)) + "°W"
} }
} }
} }
// 添加坐标点 // 添加坐标点
const addCoordinate = () => { const addCoordinate = () => {
state.addCoord = !state.addCoord; state.addCoord = !state.addCoord;
if(state.switch){ if (state.switch) {
if (state.addCoord && state.coordinateList.length <= 2) { if (state.addCoord && state.coordinateList.length <= 2) {
map.value.mapOperations.drawRectangle() map.value.mapOperations.drawRectangle()
map.value.mapOperations.on("click", onMapClick) map.value.mapOperations.on("click", onMapClick)
@ -293,13 +338,13 @@ const addCoordinate = () => {
map.value.mapOperations.off("click", onMapClick) map.value.mapOperations.off("click", onMapClick)
document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates'; document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
} }
}else{ } else {
map.value.mapOperations.drawCreated() map.value.mapOperations.drawCreated()
map.value.mapOperations.off("click", onMapClick) map.value.mapOperations.off("click", onMapClick)
map.value.mapOperations.drawPolygon() map.value.mapOperations.drawPolygon()
map.value.mapOperations.wktParseToMap(state.geometry) map.value.mapOperations.wktParseToMap(state.geometry)
} }
} }
@ -308,7 +353,7 @@ const mapClick = (res) => {
} }
// 清空坐标点 // 清空坐标点
const clearCoordinate = () => { const clearCoordinate = () => {
if(!state.switch){ if (!state.switch) {
map.value.mapOperations.clearPolygon() map.value.mapOperations.clearPolygon()
return; return;
} }
@ -333,68 +378,68 @@ const startCrawl = () => {
ElMessage.error("Please select the search end time") ElMessage.error("Please select the search end time")
return; 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") ElMessage.error("Please draw the area on the map")
return; return;
} }
if(!state.switch&&variableStore.layerGroupPoly==null){ if (!state.switch && variableStore.layerGroupPoly == null) {
ElMessage.error("Please draw the area on the map") ElMessage.error("Please draw the area on the map")
return; 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 = [] var param = []
state.satelliteSelected.forEach(data=>{ state.satelliteSelected.forEach(data => {
// state.dictData.ma // state.dictData.ma
var obj = state.dictData.find(function(item) { var obj = state.dictData.find(function (item) {
return item.dictValue === data; return item.dictValue === data;
}); });
param.push( { param.push({
type: obj.dictKey, type: obj.dictKey,
startDate: state.startTime, startDate: state.startTime,
endDate: state.endTime, endDate: state.endTime,
manageId: userInfo.userInfos.id, manageId: userInfo.userInfos.id,
range:ranges, range: ranges,
status: 0, status: 0,
disasterId: state.data.disasterId, disasterId: state.data.disasterId,
}) })
}) })
//提交后台数据 //提交后台数据
submit( param ).then(ret => { submit(param).then(ret => {
let arrParams=[]; let arrParams = [];
ret.forEach(res=>{ ret.forEach(res => {
var obj1 = state.dictData.find(function(item) { var obj1 = state.dictData.find(function (item) {
return item.dictKey == res.type; return item.dictKey == res.type;
}); });
arrParams.push({ arrParams.push({
type:obj1.dictValue, type: obj1.dictValue,
range:res.range, range: res.range,
id:res.id 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 使用，分割 //获取arrParams中的type 使用，分割
var typeArr=[]; var typeArr = [];
arrParams.forEach(item=>{ arrParams.forEach(item => {
typeArr.push(item.type) 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') emit('response')
} }
// 地理编码检索
const addressSelect = () => {
if (state.address) {
map.value.mapOperations.addressSelect(state.address)
}
else {
ElMessage({
message: 'Warning, please enter location !',
type: 'error',
})
}
}
// 监听 // 监听
watch( watch(
() => state.coordinateList.length, () => state.coordinateList.length,
@ -424,13 +482,13 @@ watch(
watch( watch(
() => state.switch, () => state.switch,
(newValue, oldValue) => { (newValue, oldValue) => {
if(newValue){ if (newValue) {
state.sensor=state.data2.filter(item=>{ state.sensor = state.data2.filter(item => {
return item.value=='landsat'||item.value=='sentinel' return item.value == 'landsat' || item.value == 'sentinel'
}) })
}else{ } else {
state.sensor=state.data2.filter(item=>{ state.sensor = state.data2.filter(item => {
return item.value!='landsat'&&item.value!='sentinel'&&item.value!='obiter'&&item.value!='domestic' return item.value != 'landsat' && item.value != 'sentinel' && item.value != 'obiter' && item.value != 'domestic'
}) })
} }
}, },
@ -453,55 +511,62 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.rsSelect { .rsSelect {
border: 1px solid #f7f7fa; border: 1px solid #f7f7fa;
height: 52rem; height: 52rem;
span {
display: block;
margin-bottom: 3%;
font-size: 18px;
}
span { .satelliteSelect,
display: block; .idSelect {
margin-bottom: 3%; width: 90%;
font-size: 18px; margin: 2% 3% 0 3%;
} }
.satelliteSelect, .block {
.idSelect { margin-top: 2%;
width: 90%; }
margin: 2% 3% 0 3%;
}
.block { .demonstration {
margin-top: 2%; font-size: 14px;
} float: left;
height: 20px;
line-height: 40px;
}
.demonstration { .coordinateContainer {
font-size: 14px; margin: 3%;
float: left; height: 15px;
height: 20px; }
line-height: 40px;
}
.coordinateContainer { .coordinateBtn {
margin: 3%; width: 90%;
height: 15px; word-break: keep-all;
} white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coordinateBtn { .lowerBtn {
width: 90%; width: 100%;
word-break: keep-all; text-align: center;
white-space: nowrap; margin-top: 5px;
overflow: hidden; }
text-overflow: ellipsis;
}
.lowerBtn {
width: 100%;
text-align: center;
margin-top: 5px;
}
} }
#map { #map {
height: 58rem; height: 58rem;
margin-left: 5px; margin-left: 5px;
z-index: 1;
}
.addressGroup {
position: absolute;
top: 20px;
right: 30px;
z-index: 99;
} }
</style> </style>