0

I would like to observe things like maps.on('moveend') to update zoom level or center values. Currently I have a "construct" made up of computed params and watcher functions like this:

export default {
  [...],
  // Computed values are saved / read from vuex store
  computed: {
    currentLatLon: {
      get () {
        const obj = {
          lat: this.$store.getters.getCurrentLat,
          lon: this.$store.getters.getCurrentLon
        }
        return obj
      }
    },
    moveEnd: {
      get () {
        const val = this.olMap !== null
          ? this.olMap.on('moveend', () => {
              console.log('moveEnd; do something... getCenter()...'))
            }
          : false
        return val
      }
    }
  },
  watch: {
    currentLatLon (value) {
      console.log('watcher currentLatLon invoked: value =', value)
      // this.zoomToCurrentLocation()
    },
    moveEnd (value) {
      console.log('moveEnd: value =', value)
    }
  }
}

codesandbox with minimal code: https://codesandbox.io/s/openlayers-getzoom-74gnw?file=/src/components/MapContainer.vue

It works so far. But I am unsure, because it seems to be "double the trouble".

Is there a better way to observe Openlayers events in Vue?

4
  • At least for me it's not clear what "the issues" are and what the actual problem/question is.
    – TomazicM
    Feb 17, 2021 at 8:53
  • The question is, if the solution with Vue watchers is the proper way to listen to Openlayers' change events. Feb 17, 2021 at 10:57
  • Then edit your question and pose a single question, without this and that update and without mentioning issues, if there are none.
    – TomazicM
    Feb 17, 2021 at 11:03
  • I shortend the question. Feb 17, 2021 at 11:15

1 Answer 1

1

I answer this myself, maybe one day it helps somebody else:

OpenLayers event listeners are setup in Vue's "mounted" lifecycle hook. The function such an event listener calls is then defined regularly in "methods".

Example (Vue 2):

export default {
  data(() => {
    olMap: null,
    geolocation: null,
    [....]
  },
  mounted() {
    this.olMap = new Map({ ... })
    this.olMap.on('moveend', this.onMoveEnd)

    this.geolocation = new Geolocation({ ... })
    this.geolocation.on('change', this.onChange)
    this.geolocation.on('change:accuracyGeometry', this.onChangeAccuracyGeometry)
    [...]
    this.geolocation.on('error', this.onError)
  },
  methods: {
    onMoveEnd () { ... }
    onMoveChange () { ... }
    onChangeAccuracyGeometry () { ... }
    onError () { ... }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.