Ajout d’interactivités
Maintenant, il reste à rajouter de l’interactivité sur la carte.
Les interactivités que nous allons rajouter sont :
- surlignage et ajout d’étiquette au survol de souris
- rendre les régions cliquables
Surlignage des régions
Première étape, rendre les régions invisible. Pour cela, il suffit simplement d’ajouter un attribut ‘opacity’ au calque vectoriel. Et cet attribut doit être à zéro.
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'lien_vers_votre_image',
projection: projection,
imageExtent: extent
})
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
}),
opacity: 0
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
resolution: 1
}),
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
doubleClickZoom: false,
mouseWheelZoom: false,
shiftDragZoom: false,
dragPan: false
}),
controls:[]
});
Pour surligner les régions, il faut ajouter un style au survol de l’une d’elle.
Le style que l’on veut ajouter à la région survolée comprenant une étiquette, il faut utiliser une fonction.
function regionStyleFunction(feature, resolution) {
return new ol.style.Style({
fill: new ol.style.Fill({color: 'rgba(174,174,174, 0.5)'}), // remplissage
stroke: new ol.style.Stroke({width: 1, color: 'rgba(0,0,0,0.5)'}), // contour
text: new ol.style.Text({
overflow: true,
font: '14px sans-serif',
stroke: new ol.style.Stroke({
width:2,
color: 'rgba(255,255,255,1)'
}),
text: feature.get('name') // on récupère la propriété 'name' de la région survolée
})
});
}
Ensuite, on crée l’interaction pour appliquer le style :
var hover = new ol.interaction.Select({
condition: ol.events.condition.pointerMove, // déclenchement au déplacement de la souris
style: regionStyleFunction // style à appliquer, ici le résultat de la fonction ci-dessus
});
map.addInteraction(hover); // on ajoute l'interaction à la carte
Rendre les régions cliquables
Pour indiquer que la région est cliquable, au survol de la région, on change le pointeur de la souris pour qu’il soit celui indiquant un lien.
map.on('pointermove', function(e) {
if (e.dragging) return; // si il y a déplacement de la carte, on arrête
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel); // on vérifie si il y a un objet à l'endroit de l'événement
map.getTargetElement().style.cursor = hit ? 'pointer' : ''; // si besoin, on change le curseur
});
Ensuite, on ajoute la gestion du clic sur la carte.
map.on('click', function(evt) {
// on vérifie si il y a un objet à l'endroit du clic
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature;
});
if (feature) {
window.open(feature.get("wiki"), "_blank"); // on ouvre dans un nouvel onglet le site correspondant à la propriété "wiki" de la région ciblée
}
});
Et voilà !
Cet article est maintenant terminé. J’espère qu’il vous a été utile.
Un exemple fonctionnel est disponible ici.