Vue OpenLayers气泡窗是一种在
Vue.js应用程序中
使用OpenLayers地图库的弹出窗口。您可以
使用它来在地图上
显示信息，例如位置名称，地址，图像等。以下是创建
Vue OpenLayers气泡窗的一些步骤：
1. 安装
OpenLayers和
Vue.js
首先，您需要安装
OpenLayers和
Vue.js。您可以
使用以下命令：
```
npm install ol
vue
```
2. 创建
Vue组件
接下来，您需要创建一个
Vue组件来包含
OpenLayers地图和气泡窗。您可以
使用以下代码：
```
<template>
<div>
<div ref="map" class="map"></div>
<div ref="
popup" class="ol-
popup">
<a href="#" class="ol-
popup-closer" @click.prevent="close
Popup"></a>
<div ref="
popupContent"></div>
</div>
</div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Overlay from 'ol/Overlay';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
export default {
name
: 'MapWith
Popup',
data() {
return {
map
: null,
popup: null,
popupContent
: null
}
},
mounted() {
this.initMap();
},
methods
: {
initMap() {
// create map
this.map = new Map({
target
: this.$refs.map,
layers
: [
new TileLayer({
source
: new OSM()
})
],
view
: new View({
center
: [0, 0],
zoom
: 2
})
});
// create
popup
this.
popup = new Overlay({
element
: this.$refs.
popup,
autoPan
: true,
autoPanAnimation
: {
duration
: 250
}
});
this.map.addOverlay(this.
popup);
// add click event to map
this.map.on('click', this.onClick);
},
onClick(event) {
// get feature at clicked position
const feature = this.map.forEachFeatureAtPixel(event.pixel, (feature) => feature);
// check if feature exists
if (feature) {
// get geometry of feature
const geometry = feature.getGeometry();
// get coordinate of geometry
const coordinate = geometry.getCoordinates();
// set content of
popup
this.
popupContent = 'Feature selected at '
+ coordinate;
// set position of
popup
this.
popup.setPosition(coordinate);
} else {
// close
popup
this.
popup.setPosition(undefined);
}
},
close
Popup() {
// close
popup
this.
popup.setPosition(undefined);
}
}
}
</script>
<style>
.map {
height
: 400px;
}
.ol-
popup {
position
: absolute;
background-color
: white;
padding
: 15px;
border-radius
: 10px;
box-shadow
: 0 0 10px rgba(0, 0, 0, 0.5);
font-size
: 14px;
line-height
: 1.5;
display
: none;
}
.ol-
popup:after,
.ol-
popup:before {
top
: 100%;
border
: solid transparent;
content
: " ";
height
: 0;
width
: 0;
position
: absolute;
pointer-events
: none;
}
.ol-
popup:after {
border-top-color
: white;
border-width
: 10px;
left
: 48%;
margin-left
: -10px;
}
.ol-
popup:before {
border-top-color
: rgba(0, 0, 0, 0.75);
border-width
: 11px;
left
: 48%;
margin-left
: -11px;
}
.ol-
popup-closer {
position
: absolute;
top
: 5px;
right
: 5px;
font-size
: 12px;
font-weight
: bold;
text-decoration
: none;
color
: #bababa;
}
.ol-
popup-closer
:hover {
color
: #ffcccc;
}
</style>
```
3.
使用Vue组件
最后，您可以在
Vue.js应用程序中
使用该
组件。您可以将其包含在另一个
Vue组件中，也可以在
Vue路由中
使用它。以下是一个
示例：
```
<template>
<div>
<h1>My Map</h1>
<MapWith
Popup />
</div>
</template>
<script>
import MapWith
Popup from './MapWith
Popup';
export default {
name
: 'MyApp',
components
: {
MapWith
Popup
}
}
</script>
```
当您在地图上单击时，将
显示一个气泡窗口。您可以将此
组件扩展为
显示更多信息，例如图像，链接等。
本文由高级前端工程师大剑师兰特分享，介绍如何在Vue应用中结合OpenLayers通过Popup组件展示经纬度坐标。示例提供源代码，并提供配置方式，包括基础设置链接和npm命令。适合学习openlayers的开发者参考。
订阅专栏 解锁全文
扫一扫
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
