Vue+openlayer5 method to get the coordinates of the current mouse slide

Preface:

How to get the coordinates of the current mouse in the Vue project? Here is a method to share. Result:

Implementation steps:

1. Import relevant documents

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

2. Generate a map

var layers = [
        //Dark blue background 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. Add mouse events

var mousePositionControl = new MousePosition({
         coordinateFormat: createStringXY(6), //Get the location projection: 'EPSG:4326',
         className: 'custom-mouse-position',
         target: document.getElementById('mouse-position'), //Put the position data there undefinedHTML: '&nbsp'
      });
      this.map.addControl(mousePositionControl);

4. Add on the page

<div id="map" class="map" ref="imageDom">
 
    Position 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>

This is the end of this article about vue+openlayer5 getting the coordinates of the current mouse. For more relevant vue+openlayer5 mouse coordinates content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of Vue's coordinate picker function example
vue-openlayers realizes the map coordinates pop-up box effect
Vue uses Gaode map to locate points according to coordinates
Vue method to get element width, height, distance from left, right, top, etc. as well as XY coordinate axis
Vue+Openlayers realizes real-time coordinate point display

<<: Three uses and differences of MySQL not equal

>>: Introduction to the use of select optgroup tag in html