您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)openlayers6中地圖覆蓋物overlay怎么用,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
①:實(shí)例一個(gè)
new Overlay()
,設(shè)置相關(guān)的屬性,element 是和頁(yè)面的 最外層彈窗的dom進(jìn)行綁定
②:通過(guò)map.addOverlay(this.overlay)
把 overlay彈窗添加到頁(yè)面
③:closer.onclick
添加一個(gè) x 關(guān)閉彈窗事件
④:通過(guò)this.map.on("singleclick", function(evt)
事件點(diǎn)擊地圖觸發(fā)彈窗效果
具體代碼如下:
addPopup() { // 使用變量存儲(chǔ)彈窗所需的 DOM 對(duì)象 var container = document.getElementById("popup"); var closer = document.getElementById("popup-closer"); var content = document.getElementById("popup-content"); // 創(chuàng)建一個(gè)彈窗 Overlay 對(duì)象 this.overlay = new Overlay({ element: container, //綁定 Overlay 對(duì)象和 DOM 對(duì)象的 autoPan: true, // 定義彈出窗口在邊緣點(diǎn)擊時(shí)候可能不完整 設(shè)置自動(dòng)平移效果 autoPanAnimation: { duration: 250 //自動(dòng)平移效果的動(dòng)畫時(shí)間 9毫秒) } }); // 將彈窗添加到 map 地圖中 this.map.addOverlay(this.overlay); let _that = this; /** * 為彈窗添加一個(gè)響應(yīng)關(guān)閉的函數(shù) */ closer.onclick = function() { _that.overlay.setPosition(undefined); closer.blur(); return false; }; /** * 添加單擊map 響應(yīng)函數(shù)來(lái)處理彈窗動(dòng)作 */ this.map.on("singleclick", function(evt) { console.log(evt.coordinate); let coordinate = transform( evt.coordinate, "EPSG:3857", "EPSG:4326" ); // 點(diǎn)擊尺 (這里是尺(米),并不是經(jīng)緯度); let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 轉(zhuǎn)換為經(jīng)緯度顯示 content.innerHTML = ` <p>你點(diǎn)擊了這里:</p> <p>經(jīng)緯度:<p><code> ${hdms} </code> <p> <p>坐標(biāo):</p>X:${coordinate[0]} Y: ${coordinate[1]}`; _that.overlay.setPosition(evt.coordinate); //把 overlay 顯示到指定的 x,y坐標(biāo) }); }
效果
點(diǎn)擊了屏幕最右邊,可以看到不會(huì)根據(jù)鼠標(biāo)點(diǎn)擊位置進(jìn)行適應(yīng)地圖。
vue 頁(yè)面
addMarker() { var marker = new Overlay({ position: fromLonLat([104.043505, 30.58165]), positioning: "center-center", element: document.getElementById("marker"), stopEvent: false }); this.map.addOverlay(marker); },
vue 頁(yè)面
addText() { var textInfo = new Overlay({ position: fromLonLat([104.043505, 30.58165]), offset: [20, -20], element: document.getElementById("textInfo") }); this.map.addOverlay(textInfo); },
<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.css"; 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"; // 彈出窗口實(shí)現(xiàn) export default { name: "dashboard", data() { return { map: null, overlay: null }; }, methods: { initMap() { let target = "map"; //跟頁(yè)面元素的 id 綁定來(lái)進(jìn)行渲染 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", //使用這個(gè)坐標(biāo)系 center: fromLonLat([104.912777, 34.730746]), //地圖中心坐標(biāo) zoom: 4.5 //縮放級(jí)別 }); this.map = new Map({ target: target, //綁定dom元素進(jìn)行渲染 layers: [tileLayer], //配置地圖數(shù)據(jù)源 view: view //配置地圖顯示的options配置(坐標(biāo)系,中心點(diǎn),縮放級(jí)別等) }); }, /** * 第一種:點(diǎn)標(biāo)記 marker * 創(chuàng)建一個(gè)標(biāo)注信息 */ addMarker() { var marker = new Overlay({ position: fromLonLat([104.043505, 30.58165]), positioning: "center-center", element: document.getElementById("marker"), stopEvent: false }); this.map.addOverlay(marker); }, /** * 第二種:文字標(biāo)簽 label * 創(chuàng)建一個(gè)label標(biāo)注信息 */ addText() { var textInfo = new Overlay({ position: fromLonLat([104.043505, 30.58165]), offset: [20, -20], element: document.getElementById("textInfo") }); this.map.addOverlay(textInfo); }, /** * 第三種:彈窗式窗口 popup * 創(chuàng)建一個(gè)彈窗popup信息 */ addPopup() { // 使用變量存儲(chǔ)彈窗所需的 DOM 對(duì)象 var container = document.getElementById("popup"); var closer = document.getElementById("popup-closer"); var content = document.getElementById("popup-content"); // 創(chuàng)建一個(gè)彈窗 Overlay 對(duì)象 this.overlay = new Overlay({ element: container, //綁定 Overlay 對(duì)象和 DOM 對(duì)象的 autoPan: false, // 定義彈出窗口在邊緣點(diǎn)擊時(shí)候可能不完整 設(shè)置自動(dòng)平移效果 autoPanAnimation: { duration: 250 //自動(dòng)平移效果的動(dòng)畫時(shí)間 9毫秒) } }); // 將彈窗添加到 map 地圖中 this.map.addOverlay(this.overlay); let _that = this; /** * 為彈窗添加一個(gè)響應(yīng)關(guān)閉的函數(shù) */ closer.onclick = function() { _that.overlay.setPosition(undefined); closer.blur(); return false; }; /** * 添加單擊響應(yīng)函數(shù)來(lái)處理彈窗動(dòng)作 */ this.map.on("singleclick", function(evt) { console.log(evt.coordinate); let coordinate = transform( evt.coordinate, "EPSG:3857", "EPSG:4326" ); // 點(diǎn)擊尺 (這里是尺(米),并不是經(jīng)緯度); let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 轉(zhuǎn)換為經(jīng)緯度顯示 content.innerHTML = ` <p>你點(diǎn)擊了這里:</p> <p>經(jīng)緯度:<p><code> ${hdms} </code> <p> <p>坐標(biāo):</p>X:${coordinate[0]} Y: ${coordinate[1]}`; _that.overlay.setPosition(evt.coordinate); //把 overlay 顯示到指定的 x,y坐標(biāo) }); } }, 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, 0, 0.2)); filter: drop-shadow(0 1px 4px rgba(0, 0, 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>
關(guān)于“openlayers6中地圖覆蓋物overlay怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。