3 votos

Desactivar la panorámica y el zoom en OpenLayers

Estoy utilizando la última versión de OpenLayers en mi aplicación de mapas, y necesito desactivar todas las funciones de zoom y panorámica para los usuarios. El zoom, el zoom del ratón, el zoom de doble clic y el zoom de los botones de control necesitan ser deshabilitados.

¿Cómo puedo hacerlo? He hecho algunas búsquedas, pero sólo he encontrado cómo desactivar todo, y necesito otras interacciones como un solo clic en una característica.

4voto

Maroon Puntos 126

En OpenLayers 5 utilizando módulos ES:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {defaults as defaultInteractions} from 'ol/interaction.js';`

new Map({
  target:'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0,0],
    zoom: 2
  }),
  interactions: defaultInteractions({
    doubleClickZoom: false,
    dragAndDrop: false,
    dragPan: false,
    keyboardPan: false,
    keyboardZoom: false,
    mouseWheelZoom: false,
    pointer: false,
    select: false
  }),
})

2voto

Edil Kratskih Puntos 26
      var map = new ol.Map({
    interactions: ol.interaction.defaults({
      doubleClickZoom: false,
      dragAndDrop: false,
      dragPan: false,
      keyboardPan: false,
      keyboardZoom: false,
      mouseWheelZoom: false,
      pointer: false,
      select: false
    }),
    controls: ol.control.defaults({
      attribution: false,
      zoom: false,
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.TileImage({
          url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}'
        })
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  map.on('singleclick', function(evt) {
  alert("clicked");
  });

jsfiddle para probar

0voto

Holly Puntos 1

Hay una forma sencilla si quieres desactivar todas las interacciones a la vez:

import Map from 'ol/Map'
import Collection from 'ol/Collection'

new Map({
  ...,
  interactions: new Collection()
})

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X