ol3 -Ex1A - create a first map with a WMS layer

d'ID //map// est la cible de visualisation (la vue cartographique) * C'est la position et la taille de cette div qui déterminent comment la vue s'intègre dans l'interface * OpenLayers est accompagné de nombreuses prédéfinitions de déclarations CSS __TODO__ - Où sont-elles décrites ? - Trouvez celles qui habillent les boutons zoomin/zoomout ! - Ajoutez la CSS ci-dessous


.ol-zoom:hover {
  background: lightskyblue;
}

.ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out {
  background-color: tomato;
  border-radius: 50%;
}

=== Initialisation de la carte === * L'objet //[[http://openlayers.org/en/v3.1.1/apidoc/ol.Map.html?unstable=true|ol.Map]]// est associé à l'ID de la cible de visualisation * L'objet //[[http://openlayers.org/en/v3.1.1/apidoc/ol.View.html?unstable=true|ol.View]]// représente la vue 2D de la map. Il permet de définir le centre, la résolution et la rotation de la map * Un objet //[[http://openlayers.org/en/v3.1.1/apidoc/ol.layer.html?unstable=true|ol.Layer]]// est défini pour chaque couche à ajouter à la carte * L'objet //[[http://openlayers.org/en/v3.1.1/apidoc/ol.source.ImageWMS.html?unstable=true|ol.source.ImageWMS]]// permet de définir les paramètres d'une requête WMS pour obtenir une couche servie par un serveur cartographique conforme au standard OGC WMS (http://www.opengeospatial.org/standards/wms) * La méthode //fitExtent// termine l'initialisation en définissant l'enveloppe géographique de visualisation __TODO__ - Modifier la méthode fitExtent() comme suit (voir [[http://openlayers.org/en/v3.1.1/apidoc/ol.View.html?unstable=true#fitExtent|fitExtent]])


map.getView().fitExtent([-18,38,38,55],map.getSize());
console.log(map.getView().getProjection());

- Quelle différence en ajoutant une couche //Tile// plutôt que //Image//?


var wmsTileLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
    url: "https://eu1.mapcentia.com/wms/oertz/public",
    params:{
      VERSION: "1.1.1",
      LAYERS: 'public.world_simple',
      FORMAT: 'image/png'
    }
  }),
})

- Rendre visible la grille régulière des tuiles en plaçant l'instruction CSS ci-dessous au bon endroit


border: 1px solid coral;

- Rechercher et tester d'autres couches de serveurs cartographiques WMS (par exemple de celui-ci : http://maps.opengeo.org/geowebcache/service/wms?request=GetCapabilities) ===== 2. Cache de tuiles ===== Avec singleTile à false, le client contrôle la grille de tuiles qu'il peut garder en cache. Néanmoins, à chaque requête initiale de tuile, tout le processus de rendu cartographique se fait. Mais puisqu'une couche de tuiles fait des requêtes d'images selon une grille régulière, il est possible pour le serveur de préparer un cache de ces images. Le service cartographique WMS permettant une grande flexibilité en terme de ce que le client peut demander. Côté serveur, cela rend difficile la mise en cache. A l'extrême opposé, un service peut aussi offrir des tuiles pour un ensemble prédéfini de niveaux de zoom et pour une grille régulière prédéfinie. On parle de couches de tuiles avec une source XYZ - avec X et Y indiquant la colonne et la rangée de la grille et Z le niveau de zoom. Il faut voir cela comme une [[http://georezo.net/wiki/_media/main/standards/tilematrixset.png|pyramide de tuiles]]. ==== Ex2A : ol.source.OSM ====



    
        ol3 -Ex2A - webmap with tiled layer

__TODO__ - Modifier le centrage et le zoom de la carte comme suit :


//map.getView().fitExtent(extent, map.getSize());
map.getView().setCenter(ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857"))
map.getView().setZoom(10)

- Insérer en fin de code du callback //ready// les logs ci-dessous :


console.log("Map projection: " + map.getView().getProjection().getCode());
console.log("Map extent: " + map.getView().calculateExtent(map.getSize()));
console.log("LonLat Mercator: " + new ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857"));
console.log("LonLat Google: " + new ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857"));

- Remplacer la définition de la couche //[[http://openlayers.org/en/v3.1.1/apidoc/ol.source.OSM.html|ol.source.OSM]]// comme suit :


ol.source.OSM({
  url: "http://api.tiles.mapbox.com/v3/oertz.map-i2ak2ozc/{z}/{x}/{y}.png"
})

- Remplacer la définition de la couche comme suit :


ol.source.
 url:"http://urbangene.heig-vd.ch/tilecache/{z}/{x}/{y}.
 attributions: [
  new ol.Attribution({
   html: "Based on OpenStreetMap / MapBox restyled by oertz :: HEIG-VD"
  })
 ]
})

et ajouter l'instruction CSS suivante :


.ol-attribution {
  background-color: CornflowerBlue !important;
  right: 50px;
  left: initial;
  bottom: initial;
  top: 0px;
}

==== Ex2B : ol.source.BingMaps ==== L'utilisation d'un cache serveur de tuiles a largement été popularisé par des services propriétaires comme Bing Maps. OpenLayers étant indépendant de toute source de données, l'API offre également un type de couche pour dialoguer avec de tels services. __TODO__ - Partir de l'exemple précédent en adaptant le code JavaScript comme suit :


map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.BingMaps({
                key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
                imagerySet: 'AerialWithLabels'
            })
        })
    ]
});

map.getView().setCenter(ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857"))
map.getView().setZoom(6)

- Modifier le paramètre de type de couche selon la [[https://www.bingmapsportal.com/|documentation Bing Maps]]. Contrairement à un service WMS, le service de Bing Maps se sait pas s'auto-décrire. Mais comme il n'y a qu'un seul service Bing Maps au monde, une documentation suffit. ==== Ex2C : OpenLayers.Layer.WMTS ==== Swisstopo offre un [[http://api.geo.admin.ch/main/wsgi/doc/build/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit.



  
    ol3 -Ex2C - webmap with tiled layer

__TODO__ - Par défaut, openlayers ne reconnaît pas la projection suisse EPSG:21781. Il est obligatoire de définir comment openlayers [[http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html?unstable=true|(ol.proj)]] doit traiter et transformer les données dans ce système de projection. Swisstopo propose un [[http://www.swisstopo.admin.ch/internet/swisstopo/en/home/products/software/products/skripts.html|script JS]] (swissProjection.js) permettant de transformer des coordonées WGS84 en coordonées suisses LV03 (CH1903).


ol.proj.addCoordinateTransforms('EPSG:4326', projection, //projection: la projection définie précédemment
  function(coordinate) {
    return [
      WGStoCHy(coordinate[1], coordinate[0]),
      WGStoCHx(coordinate[1], coordinate[0])
    ];
  },
  function(coordinate) {
    return [
      CHtoWGSlng(coordinate[0], coordinate[1]),
      CHtoWGSlat(coordinate[0], coordinate[1])
    ];
});

- On peut ensuite centrer la carte comme suit:map.getView().setCenter(ol.proj.transform([7.658, 45.98], 'EPSG:4326', 'EPSG:21781')); - Modifier maintenant le centrage comme suit:map.getView().setCenter([600000, 200000]); map.getView().setZoom(8); - Modifier les paramètres de l'url comme suit: * //identifier//: ch.swisstopo.hiks-dufour * //format//: png * //time//: 18650101 ===== 3. Style de couche "image" ===== Pour le moment, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis. Voyons comment le client peut dire son mot et piloter le style "à distance". ==== Ex3A : Styling avec WMS ==== Le standard WMS offre beaucoup de libertés, parfois au détriment de la performance. Comme il permet de demander ce que l'on veut en termes d'enveloppe géographique (paramètre bbox) et de style parmis un ensemble de styles pré-configurer, il est possible d'envoyer au serveur cartographique des instructions personnalisées de style.



    
        ol3 - Ex3A - use of a custom SLD style

__TODO__ - Comment OpenLayers sait-il qu'il faut interroger l'habituelle couche public.world_simple ? - Avec Firefox RESTClient (ou autre équivalent), lancer la requête POST suivante sur le serveur WMS :



 
	             geoinf:world_simple

puis lancer



 
	
	   REGION

- Créer votre propre pinkWorld.sld.xml en y insérant l'instruction //Filter// suivante en début de //Rule// (ex. mettre ce fichier dans un espace type Dropbox pour que le serveur WMS puisse y accéder)


                ...
                
                    
                        
                            region
                            NorthAfrica                            
                        
                    
                    
                    ...

- Ajouter la Rule suivante après la première :

- Modifier le style pour que la Suisse soit représentée comme ci-dessous. - voir la spécification [[http://portal.opengeospatial.org/files/?artifact_id=1188|Styled Layer Descriptor]] - et le [[http://docs.geoserver.org/stable/en/user/styling/index.html|tutoriel SLD]] {{ :ogo14:screenshot1.png?200 |}} ==== Ex3C : Custom tiling service with CartoCSS ==== * Introduction avec MapBox et exercices : {{:geoinf14:cartocss.pdf|}} * Symbol drawing order : [[http://ogo.heig-vd.ch/wiki/lib/exe/fetch.php?t=1416926000&w=417&h=500&tok=5bd897&media=geoinf14:symbol-rendering-order.png|schema]] & [[https://www.mapbox.com/tilemill/docs/guides/symbol-drawing-order/#symbol_drawing_order|documentation]]



    
        ol3 - Ex3C - webmap with your own MapBox basemap

__TODO__ - Modifier le code nécessaire ci-dessus pour créer une application geoweb utilisant votre style MapBox. ===== 4. Composition de couches ===== Un intérêt d'une carte en ligne est de pouvoir la composer à partir de plusieurs couches. ==== Ex4A : Composition "server-side" ==== La composition peut se faire par un assemblage côté serveur. L'Ex3C a déjà bien montré comment préparer un tel assemblage. Ci-dessous un assemblage "à la demande". Notez bien, plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons.... Problèmes... Impossible de retourner la map demandée


    
        ol3 - Ex4A - one WMS request for two layers

__TODO__ - Apporter la preuve que l'assemblage s'est fait côté serveur - Trouver un tel type d'assemblage parmi les [[https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes|Basic Map Types]] de l'API Google Maps. ==== Ex4B : Composition "client-side" ==== Un cadre applicatif de cartographie en ligne se doit de fournir la capacité de gérer la composition côté client. Openlayers 3 ne fournit [[https://twitter.com/RemiBovard/status/525028570780139520|pour l'instant pas]] d'outils pour gérer cela. Toutefois il existe des //controls// développé en externe comme [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] utilisé dans l'exemple ci-dessous :



    
        ol3 - Ex4B - two WMS base layers

__TODO__ - Est-ce vraiment ce que l'on veut (remarquer le nouveau contrôle apparu dans l'IHM) ? - Comment faire pour vraiment assembler/superposer ces deux couches côté client ? - Partant de Ex2B, créer une application de webmapping avec la composition suivante : - une couche de base Bing Maps (ex. Aerial) - une superposition basée sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo (voir [[http://www.geo.admin.ch/internet/geoportal/fr/home/services/geoservices/display_services/services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:ogo14:screenshot2.png?200}} - Ajouter en superposition votre style MapBox représentant les communes de Suisse (cf. Ex3C - Introduction) comme ci-dessous : \\ \\ Illustration du résultat attendu : {{:geoinf14:communes-overlay.png?200|}} - Remplacer la couche de base Bing Maps par la couche MapBox //examples.map-i86nkdio// ==== Ex4C : On-the-fly CartoCSS with CartoDB ==== Jusqu'à présent, les styles CartoCSS devaient être préparés et chargés avec le Studio vers un compte MapBox. La suite montre une approche plus souple permettant de définir "programmatiquement" le style à appliquer sur une couche de données chargées sur un compte [[http://cartodb.com/|CartoDB]].



    
        ol3 - Ex4C - webmap with tiled layer

__TODO__ - Adapter le style pour afficher les districts Vaudois différemment des autres (utiliser l'attribut //ak// avec sa valeur //'VD'//) - Adapter l'application pour que le style CartoCSS soit chargé synchronnement depuis un fichier //monStyle.mss//. ===== 5. Couche "vector" ===== Dans les sections précédentes nous avons inséré des couches cartographique sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire. A l'opposé, pour une couche OpenLayers.Layer.Vector c'est le client qui joue le rôle de moteur cartographique pour créer la visualisation d'entités géographiques (Features en anglais). ==== Ex5A : Source de données OpenLayers.Format ==== Une couche [[http://openlayers.org/en/v3.4.0/apidoc/ol.layer.Vector.html?unstable=true|ol.layer.Vector]] peut être alimentée par une source de données au format [[http://openlayers.org/en/v3.4.0/apidoc/ol.source.GeoJSON.html?unstable=true|ol.source.GeoJSON]] (voir aussi http://geojson.org). Il existe de nombreux autres formats : [[http://openlayers.org/en/v3.4.0/apidoc/ol.source.GPX.html?unstable=true|ol.source.GPX]], [[http://openlayers.org/en/v3.4.0/apidoc/ol.source.TopoJSON.html?unstable=true|ol.source.TopoJSON]], [[http://openlayers.org/en/v3.4.0/apidoc/ol.source.KML.html?unstable=true|ol.source.KML]], ...)



    
        ol3 - Ex5A - GeoJSON vector overlay

__TODO__ - Apporter la preuve que les données sont bien transformées en objets graphiques côté client ! - Remplacer l'URL source par


http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson

- Dans une div HTML, afficher la liste des descriptions des séismes --> corrigé : url? - Modifier l'url comme suit et modifier le type de source de données en conséquence:


url: 'http://www.visugpx.com/files/download.php?id=1416844831'

en recentrant la carte par ici :


view: new ol.View({
  center:[766225, 5908730],
  zoom: 10
}),

Pourquoi cela ne fonctionne pas? - Notons aussi le Geographic Markup Language de l'OGC qui "consiste en un ensemble de schémas XML qui définissent un format ouvert pour l'échange de données géographiques et permettent de construire des modèles de données spécifiques pour des domaines spécialisés, comme l'urbanisme, l'hydrologie ou la géologie" //(source Wikipedia)// \\ Exemple : http://geoc.heig-vd.ch/ogo/olmap/data/fourCapitals.gml ==== Ex5B : ol.source.Vector sous la loupe ==== L'exemple ci-dessous décrit en détail ce qu'est une source de donnée ol.source.Vector pour une couche ol.layer.Vector en montrant comment la créer et l'alimenter à partir d'un format de source de données "fait maison". En résumé, une source [[http://openlayers.org/en/v3.1.1/apidoc/ol.source.Vector.html?unstable=true|ol.source.Vector]] est composée d'entités géographiques ([[http://openlayers.org/en/v3.1.1/apidoc/ol.Feature.html?unstable=true|ol.Feature]]) chacune composée d'une géométrie ([[http://openlayers.org/en/v3.1.1/apidoc/ol.geom.html?unstable=true|ol.geom]]) et d'une liste d'attributs. La source de données est un fichier texte formaté comme suit:


2.3332999999999999 48.866700000000002 Paris,7.4333 46.950000000000003 Bern,12.5 41.883299999999998 Rome,-3.71 40.409999999999997 Madrid

La structure de formatage est simple : c'est une suite de triplets "Longitude Latitude Nom" dont le séparateur interne est l'espace. Le séparateur entre triplets est la virgule. Chaque triplet correspond à une entité géographique. Le code ci-dessous déchiffre cette structure et transforme les triplets en OpenLayers.Feature.Vector.



    
        ol3 - Ex5B - custom format for vector overlay

__TODO__ - Inspecter l'objet OpenLayers qui gère la persistence de ces entités géographiques côté client (ex. avec Firebug) - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :

2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Suisse,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain

- et réinspecter pour vérifier. ===== 6. Style "vector" ===== OpenLayers met à disposition une classe [[http://openlayers.org/en/v3.4.0/apidoc/ol.style.html|ol.style]] permettant d'appliquer des styles aux features (entités géographiques) d'une couche [[http://openlayers.org/en/v3.4.0/apidoc/ol.layer.Vector.html|ol.vector]]. ==== Ex6A : Style d'entité ==== Openlayers applique un style par défaut aux features, mais il est possible de redéfinir ce style (forme, couleur, etc.).



    
        ol3 - Ex6A - One feature, one style

__TODO__ - Remplacer le style avec les propriétés suivantes :


var style =  new ol.style.Style({
    image: new ol.style.Icon({
        src:"http://www.cretasolaris.gr/gfx/marker.png",
        size:[36,33],
        opacity:1
    })
})

==== Ex6B : Style de couche ==== L'approche la plus répandue consiste à associer un style à une couche.



    
        ol3 - Ex6B - One layer, one style

__TODO__ - Ajouter une entité géographique de plus comme suit :


var feature2 = new ol.Feature({
    geometry: new ol.geom.Point([1938600, 6840171]),
    name: "The hobbits are far away...",
    author: "Gandalf"
});
vecLayer.getSource().addFeature(feature2)

==== Ex6C : Fonction de style ==== Plutôt que d'appliquer un style identique à toutes les entités d'une couche, il est possible d'appliquer un style différents basé sur les propriétés de chacune des entités. Pour cela, Openlayers propose de remplacer l'objet //ol.style.Style// par une fonction //ol.style.StyleFunction()//. Dans l'exemple ci-dessous on affiche un titre différent en fonction de la propriété "name" de chaque entité.



    
        ol3 - Ex6C - Styling function

__TODO__ - Ajouter une couche vectorielle de données au format WFS.


var wfsFormat = new ol.format.WFS({
    featureNS:"http://mediamaps.ch/geoinf",
    featureType:"cities"
})
var vectorSource = new ol.source.ServerVector({
    format: new ol.format.WFS({
        featureNS:"http://twitter/oertz",
        featureType:"cities"
    }),
    loader: function(extent, resolution, projection) {
         var url = 'http://geoserver-heig.rhcloud.com/geoinf/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=geoinf:cities&srsname=EPSG:3857'
        $.ajax({
            url: url
        })
        .done(function(response) {
            vectorSource.addFeatures(wfsFormat.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.all,
    projection: 'EPSG:4326'
});

var citiesLayer = new ol.layer.Vector({
  source: vectorSource
})

Openlayers applique un style par défaut aux features [[http://openlayers.org/en/v3.4.0/apidoc/ol.style.html?unstable=true|ol.style]]. __TODO__ - Appliquer un style différent en fonction de la région géographique (//geo_region//) des entités. - Reprendre Ex5A avec le flux http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson et un style basé sur une fonction de contexte pour représenter par classification l'intensité des séismes (exploiter l'attribut mag, voir aussi Echelle de Richter). ===== 7. Feature access and controls ===== OpenLayers offre un ensemble de fonctionnalités permettant d'interagir avec la carte. Par défaut, les interactions de zoom et pan sont actives mais il en existe d'autres ([[http://openlayers.org/en/v3.4.0/apidoc/ol.control.html?unstable=true|ol.control]]) En plus de la gestion événementielle offerte par ces contrôleurs, OpenLayers permet d'enregistrer des écouteurs sur de nombreux événements, comme ceux en lien avec la vie d'un ol.Map (voir [[http://openlayers.org/en/v3.4.0/apidoc/ol.MapBrowserEvent.html?unstable=true#event:click|ol.MapBrowserEvents]]). Maintenant que les techniques de visualisation cartographique sont maîtrisées, tant côté serveur que client, il s'agit de découvrir comment interagir avec les objets géographiques représentés. ==== Ex7A : contrôle d'interrogation en mode image (WMS GetFeatureInfo) ==== 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.4.0/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.4.0/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 - Ex7A - interaction with WMS GetFeatureInfo control
        
        

        
    
    
        
        Click on the map to get feature info

__TODO__ - Analyser l'échange client/serveur (ex. avec Firebug). Comment est-ce possible ? - Ajouter des paramètres dits “vendor” comme ci-dessous. Quel est l'effet ?


var url = wmsSource.getGetFeatureInfoUrl(
  evt.coordinate, viewResolution, 'EPSG:3857',
  {'INFO_FORMAT': 'text/plain','radius':50}
);

==== Ex7B : un contrôle d'interrogation image "fait maison" ==== Dans Ex7A, c'est une version standardisé du contrôle d'interrogation lié au standard OGC WMS. L'exemple suivant montre comment mettre cela en oeuvre par nous-même. On s'assure ainsi de maîtriser tout le processus client/serveur. __Côté client:__



    
        Ex7B - homemade GetFeatureInfo
        
        

        
    
    
        
        Click on the map to get feature info

__Côté serveur:__


rows;

header("Content-type: application/json");

$i = 0;
$fc = new FeatureCollection();
foreach ($rows as $row) {
    $fc->addFeature(new Feature($i++, json_decode($row->geom), array("name" => $row->name)));
}

echo json_encode($fc);
?>

__TODO__ - Côté client, ajouter la ligne ci-dessous au bon endroit :$("#info").html("Loading... please wait..."); - Ajouter en fin de fonction //ready// une couche OpenLayers.Layer.Vector comme suit :

var vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({})})
map.addLayer(vectorLayer)

et remplacer l'appel AJAX comme suit :


var request = $.ajax({
  url: getInfo = "php/GetCountriesByXY.php?x=" + coordinates[0] + "&y=" + coordinates[1],
  dataType: 'json',
  method: "GET"
});
request.done(function( data ) {
    var js = new ol.format.GeoJSON()
    $("#info").html(data.features[0].properties.name);
    var feature = js.readFeature(data.features[0])
    vectorLayer.getSource().addFeature(feature)
});

request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

- Ajouter en fin de fonction //ready// l'interaction suivante avec son écouteur :


var selectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
});
map.addInteraction(selectPointerMove)
selectPointerMove.on('select',function(e){
    if(e.target.getFeatures().getLength() > 0){
        $("#info").html(e.target.getFeatures().item(0).get('name'));
    }
})
map.addInteraction(selectPointerMove)

Les [[http://openlayers.org/en/master/apidoc/ol.interaction.html|interactions]] permettent de récupérer et d'exploiter des actions déclenchées par l'utilisateur (via son clavier ou sa souris). Ces actions peuvent ensuite être utilisées pour modifier les différents éléments sur la map ou la map elle même. Dans notre cas, notre interaction permet de sélectionner (ol.interaction.Select) les features de notre carte au passage de la souris (condition: ol.events.condition.pointerMove) sur celles-ci. - Enregistrer un écouteur sur le bon événement pour vider la

//info// quand le curseur sort d'un //feature//. ==== Ex7C : stratégies de chargement en mode vector ==== Le chargement d'entités géographiques peut s'avérer néfaste en terme d'expérience utilisateur du fait d'une latence provoquée (1) par le volume important de données à charger pour une bande passante donnée et (2) par les performances et l'aptitude du moteur de rendu cartographique à digérer ces données. L'exemple suivant montre déjà des limites avec la stratégie //ol.loadingstrategy.all// qui charge simplement tous les objets dans l'enveloppe de visualisation. Il s'agit alors d'opter pour des stratégies afin d'éviter ces écueils.


    
        Ex7C - Vector overlay loading strategies

__TODO__ - Compter les appels au serveur géographique et vérifier le(s) volume(s) des entités géographiques transférées. - Faire de même avec le chargement de la couche european_nuts en modifiant les paramètres ci-dessous :featureType:"european_nuts"pour le format ettypename: 'european_nuts' dans la requête ajax. - Modifier la stratégie comme suit :ol.loadingstrategy.bboxajouter le paramètre suivant à la requête ajaxbbox: extent.join(',') + ',EPSG:3857'et tout en naviguant dans la carte, compter les appels au serveur géographique et revérifier le(s) volume(s) des entités géographiques transférées. - Rendre la couche vector invisible au chargement de l'application en insérant l'instruction comme indiqué ci-dessous :

var lyr = new ol.layer.Vector({
  source: vectorSource,
  visible: false
})

- de plus, ajouter les instructions ci-dessous en fin de fonction ready :

view.on('change:resolution',function(){
    if(view.getZoom() > 8){
        lyr.setVisible(true)
    }else{
        lyr.setVisible(false)
    }
})

- Quelles autres stratégies peut-on imaginer pour assurer une bonne expérience utilisateur ? ==== Ex7D : contrôles en mode vector ==== Le chargement d'entités géographiques (plutôt que leur représentation graphique image) offre des possibilités d'interaction plus directe sur les objets vectoriels qui les représentent. Voyons quelques exemples. __TODO__ - Sur la base de Ex7C avec la couche //cities//, définir les styles //defaultPoint// et //selectPoint// suivant :

var fill = new ol.style.Fill({color: 'rgba(0,0,255,0.6)'});
var selectFill = new ol.style.Fill({color: 'rgba(255,0,0,0.6)'});
var defaultPoint =  new ol.style.Style({
    image: new ol.style.Circle({
        fill:fill,
        radius: 6
    })
})

var selectPoint =  new ol.style.Style({
    image: new ol.style.Circle({
        selectFill,
        radius: 6
    })
})

puis les connecter en ajoutant un //styleMap// sur la couche Vector comme suit :

var lyr = new ol.layer.Vector({
    source: vectorSource,
    style: defaultPoint
})

- Puis ajouter une interaction afin d'interroger les objets et changer leur style au passage de la souris

var selectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    style: selectPoint
});

map.addInteraction(selectPointerMove)

selectPointerMove.on('select',function(e){
    if(e.target.getFeatures().getLength() > 0){
        $("#info").html(e.target.getFeatures().item(0).get('WUP_AGGL'));
    }
})

- Faire le nécessaire pour améliorer l'interaction utilisateur : - afficher aussi le nom du pays dans la boîte d'information; - la boîte doit être vide quand aucun objet n'est sélectionné. - Tenter d'afficher un popup au passage du curseur sur les objets. Les classes et méthodes suivants peuvent être utiles:ol.Overlay(...)feature.getGeometry().getCoordinates()map.addOverlay(...)