vue+openlayer5獲取當前鼠標滑過的坐標實現方法
更新時間：2021年11月16日 08:49:43 作者：浩星
在vue項目中怎么獲取當前鼠標劃過的坐標呢？下面通過本文給大家分享實現步驟，感興趣的朋友跟隨小編一起看看吧
前言：
在vue項目中怎么獲取當前鼠標劃過的坐標呢，這里來分享下方法。 實現效果：
實現步驟：
1、引入相關文件
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'), //將位置數據放到那里
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>
到此這篇關于vue+openlayer5獲取當前鼠標滑過的坐標的文章就介紹到這了,更多相關vue+openlayer5鼠標坐標內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中添加與刪除，關鍵字搜索功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了實現一個 Vue 吸頂錨點組件方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
這次做項目的時候遇到需要切換預覽表格數據的需求,所以下面這篇文章主要給大家介紹了關于使用vue+element?ui實現走馬燈切換預覽表格數據的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue調試工具vue-devtools的安裝全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue 引入AMap高德地圖的實現代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue $attrs的使用全面解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue組件傳值的實現方式,結合實例形式總結分析了vue.js組建傳值的三種實現方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下2020-02-02