Closed empereira closed 4 years ago
Programmatic zooming:
this.$refs.view.$view.fit(extent)
https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit
Use props of VlView:
<template>
<vl-view :zoom.sync="zoom" center.sync="center" />
</template>
<script>
export default {
data() {
return {
center: [0, 0],
zoom: 1
}
},
methods: {
zoomToCoordinate(center, zoom) {
this.center = center
this.zoom = zoom
}
}
}
</script>
Use props of VlView:
<template> <vl-view :zoom.sync="zoom" center.sync="center" /> </template> <script> export default { data() { return { center: [0, 0], zoom: 1 } }, methods: { zoomToCoordinate(center, zoom) { this.center = center this.zoom = zoom } } } </script>
Edit: works!! Thanks
<button @click="zoomToCoordinate([0, 0], 6)">
<img src="../assets/center_map.png" title="Center Map" />
</button>
Yes
It seems firstly you need to learn the basics of working with Vue and "pure" OpenLayers
Yes, thanks!!!
@become-iron another question! :)
I can use the "center" and "zoom" variables already defined by:
export default {
data() {
return {
center: [0, 0],
zoom: 1
}
},
in the zoomToCoordinate() function in the button tag?
<button @click="zoomToCoordinate("HERE")">
<img src="../assets/center_map.png" title="Center Map" />
</button>
Sync modifier means that zoom and center properties will be changed periodically (https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier). So it hasn't a sense to use them in zoomToCoordinate
Just create variables for default center and zoom before "export default" and then use them in zoomToCoordinate
Ok! Now that I have noticed my mistake in the title of the question and consequently in the understanding of it.
I should have put that it is "center the map" at pre-defined coordinates. So I asked you about using the variables "center" and "zoom".
<template>
<vl-view :zoom.sync="zoom" center.sync="center" />
</template>
<script>
const center = [0, 0]
const zoom = 1
export default {
data() {
return {
center: center,
zoom: zoom
}
},
methods: {
zoomToInitialCoordinate() {
this.center = center
this.zoom = zoom
}
}
}
</script>
Thanks @become-iron!!!
Hello,
I'm trying to center the map on the coordinates and zoom I set, but I'm not getting it.
Maybe with $refs?