vue-openlayers 지도 좌표 탄 상자 효과 실현
3941 단어 vueopenlayers탄 틀
openlayers
이 효 과 는 지 도 를 클릭 하여 좌표 정 보 를 팝 업 하 는 것 입 니 다.
지도 가장 자 리 를 클릭 하면 밑그림 이 따라 이동 하여 팝 업 창 이 완전히 표 시 됩 니 다.
<template>
<div class="vm">
<h2 class="h-title"> popup</h2>
<div id="map" class="map-x"></div>
<!-- -->
<div
class="popup"
ref="popup"
v-show="currentCoordinate"
>
<span class="icon-close" @click="closePopup">✖</span>
<div class="content">{{currentCoordinate}}</div>
</div>
</div>
</template>
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { toStringHDMS } from 'ol/coordinate'
import { toLonLat } from 'ol/proj'
import Overlay from 'ol/Overlay'
export default {
name: 'Popup',
data () {
return {
map: null,
currentCoordinate: null, //
overlay: null
}
},
methods: {
initMap () {
//
this.overlay = new Overlay({
element: this.$refs.popup, // , html
autoPan: true, // ,
autoPanAnimation: { //
duration: 250
}
})
//
this.map = new Map({
target: 'map',
layers: [
new Tile({
source: new OSM() // OSM
})
],
overlays: [this.overlay], //
view: new View({
center: [-27118403.38733027, 4852488.79124965], //
zoom: 12 // ( )
})
})
this.mapClick() // ,
},
mapClick () { //
// map.on() ,singleclick 。 click singleclick。
this.map.on('singleclick', evt => {
const coordinate = evt.coordinate //
const hdms = toStringHDMS(toLonLat(coordinate)) //
this.currentCoordinate = hdms //
setTimeout(() => {
//
// , ,
this.overlay.setPosition(coordinate)
}, 0)
})
},
//
closePopup () {
// undefined,
this.overlay.setPosition(undefined)
this.currentCoordinate = null
}
},
mounted () {
this.initMap()
}
}
</script>
<style lang="scss" scoped>
/* */
.popup {
min-width: 280px;
position: relative;
background: #fff;
padding: 8px 16px;
display: flex;
flex-direction: column;
transform: translate(-50%, calc(-100% - 12px));
/* */
&::after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
border: 12px solid transparent;
border-top-color: #fff;
bottom: -23px;
left: 50%;
transform: translateX(-50%);
}
}
/* */
.icon-close {
cursor: pointer;
align-self: flex-end;
margin-bottom: 10px;
}
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.