vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)實(shí)現(xiàn)方法
更新時(shí)間：2021年11月16日 08:49:43 作者：浩星
在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢？下面通過本文給大家分享實(shí)現(xiàn)步驟，感興趣的朋友跟隨小編一起看看吧
前言：
在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢，這里來(lái)分享下方法。 實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
1、引入相關(guān)文件
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';
2、生成地圖
var layers = [
//深藍(lán)色背景
new TileLayer({
source: new XYZ({
url:
"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
}),
}),
];
this.map = new Map({
layers: layers,
target: "map",
view: new View({
center: this.center,
projection: this.projection,
zoom: this.centerSize,
maxZoom: 17,
minZoom: 5,
extent: [
73.32783475401652, 3.33795, 135.16017906160056,
53.83501005646246,
],
}),
});
3、加入鼠標(biāo)事件
var mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(6),//獲取位置
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'), //將位置數(shù)據(jù)放到那里
undefinedHTML: ' '
});
this.map.addControl(mousePositionControl);
4、頁(yè)面上加入
<div id="map" class="map" ref="imageDom">
位置div
<div id="mouse-position" style="
color: #fff;
position: absolute;
bottom:10px;
right:10px;
z-index: 10000000;
width: 200px;
line-height: 30px;
background: rgba(0,0,0,0.5);
"></div>
</div>
到此這篇關(guān)于vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)的文章就介紹到這了,更多相關(guān)vue+openlayer5鼠標(biāo)坐標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧‘2017-09-09
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
很多朋友遇到這樣的問題當(dāng)vue打包后顯示空白問題，遇到這樣的問題怎么處理呢？下面腳本之家小編給大家分享下vue打包后顯示空白正確處理方法，感興趣的朋友一起看看吧2017-11-11
這篇文章主要介紹了vue Tab切換以及緩存頁(yè)面處理的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在我們開發(fā)項(xiàng)目中,特別是流程審批類的項(xiàng)目,最后一步會(huì)提交審核,審核員看完相應(yīng)信息以后,沒問題就會(huì)簽字通過審批,這篇文章主要給大家介紹了關(guān)于VUE簽字組件vue-esign安裝使用的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來(lái)實(shí)現(xiàn)的,需要的朋友可以參考下2021-06-06
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
利用Vue3實(shí)現(xiàn)可復(fù)制表格的方法詳解
表格是前端非常常用的一個(gè)控件，本文主要為大家介紹了Vue3如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的可以復(fù)制的表格，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-12-12
這篇文章主要介紹了Vue中插入HTML代碼的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09