vue+openlayer5获取当前鼠标滑过的坐标实现方法
程序员文章站
2022-06-16 12:26:18
前言:在vue项目中怎么获取当前鼠标划过的坐标呢,这里来分享下方法。 实现效果:实现步骤:1、引入相关文件import mouseposition from 'ol/control/mouseposi...
前言:
在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鼠标坐标内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: Win11手机诞生!微软Surface Duo成功运行Win11
下一篇: iOS实现雷达扫描效果
推荐阅读
-
实现在同一方法中获取当前方法中新赋值的session值解决方法
-
百度地图实现获取某地点坐标数据的方法
-
jQuery实现鼠标滑过预览图片大图效果的方法
-
iOS基于AFNetworking的post、get方法的封装及获取当前网络状态的实现
-
Android实现Service获取当前位置(GPS+基站)的方法
-
Android编程实现悬浮窗获取并显示当前内存使用量的方法
-
vue给input file绑定函数获取当前上传的对象完美实现方法
-
oracle获取当前时间,精确到毫秒并指定精确位数的实现方法
-
Android中通过view方式获取当前Activity的屏幕截图实现方法
-
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法