脚本宝典收集整理的这篇文章主要介绍了vue+openlayer5获取当前鼠标滑过的坐标实现方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在vue项目中怎么获取当前鼠标划过的坐标呢,这里来分享下方法。 实现效果:
1、引入相关文件
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: '&nbsp' }); 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鼠标坐标内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的vue+openlayer5获取当前鼠标滑过的坐标实现方法全部内容,希望文章能够帮你解决vue+openlayer5获取当前鼠标滑过的坐标实现方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。