search

ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

Mouse position #432

Closed jaganacbozji closed 2 years ago

jaganacbozji commented 3 years ago

I have the example from openlayers but is there some custom control in vuelayers to do the same? i would like to console log mouse position in vue.

import 'ol/ol.css'; import Map from 'ol/Map'; import MousePosition from 'ol/control/MousePosition'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile'; import View from 'ol/View'; import {createStringXY} from 'ol/coordinate'; import {defaults as defaultControls} from 'ol/control';

var mousePositionControl = new MousePosition({ coordinateFormat: createStringXY(4), projection: 'EPSG:4326', // comment the following two lines to have the mouse position // be placed within the map. className: 'custom-mouse-position', target: document.getElementById('mouse-position'), undefinedHTML: ' ', });

var map = new Map({ controls: defaultControls().extend([mousePositionControl]), layers: [ new TileLayer({ source: new OSM(), }) ], target: 'map', view: new View({ center: [0, 0], zoom: 2, }), });

var projectionSelect = document.getElementById('projection'); projectionSelect.addEventListener('change', function (event) { mousePositionControl.setProjection(event.target.value); });

var precisionInput = document.getElementById('precision'); precisionInput.addEventListener('change', function (event) { var format = createStringXY(event.target.valueAsNumber); mousePositionControl.setCoordinateFormat(format); }); index.html <!DOCTYPE html>

Mouse Position
ghettovoice commented 3 years ago

Hello @jaganacbozji , currently controls is not covered by vuelayers api. But they can be added in runtime in the map event handlers. There is a demo https://jsfiddle.net/ghettovoice/qa8p913o/285/

jaganacbozji commented 3 years ago

ty comarade

jaganacbozji commented 3 years ago

i found similar solution: // inside template i added @pointermove

<vl-map id="infokarta" ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 100vh" @click="handleClick($event.coordinate)" @created="clickAndDrag" @pointermove="pointerMove"

..... import { ScaleLine } from 'ol/control'

mounted () {

// get vl-map by ref="map" and await ol.Map creation
this.$refs.map.$createPromise.then(() => {
  this.$refs.map.$map.addControl(new ScaleLine())
})

},

//and finally stored mouse position in the store::

methods: { pointerMove (event) { this.$store.commit('mapInfo/mousePosition', event.coordinate) // pass event object, bound to mouse move with updat },

works like a charm :D

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.