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