vue+openlayer5獲取當前鼠標滑過的坐標實現(xiàn)方法
更新時間:2021年11月16日 08:49:43 作者:浩星
在vue項目中怎么獲取當前鼠標劃過的坐標呢?下面通過本文給大家分享實現(xiàn)步驟,感興趣的朋友跟隨小編一起看看吧
前言:
在vue項目中怎么獲取當前鼠標劃過的坐標呢,這里來分享下方法。 實現(xiàn)效果:
實現(xiàn)步驟:
1、引入相關(guān)文件
import MousePosition from 'ol/control/MousePosition'; import {createStringXY} from 'ol/coordinate';
2、生成地圖
var layers = [ //深藍色背景 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、加入鼠標事件
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、頁面上加入
<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獲取當前鼠標滑過的坐標的文章就介紹到這了,更多相關(guān)vue+openlayer5鼠標坐標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-03-03Vue實現(xiàn)在線預覽pdf文件功能(利用pdf.js/iframe/embed)
項目要求需要預覽pdf文件,網(wǎng)上找了很久,發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)在線預覽pdf文件功能,主要利用pdf.js/iframe/embed來實現(xiàn)的,需要的朋友可以參考下2021-06-06