openlayers 6 Vue 2.. Prevent doubleclick zoom on map

Question

I am building an interactive map function using Vue2 and openlayers6. As part of the functionality for this I want to repurpose the doubleClick to interact with vector layer underneath the mouse, however the first thing I need to do is stop the doubleClick from triggering a zoom-in.

The following code is not working for me.

<script>
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import 'ol/ol.css'
import * as ol from 'ol'
import * as turf from "@turf/turf";

export default {
  name: 'Scratch',
  components: {},
  props:{},
  mounted() {
    const map = new Map({
      target: this.$refs['map-root'],
      interactions: ol.interaction.defaults({
        doubleClickZoom: false //  Cancel Double-click Enlarge function interaction
      }),
      layers:[
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        zoom:10,
        maxZoom:15,
        minZoom:7,
        center: this.convertToMercator(52.29525225869148,-2.3723602294921853),
        projection: 'EPSG:3857',
        extent: [-783938.1621,6420710.3760,217692.6566,8113331.9303], /* limits the map to UK mainland only*/
        constrainResolution: true
      })
    })
  },
  methods:{
     convertToMercator(lat, long) {
      const x = turf.toMercator([long, lat]);
      return x;
    },
    handleDblClick(e){
      console.log('got doubleclick')
      e.preventDefault()
    }
  }
}
 </script>

<template>
    <b-row >
      <b-col 
        
        :cols="8"
      >
      <b-container
       ref="map-root"
       @dblclick="handleDblClick"
      >


      </b-container>
      </b-col>
      <b-col 
        ref="list-root"
        :cols="4">
      </b-col>
    </b-row>
</template>

When the page tries to render, I am getting a vue warning message and the map is not rendered

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'defaults')"

If I comment out the interactions under map, the map will render and the handleDblClick is executed on double click the the zoom is not prevented.

It looks like a lot has changed in the API for OpenLayers between 3 and 6. I have also tried using vue layers but the documentation is sparse around event handling and I don't think it caters for my requirements.

score 0 · Answer 1 · answered Jan 27 '22 at 13:13

So this is how I have fixed it. Hope it is of some use to someone else. in Summary, imported defaults with an alias and used that directly in the interactions. The solution was in this post.
Openlayers 5 - Dynamically changing interactions

import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import 'ol/ol.css'
import {defaults as defaultInteractions} from 'ol/interaction'  // <-- Did this instead of full import of ol

import * as turf from "@turf/turf";

export default {
  name: 'Scratch',
  components: {},
  props:{},
  mounted() {
    const map = new Map({
      target: this.$refs['map-root'],
      /* set up the interactions like this without reference to ol or ol.interaction*/
      interactions: defaultInteractions({
        doubleClickZoom: false,
      }),
      layers:[
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        zoom:10,
        maxZoom:15,
        minZoom:7,
        center: this.convertToMercator(52.29525225869148,-2.3723602294921853),
        projection: 'EPSG:3857',
        extent: [-783938.1621,6420710.3760,217692.6566,8113331.9303], /* limits the map to UK mainland only*/
        constrainResolution: true
      })
    })
  },
  methods:{
     convertToMercator(lat, long) {
      const x = turf.toMercator([long, lat]);
      return x;
    },
    handleDblClick(e){
      console.log('got doubleclick')
      e.preventDefault()
    }
  }
}
 </script>

<template>
    <b-row >
      <b-col 
        
        :cols="8"
      >
      <b-container
       ref="map-root"
       @dblclick="handleDblClick"
      >


      </b-container>
      </b-col>
      <b-col 
        ref="list-root"
        :cols="4">
      </b-col>
    </b-row>
</template>

openlayers 6 Vue 2.. Prevent doubleclick zoom on map

1 Answers1