listening to changes in ol-view

[ghansham]

I am trying to listen to the changes in view within map. Unable to do that. As per the openlayers documentation, it fires following events:

Fires: change (module:ol/events/Event~BaseEvent) - Generic change event. Triggered when the revision counter is increased. change:center (module:ol/Object.ObjectEvent) change:resolution (module:ol/Object.ObjectEvent) change:rotation (module:ol/Object.ObjectEvent) error (module:ol/events/Event~BaseEvent) - Generic error event. Triggered when an error occurs. propertychange (module:ol/Object.ObjectEvent) - Triggered when a property is changed.

https://openlayers.org/en/latest/apidoc/module-ol_View-View.html

regards Ghansham

[ghettovoice]

Hello @ghansham , change:* events usually have an watchable property in VueLayers. So you can use std Vue API to react on center, zoom, resolution, .. changes.

<template>
  <vl-view :center.sync="center" :resolution.sync="resolution" :rotation.sync="rotation" />
</template>

<script>
export default {
  data () {
    return {
      center: [0, 0],
      resolution: 123123123,
      rotation: 0,
    }
  },
  watch: {
    center (val, prev) {
      // react on change
    },
    resolution (val, prev) {
      // react on change
    },
    rotation (val, prev) {
      // react on change
    },
  },
}
</script>

If you want you can replace .sync modifier with event binding

<vl-view @update:center="val => {}" @update:resolution="val => {}" ... />

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

[ghansham]

Thanks Sir. I will attempt method approach. I am sure it will work

On Wed, Sep 2, 2020, 20:36 Vladimir Vershinin notifications@github.com wrote:

Hello @ghansham https://github.com/ghansham , change:* events usually have an watchable property in VueLayers. So you can use std Vue API to react on center, zoom, resolution, .. changes.

If you want you can replace .sync modifier with event binding

<vl-view @update:center="val => {}" @update:resolution="val => {}" ... />

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/347#issuecomment-685797757, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYXFJBNXIKPJRBBRA4ASFLSDZNNVANCNFSM4PZUO47Q .