GOOGLE ADS

samedi 30 avril 2022

OpenLayers 6 DragZoom Control - comment changer la condition

dans OL 6, je voudrais utiliser un bouton, afin qu'un utilisateur puisse cliquer pour activer un changement pour le contrôle du zoom par glissement afin qu'il soit disponible sans maintenir la touche Maj enfoncée. Dans https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragZoom-DragZoom.html, il répertorie l'option 'condition' pour gérer cela. Je ne pouvais pas comprendre comment changer et définir cette condition. Des exemples comment faire cela?


Solution du problème

Voici mon exemple, j'espère être utile.

Vous pouvez changer le style avec CSS ou dans votre JS.
Code HTML:

<style>
.ol-dragzoom {
border-color: red!important;
}
</style>
<div id="map"></div>
<div id="tool-zoom" class="shadow-sm">
<a id="tool-lupa" class="text-secondary">
<i class="icono-arg-lupa"></i>
</a>
</div>

Et le code JS:

 var aplica_lupa = function(e) {
const dragZoom = new ol.interaction.DragZoom({
condition: ol.events.condition.always,
})
map.addInteraction(dragZoom);
};
$("#tool-lupa").on("click",function() {
aplica_lupa();
})

Si vous importez des méthodes OL, évitez "ol.interaction...".
Et si vous voulez changer le style DragZoom dans votre JS, essayez quelque chose comme ceci:


const dragZoom = new ol.interaction.DragZoom({
condition: ol.events.condition.always,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#CD4D64',
width: 3
})
})
});

Et une autre option, avec l'interaction onclick remove :

 const dragZoom = new ol.interaction.DragZoom({
condition: ol.events.condition.always,
})
var aplica_lupa = function(e) {
map.addInteraction(dragZoom);
};
var remueve_lupa = function(e) {
map.removeInteraction(dragZoom);
};
$('#tool-lupa').bind('click', myHandlerFunction);
var first = true;
function myHandlerFunction(e) {
if(first){
document.body.style.cursor="all-scroll";
aplica_lupa();
}else{
document.body.style.cursor="default";
remueve_lupa();
}
first =!first;
}

Aucun commentaire:

Enregistrer un commentaire

Comment utiliseriez-vous .reduce() sur des arguments au lieu d'un tableau ou d'un objet spécifique&nbsp;?

Je veux définir une fonction.flatten qui aplatit plusieurs éléments en un seul tableau. Je sais que ce qui suit n'est pas possible, mais...