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獲取當前鼠標滑過的坐標的文章就介紹到這瞭,更多相關vue+openlayer5鼠標坐標內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue+Openlayer實現圖形的拖動和旋轉變形效果
- Vue中使用Openlayer實現加載動畫效果
- Vue+Openlayer使用modify修改要素的完整代碼
- Vue+Openlayer批量設置閃爍點的實現代碼(基於postrender機制)
- 基於Vue+Openlayer實現動態加載geojson的方法