Shulou(Shulou.com)06/02 Report--

This article focuses on "how to achieve vue+openlayer5 to obtain the current mouse over the coordinates", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to achieve vue+openlayer5 to obtain the current mouse over the coordinates" bar!

Foreword:

How to get the current mouse-crossed coordinates in the vue project? here's how to share them. Achieve results:

Implementation steps:

1. Introduce 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.1601790616005653.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 location data there undefinedHTML:' & nbsp'}); this.map.addControl (mousePositionControl)

4. Add to the page

Location div so far, I believe that "how to achieve vue+openlayer5 to obtain the current mouse over the coordinates" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.