openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標註text文字)
阿新 • • 發佈：2021-09-17
目錄
- 1. 寫在前面
- 2. overlay 實現popup彈窗
- 2.1 頁面 addPopup() 方法詳解
- 2.2 autoPan 屬性為false效果
- 3. overlay 實現 label標註資訊
- 4 overlay 實現 text文字資訊
- 5. 附上完整程式碼
1. 寫在前面
常見的地圖覆蓋物為這三種類型，如：popup彈窗、label標註資訊、text文字資訊等。
上篇講了overlay的一些屬性方法事件等，這篇主要講overlay三種最常用的案例。更多可以參考上篇內容openlayers6【八】地圖覆蓋物overlay詳解，這兩篇會有關聯。
popup彈窗 基本是經常遇到的需求案例，所有單獨給大家講下，讓地圖更富有生命力！！！
overlay 然後通過map進行繫結，承載在頁面的 dom 上的元素。
2. overlay 實現popup彈窗
2.1 vue 頁面 addPopup() 方法詳解
①：例項一個
new Overlay()，設定相關的屬性，element 是和頁面的 最外層彈窗的dom進行繫結
②：通過map.addOverlay(this.overlay)把 overlay彈窗新增到頁面
③：closer.onclick新增一個 x 關閉彈窗事件
④：通過this.map.on("singleclick",function(evt)事件點選地圖觸發彈窗效果
具體程式碼如下：
addPopup() {
// 使用變數儲存彈窗所需的 DOM 物件
var container = document.getElementById("popup");
var closer = document.getElementById("popup-closer");
var content = document.getElementById("popup-content");
// 建立一個彈窗 Overlay 物件
this.overlay = new Overlay({
element: container,//繫結 Overlay 物件和 DOM 物件的
autoPan: true,// 定義彈出視窗在邊緣點選時候可能不完整 設定自動平移效果
autoPanAnimation: {
duration: 250 //自動平移效果的動畫時間 9毫秒）
}
});
// 將彈窗新增到 map 地圖中
this.map.addOverlay(this.overlay);
let _that = this;
/**
* 為彈窗新增一個響應關閉的函式
*/
closer.onclick = function() {
_that.overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* 新增單擊map 響應函式來處理彈窗動作
*/
this.map.on("singleclick",function(evt) {
console.log(evt.coordinate);
let coordinate = transform(
evt.coordinate,"EPSG:3857","EPSG:4326"
);
// 點選尺 （這裡是尺(米)，並不是經緯度）;
let hdms = toStringHDMS(toLonLat(evt.coordinate)); //http://www.cppcns.com 效果
2.2 autoPan 屬性為false效果
點選了螢幕最右邊，可以看到不會根據滑鼠點選位置進行適應地圖。
3. overlay 實現 label標註資訊
vue 頁面
addMarker() {
var marker = new Overlay({
position: fromLonLat([104.043505,30.58165]),positioning: "center-center",element: document.getElementById("marker"),stopEvent: false
});
this.map.addOverlay(marker);
},
4 overlay 實現 text文字資訊
vue 頁面
addText() {
var textInfo = new Overlay({
position: fromLonLat([104.043505,offset: [20,-20],element: document.getElementById("textInfo")
});
this.map.addOverlay(textInfo);
},
5. 附上完整程式碼
<template>
<div id="app">
<div id="map" ref="map"></div>
<div id="marker"></div>
<div id="textInfo">我是text文字資訊</div>
<div id="popup" class="ol-popup">
<a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" class="popup-content"></div>
</div>
</div>
</template>
<script>
import "ol/ol.";
import { Map,View,Coordinate } from "ol";
import { toStringHDMS } from "ol/coordinate";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Overlay from "ol/Overlay";
import { fromLonLat,transform,toLonLat } from "ol/proj";
// 彈出視窗實現
export default {
name: "dashboard",data() {
return {
map: null,overlay: null
};
},methods: {
initMap() {
let target = "map"; //跟頁面元素的 id 繫結來進行渲染
let tileLayer = new TileLayer({
source: new XYZ({
url:
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
})
});
let view = new View({
// projection: "EPSG:4326",//使用這個座標系
center: fromLonLat([104.912777,34.730746]),//地圖中心座標
zoom: 4.5 //縮放級別
});
this.map = new Map({
target: target,//繫結dom元素進行渲染
layers: [tileLayer],//配置地圖資料來源
view: view //配置地圖顯示的options配置（座標系，中心點，縮放級別等）
});
},/**
* 第一種：點標記 marker
* 建立一個標註資訊
*/
addMarker() {
var marker = new Overlay({
position: fromLonLat([104.043505,stopEvent: false
});
this.map.addOverlay(marker);
},/**
* 第二種：文字標籤 label
* 建立一個label標註資訊
*/
addText() {
var textInfo = new Overlay({
position: fromLonLat([104.043505,element: document.getElementById("textInfo")
});
this.map.addOverlay(textInfo);
},/**
* 第三種：彈窗式視窗 popup
* 建立一個彈窗popup資訊
*/
addPopup() {
// 使用變數儲存彈窗所需的 DOM 物件
var container = document.getElementById("popup");
var closer = document.getElementById("popup-closer");
var content = document.getElementById("popup-content");
// 建立一個彈窗 Overlay 物件
this.overlay = new Overlay({
element: container,//繫結 Overlay 物件和 DOM 物件的
autoPan: false,// 定義彈出視窗在邊緣點選時候可能不完整 設定自動平移效果
autoPanAnimation: {
duration: 250 //自動平移效果的動畫時間 9毫秒）
}
});
// 將彈窗新增到 map 地圖中
this.map.addOverlay(this.overlay);
let _that = this;
/**
* 為彈窗新增一個響應關閉的函式
*/
closer.onclick = function() {
_that.overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* 新增單擊響應函式來處理彈窗動作
*/
this.map.on("singleclick",function(evt) {
console.log(evt.cWgRmYoordinate);
let coordinate = transform(
evt.coordinate,"EPSG:4326"
);
// 點選尺 （這裡是尺(米)，並不是經緯度）;
let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 轉換為經緯度顯示
content.innerHTML = `
<p>你點選了這裡：</p>
<p>經緯度：<p><code> ${hdms} </code> <p>
<p>座標：</p>X：${coordinate[0]} Y: ${coordinate[1]}`;
_that.overlay.setPosition(evt.coordinate); //把 oWgRmYverlay 顯示到指定的 x,y座標
});
}
},mounted() {
this.initMap();
// 初始化彈窗方法
this.addText();
this.addMarker();
this.addPopup();
}
};
</script>
<style lang="scss" scoped>
html,body {
height: 100%;
}
#app {
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: none;
#map {
height: 888px;
min-height: calc(100vh - 50px);
}
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.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: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.popup-content {
width: 400px;
}
.ol-popup-closer:after {
content: "✖";
}
#marker {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
#textInfo {
width: 200px;
height: 40px;
line-height: 40px;
background: burlywood;
color: yellow;
text-align: center;
font-size: 20px;
}
</style>
到此這篇關於openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標註text文字)的文章就介紹到這了,更多相關vue openlayer popup地圖覆蓋物內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！