vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)實(shí)現(xiàn)方法

更新時(shí)間：2021年11月16日 08:49:43 作者：浩星

在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢？下面通過本文給大家分享實(shí)現(xiàn)步驟，感興趣的朋友跟隨小編一起看看吧

前言：

在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢，這里來分享下方法。實(shí)現(xiàn)效果：

實(shí)現(xiàn)步驟：

1、引入相關(guān)文件

import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';

2、生成地圖

var layers = [
        //深藍(lán)色背景
        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、加入鼠標(biāo)事件

var mousePositionControl = new MousePosition({
         coordinateFormat: createStringXY(6),//獲取位置
         projection: 'EPSG:4326',
         className: 'custom-mouse-position',
         target: document.getElementById('mouse-position'), //將位置數(shù)據(jù)放到那里
         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>

到此這篇關(guān)于vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)的文章就介紹到這了,更多相關(guān)vue+openlayer5鼠標(biāo)坐標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中添加與刪除關(guān)鍵字搜索功能
這篇文章主要介紹了vue中添加與刪除，關(guān)鍵字搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue3中addEventListener的用法詳解
vue3中定義全局指令時(shí),往往會(huì)碰到一個(gè)問題：事件無法解綁,為什么會(huì)這樣,因?yàn)橥ǔＴ谥噶畹膍ounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下
2023-08-08
使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
如何修改ant?design組件自帶樣式
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
ant-desigin-vue中form表單的使用解讀
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue $attrs的使用全面解析
這篇文章主要介紹了vue $attrs的使用全面解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue組件傳值的實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js組建傳值的三種實(shí)現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下
2020-02-02