ol3 - Create a first map with an OGC WMS layer
**TODO** https://www.mediamaps.ch/oltuto/Ex1b.html
- Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ?
var v2 = new ol.View({projection: "EPSG:4326"});
var cbox = [10, 47]; // NB: c'est le centre de l'extent_init ci-dessus
v2.setCenter(cbox);
v2.setZoom(5);
map.setView(v2);
- Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ?
map.getView().setCenter(ol.proj.transform([10, 47], "EPSG:4326", "EPSG:3857"));
map.getView().setZoom(5);
console.log(map.getView().getProjection().getCode());
- Redéfinir la couche wmsLayer comme suit - quelle différence en ajoutant une couche //Tile// plutôt que //Image//? :
var wmsLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: blWMS,
ratio: 1,
params: {
VERSION: "1.0.0",
LAYERS: "ne_10m_admin_0_countries",
FORMAT: "image/png"
}
})
});
- Rechercher et tester d'autres couches de serveurs cartographiques WMS, comme par exemple celui de Swisstopo (voir config.js et http://spatialreference.org/ref/epsg/21781/)
- Repérez les déclarations qui habillent les boutons zoomin/zoomout et les ajuster pour que ces boutons ressemblent à ça {{:geoinf16:zoominout-tomato.png?nolink|}}
===== 2. Cache de tuiles =====
Avec une source ol.source.TileWMS c'est le client qui contrôle une grille de tuiles et il peut la 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 permet 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]].
==== A. ol.source.OSM ====
ol3 - webmap with layer from tile server
**TODO** http://localhost/geoinf/oltuto18/Ex2a.html
- Remplacer la source de la couche comme suit :
source: new ol.source.OSM({
url:"http://api.tiles.mapbox.com/v3/oertz.map-i2ak2ozc/{z}/{x}/{y}.png",
attributions: [
new ol.Attribution({
html: "Restyled & based on OpenStreetMap"
})
]
})et ajouter l'instruction CSS suivante :
.ol-attribution {
background-color: CornflowerBlue !important;
right: 10px;
left: initial;
bottom: initial;
top: 10px;
}
- Remplacer la source //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.OSM.html|ol.source.OSM]]// par une source //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.XYZ.html|ol.source.XYZ]]// comme suit :
source: new ol.source.XYZ({
url: "http://urbangene.heig-vd.ch/tilecache/{z}/{x}/{y}.png"
})
==== B. 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. La classe ol.source.BingMaps s'occupe de construire les requêtes pour interagir avec le service de tuiles cartographiques BingMaps : https://msdn.microsoft.com/en-us/library/ff701716.aspx#Anchor_0.
**TODO** https://www.mediamaps.ch/oltuto/Ex2b.html
- Partir de l'état initial de l'exemple précédent en adaptant le code JavaScript comme suit, exécuter et analyser la requête générée vers le serveur de tuile BingMaps :
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz',
imagerySet: 'Aerial'
})
})
]
});
map.getView().setCenter(ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857"));
map.getView().setZoom(10);
- BingMaps offre plusieurs couches carto. Modifier le paramètre de type de couche (imagerySet) selon la [[https://msdn.microsoft.com/en-us/library/ff701716.aspx|doc Bing Maps]]. Contrairement à un service WMS, le service de Bing Maps ne sait pas s'auto-décrire. Mais comme il n'y a qu'un seul service Bing Maps au monde, une documentation suffit.
Some imagerySet values:
- AerialWithLabelsOnDemand
- RoadOnDemand
- CanvasGray
- OrdnanceSurvey (notice: visible only for the London area)
- ...
- Quid d'une source pour afficher les tuiles Google Maps ? Une telle source peut se configurer avec une instance //ol.source.XYZ// comme suit, utilisant l'habituel triplet (x,y,z) de pyramide de tuiles :
source: new ol.source.XYZ({
url: "http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}"
})
... mais pas de //ol.source.GoogleMaps// ? La réponse ici https://github.com/openlayers/ol3/issues/2205 et ici https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4.
==== C. ol.source.WMTS ====
Swisstopo offre un [[http://api3.geo.admin.ch/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit.
ol3 - webmap with Swisstopo WMTS
**TODO** https://www.mediamaps.ch/oltuto/Ex2c.html
- Ajouter l'instruction suivante :
navigator.geolocation.getCurrentPosition(locationFixed, locationError);
ainsi que les deux fonctions callback qui vont avec :
function locationFixed(position) {
map.getView().setCenter(ol.proj.transform([position.coords.longitude, position.coords.latitude],"EPSG:4326","EPSG:21781"));
}
function locationError(e) {
console.log(e);
}
- Intéressant pour aider à démystifier le fonctionnement et l'utilisation de l'HTML5 Geolocation API :
- [[http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html|Géolocalisation en HTML5]] -- màj 2017
- [[http://www.andygup.net/html5-geolocation-api-%E2%80%93-how-accurate-is-it-really|HTML5 Geolocation API – how accurate is it, really?]] -- un peu ancien (2012/2013)
- [[http://www.mmaglobal.com/files/documents/location-data-accuracy-v3.pdf|MMA Demystifying Location Data Accuracy]] -- ~2015
- [[http://www.mmaglobal.com/files/whitepapers/MMA-Location-Terminology-Guide_FINAL.pdf|MMA Location Terminology Guide]] -- ~2015
- {{:geoinf16:ng-souriez.pdf|Souriez, vous êtes géolocalisés !}} -- NG 2016{{:geoinf17:geoloc.jpg?direct&200|}}
- Utilisation d'un service de géolocalisation :
- Open, crowdsourced : [[https://location.services.mozilla.com/map#2/15.0/10.0|Mozilla Location Service (MLS)]]
- Avec la [[https://developers.google.com/maps/documentation/geolocation/intro|Google Maps Geolocation API]], dans un client type [[https://addons.mozilla.org/fr/firefox/addon/restclient/|RESTClient]]
- configurer une requête POST -> https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyBpYS569CJN6A7wbDUXokxOJAbQhBokDkc
- FIXME lancer la requête avec le corps suivant - quel est ce lieu ?
{
"considerIp": "false",
"wifiAccessPoints": [
{
"macAddress": "00:25:9c:cf:1c:ac"
},
{
"macAddress": "00:25:9c:cf:1c:ad"
}
]
}
===== 3. Composition de couches =====
==== A. Composer "server-side" ====
Dans la section précédente, la composition de couches est pilotée "une fois pour toute" côté serveur. Ci-dessous un pilotage de la composition "à la demande" côté client (et donc plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons possibles).
ol3 - one WMS request for two layers
=== TODO ===
- Vérifier que la composition est bien faite côté serveur.
- Quel intérêt à utiliser cette technique ? Quels inconvénients ? Utilise-t-on tout le potentiel d'un client navigateur pour faciliter la composition "à la demande" par l'utilisateur ?
==== B. Composer "client-side" ====
Une application de cartographie en ligne se doit de permettre à l'utilisateur de personnaliser sa carte par ses choix pour la couche de référence (baselayer) et les couches à activer en superposition (overlays). Elle doit fournir la capacité de gérer la composition côté client.
ol3 - two WMS overlayed layers
**TODO** https://www.mediamaps.ch/oltuto/Ex3b.html
- Apporter la preuve que l'assemblage s'est fait côté client.
- Analyser les paramètres WMS. Lequel représente l'indispensable capacité "server-side" pour permettre l'assemblage client-side par superposition ?
- Ajouter dans la table des couches les //ne_10m_admin_0_countries// et //ne_10m_lakes// du GeoServer de Boundless (//blWMS//) comme suit :
new ol.layer.Image({
title: "Countries",
source: new ol.source.ImageWMS({
url: blWMS,
params: {
VERSION: "1.0.0",
LAYERS: "ne_10m_admin_0_countries",
FORMAT: "image/png"
}
})
}),
new ol.layer.Image({
title: "Lakes",
source: new ol.source.ImageWMS({
url: blWMS,
params: {
VERSION: "1.0.0",
LAYERS: "ne_10m_lakes",
FORMAT: "image/png"
}
})
})
Visualiser le résultat. Qu'est-ce qui est "baselayer", qu'est-ce qui est "overlays" ?
- Remettre un peu d'ordre là où c'est possible.
==== C. Gestion de composition cartographique - LayerSwitcher ====
OL3 n'offre [[https://twitter.com/RemiBovard/status/525028570780139520|pour l'instant pas]] nativement de "UI manager" de composition cartographique. Néanmoins l'API offre ce qu'il faut pour concevoir son propre LayerSwitcher.
ol3 - MyLayerSwitcher
Choose baselayer:
Choose overlays:
**TODO** https://www.mediamaps.ch/oltuto/Ex3c.html
- Analyser le code ci-dessus et identifier la principale capacité "client-side" de l'API sur laquelle repose ce LayerSwitcher.
- Adapter le code pour ajouter à l'équation la couche OSM suivante :
new ol.layer.Tile({
source: new ol.source.OSM()
})
- Ajouter la propriété ci-dessous à la couche des lacs
opacity: 0.5
==== D. Un contrôle LayerSwitcher plus souple ====
A partir des capacités offertes par l'API, la communauté de développeurs gravitant autour du core OL3 développe des //controls// parmi lesquels un LayerSwitcher un peu plus malin. Merci @walkermatt https://github.com/walkermatt/ol3-layerswitcher.
ol3 - A clever LayerSwitcher
**TODO** https://www.mediamaps.ch/oltuto/Ex3d.html
- Comment fonctionne ce [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] ? (remarquez quelques nouvelles propriétés intéressantes sur ol.layer).
- Ajouter une baselayer sur un base Bing Maps comme vu à l'Ex2B (ex. Aerial) - **attention** de définir la propriété //title// pour voir la couche dans le sélecteur de couches, le "layerswitcher".
- Ajouter un overlay basé sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo (//chWMS//, voir aussi la [[http://www.geo.admin.ch/internet/geoportal/fr/home/services/geoservices/display_services/services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:geoinf16:screenshot2.png?200|}}