本篇内容主要讲解“怎么实现vue+openlayer5获取当前鼠标滑过的坐标”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么实现vue+openlayer5获取当前鼠标滑过的坐标”吧!
在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获取当前鼠标滑过的坐标”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
