怎么实现vue+openlayer5获取当前鼠标滑过的坐标

本篇内容主要讲解“怎么实现Vue+openlayer5获取当前鼠标滑过的坐标”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么实现vue+openlayer5获取当前鼠标滑过的坐标”吧!

前言：       

 在vue项目中怎么获取当前鼠标划过的坐标呢，这里来分享下方法。 实现效果：

实现步骤：

引入相关文件

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,          ],        }),      });

加入鼠标事件

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);

页面上加入

<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获取当前鼠标滑过的坐标”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！