mapview_interactions_zoom.mjs
/**
## Mapview.interactions.zoom()
@module /mapview/interactions/zoom
@param {Object} params
The params object argument.
*/
export default function(params){
const mapview = this
// Finish the current interaction.
mapview.interaction?.finish()
mapview.interaction = {
finish: finish,
Layer: new ol.layer.Vector({
source: new ol.source.Vector()
}),
// Spread params argument.
...params
}
mapview.interaction.Layer.getSource().clear()
mapview.Map.addLayer(mapview.interaction.Layer);
mapview.Map.getTargetElement().style.cursor = 'zoom-in';
mapview.interaction.interaction = new ol.interaction.Draw({
source: mapview.interaction.Layer.getSource(),
type: 'Circle',
geometryFunction: ol.interaction.Draw.createBox(),
style: {
'stroke-color': '#ddd',
'fill-color': '#fff9'
}
})
mapview.interaction.interaction.on('drawend', e => {
mapview.fitView(e.feature.getGeometry().getExtent())
finish()
})
mapview.Map.addInteraction(mapview.interaction.interaction)
function finish() {
mapview.Map.getTargetElement().style.cursor = 'auto';
mapview.Map.removeInteraction(mapview.interaction.interaction)
mapview.Map.removeLayer(mapview.interaction.Layer)
mapview.interaction.Layer.getSource().clear()
mapview.interaction.callback?.()
}
}