ol3 - Ex7A - ol.ObjectEvent
__TODO__
- On souhaite supprimer l'interaction imposée à l'utilisateur (keypress) pour afficher la liste des descriptions. Comment faire ? Qu'est-ce qui ne marche justement pas ?
- Remplacer le callback keypress par ce qui suit :
// Set listener on addfeature (ol.source.VectorEvent)
vectorLayer.getSource().on("addfeature", function (e) {
$("#info").append($("").html(e.feature.get("title")));
});
- De nombreuses propriétés des classes OpenLayers sont "observables", comme celles de la classe [[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html|ol.View]]. Ajouter à l'exemple ce qui suit :
// Set listener on change:center (ol.ObjectEvent)
map.getView().on('change:center', function (e) {
$("#info").html("Center of the map: " + e.target.getCenter());
});
- Adapter l'exemple pour que soit automatiquement utilisé comme baselayer une couche Bingmaps dès que le niveau de zoom passe à une échelle plus grande que le niveau 6 (à la http://urbangene.heig-vd.ch).
__Résultat__
http://www.mediamaps.ch/oltuto/Ex7A_4.html
==== Ex7B : contrôle d'interrogation en mode image (WMS GetFeatureInfo) ====
Le gestionnaire d'événements cartographiques va notamment servir à déployer la dernière fonctionnalité de base d'une application de webmapping, celle qui consiste à interroger les objets de la carte.
Cet exemple illustre l'interrogation des objets de la carte par le simple clic d'un pixel sur la carte. On enregistre un écouteur sur la map à l'aide de la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.Map.html?unstable=true#on|ol.Map.on]] afin d'exécuter du code lors d'un click sur la map. On utilise ensuite la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.ImageWMS.html?unstable=true#getGetFeatureInfoUrl|ol.source.ImageWMS.getGetFeatureInfoUrl]] pour construire l'URL qui permet d'interroger le WMS. Enfin, la fonction //getFeatureInfo(url)// permet d'envoyer une requête au serveur WMS à l'aide de l'URL précédemment construite.
ol3 - Ex7B - interaction with WMS GetFeatureInfo control
Click on the map to get feature info
__TODO__
- Modifier encore une fois INFO_FORMAT comme suit :
INFO_FORMAT: "application/json",
que se passe-t-il à l'interrogation de la carte ? Regarder le flux client/serveur ... et exploitez-le pour n'afficher que le nom de pays.
- Encore mieux en deux étapes :
* ajouter une couche vecteur :
vectors = new ol.layer.Vector({
source: new ol.source.Vector()
});
map.addLayer(vectors);
* remplacer la **fonction getFeatureInfo** par celle-ci :
function getFeatureInfo(url) {
var url2 = encodeURIComponent(url);
var request = $.ajax({
url: "php/proxy2.php?url=" + url2,
dataType: "text"
});
request.done(function (data) {
decoder = new ol.format.GeoJSON();
features = decoder.readFeatures(data, {
dataProjection: "EPSG:4326",
featureProjection: "EPSG:3857"
});
//console.log(features);
if (features.length > 0) {
vectors.getSource().clear();
vectors.getSource().addFeatures(features);
$("#info").html(features[0].get("NAME"));
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
==== Ex7C : Interaction sur entités vectors ====
Après les utilisations possibles pour interagir avec les entités représentées par les services cartographiques, voyons comme interagir directement avec les entités vectors "vivantes" client-side. On tulise pour cela le concept d'[[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.html?unstable=true|ol.interaction]], notamment [[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.Select.html?unstable=true|ol.interaction.Select]].
ol3 - Ex7C - Interaction sur entités vectors
Select on the map to get feature info
__TODO__
- Utiliser l'[[http://openlayers.org/en/v3.19.1/apidoc/ol.events.condition.html|ol.events.condition]] qui va bien pour avoir le comportement type "on mouse over". Sans oublier de mettre l'IHM en cohérence (voir [[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.Select.Event.html#event:select|ol.interaction.Select.Event]] select).
- Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. https://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}}