GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
geoinf16:ol3tuto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf16:ol3tuto [2016/11/04 19:32] oertz [Ex2C : OpenLayers.Layer.WMTS] |
geoinf16:ol3tuto [2019/02/13 11:29] (current) oertz [Ex3A : Styling avec WMS] |
||
|---|---|---|---|
| Line 236: | Line 236: | ||
| <title>ol3 - Ex2C - webmap with Swisstopo WMTS</title> | <title>ol3 - Ex2C - webmap with Swisstopo WMTS</title> | ||
| <script type="text/javascript" src="js/config.js"></script> | <script type="text/javascript" src="js/config.js"></script> | ||
| + | |||
| + | <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script> | ||
| + | <script src="http://epsg.io/21781.js"></script> | ||
| + | |||
| <script type="text/javascript"> | <script type="text/javascript"> | ||
| var map; | var map; | ||
| $(document).ready(function () { | $(document).ready(function () { | ||
| - | var projection = new ol.proj.Projection({ | + | |
| - | code: 'EPSG:21781', | + | var projection = ol.proj.get('EPSG:21781'); |
| - | units: 'm' | + | projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]); |
| - | }); | + | |
| - | ol.proj.addProjection(projection); | + | map = new ol.Map({ |
| - | + | ||
| - | var map = new ol.Map({ | + | |
| target: 'map', | target: 'map', | ||
| view: new ol.View({ | view: new ol.View({ | ||
| projection: ol.proj.get("EPSG:21781"), | projection: ol.proj.get("EPSG:21781"), | ||
| center: [600000, 200000], | center: [600000, 200000], | ||
| - | zoom: 14, | + | zoom: 6 |
| }) | }) | ||
| }); | }); | ||
| Line 269: | Line 271: | ||
| }); | }); | ||
| map.addLayer(layer); | map.addLayer(layer); | ||
| - | | + | |
| console.log(map.getView().getProjection().getCode()); | console.log(map.getView().getProjection().getCode()); | ||
| - | }) | + | |
| + | }); | ||
| + | | ||
| </script> | </script> | ||
| <style type="text/css"> | <style type="text/css"> | ||
| Line 299: | Line 303: | ||
| </code> | </code> | ||
| - Intéressant pour aider à démystifier le fonctionnement et l'utilisation de l'HTML5 Geolocation API : | - Intéressant pour aider à démystifier le fonctionnement et l'utilisation de l'HTML5 Geolocation API : | ||
| - | - [[http://www.andygup.net/html5-geolocation-api-%E2%80%93-how-accurate-is-it-really|HTML5 Geolocation API – how accurate is it, really?]], Andy Gup | + | - [[http://www.andygup.net/html5-geolocation-api-%E2%80%93-how-accurate-is-it-really|HTML5 Geolocation API – how accurate is it, really?]] |
| - | - [[http://www.mmaglobal.com/files/documents/location-data-accuracy-v3.pdf|Demystifying Location Data Accuracy]] | + | - [[http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html|Géolocalisation en HTML5]] |
| - | - [[http://www.mmaglobal.com/files/whitepapers/MMA-Location-Terminology-Guide_FINAL.pdf|MMA Location Terminology Guide]] | + | - [[http://www.mmaglobal.com/files/documents/location-data-accuracy-v3.pdf|MMA Demystifying Location Data Accuracy]] |
| + | - [[http://www.mmaglobal.com/files/whitepapers/MMA-Location-Terminology-Guide_FINAL.pdf|MMA Location Terminology Guide]] | ||
| + | - {{:geoinf16:ng-souriez.pdf|Souriez, vous êtes géolocalisés !}} | ||
| Line 313: | Line 319: | ||
| <head> | <head> | ||
| <title>ol3 - Ex3A - use of a custom SLD style</title> | <title>ol3 - Ex3A - use of a custom SLD style</title> | ||
| - | <script type="text/javascript" src="js/config.js"></script> | + | |
| + | <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"> | ||
| + | |||
| + | <script src="https://openlayers.org/en/v3.20.1/build/ol-debug.js" type="text/javascript"></script> | ||
| + | <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> | ||
| <script type="text/javascript"> | <script type="text/javascript"> | ||
| - | var map; | + | var map; |
| - | $(document).ready(function(){ | + | var mcWMS = "https://eu1.mapcentia.com/wms/oertz/public"; |
| + | var mcWFS = "https://eu1.mapcentia.com/wfs/oertz/public/4326"; | ||
| + | |||
| + | $(document).ready(function(){ | ||
| map = new ol.Map({ | map = new ol.Map({ | ||
| view: new ol.View({ | view: new ol.View({ | ||
| Line 338: | Line 352: | ||
| }); | }); | ||
| </script> | </script> | ||
| - | <style type="text/css"> | + | <style type="text/css"> |
| #map { | #map { | ||
| width: 100%; | width: 100%; | ||
| height: 100%; | height: 100%; | ||
| } | } | ||
| - | </style> | + | </style> |
| </head> | </head> | ||
| <body> | <body> | ||
| Line 418: | Line 432: | ||
| <title>ol3 - Ex3B - webmap with your own MapBox basemap</title> | <title>ol3 - Ex3B - webmap with your own MapBox basemap</title> | ||
| <script type="text/javascript" src="js/config.js"></script> | <script type="text/javascript" src="js/config.js"></script> | ||
| - | <script type="text/javascript"> | + | <script type="text/javascript"> |
| - | var map; | + | var map; |
| - | $(document).ready(function() { | + | $(document).ready(function () { |
| - | var token = "pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig"; | + | var token = "pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig"; |
| - | var styleId = "oertz.b9becbcf"; | + | |
| - | map = new ol.Map({ | + | var styleIdClassic = "oertz.c80497f1"; |
| - | layers: [ | + | //var styleIdWeb = "oertz/civjyzx4o00hq2kl80xkaz832"; |
| - | new ol.layer.Tile({ | + | |
| - | source: new ol.source.XYZ({ | + | map = new ol.Map({ |
| - | url: 'http://api.tiles.mapbox.com/v4/'+styleId+'/{z}/{x}/{y}.png?access_token=' + token | + | layers: [ |
| - | }) | + | new ol.layer.Tile({ |
| - | }) | + | source: new ol.source.XYZ({ |
| - | ], | + | // version avec le MapBox Studio "classic" |
| - | target: 'map', | + | url: 'http://api.tiles.mapbox.com/v4/' + styleIdClassic + '/{z}/{x}/{y}.png?access_token=' + token |
| - | view: new ol.View({ | + | |
| - | center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'), | + | // version avec le MapBox Studio "web" |
| - | zoom: 10 | + | //url: 'https://api.mapbox.com/styles/v1/' + styleIdWeb + '/tiles/256/{z}/{x}/{y}?access_token=' + token |
| + | }) | ||
| + | }) | ||
| + | ], | ||
| + | target: 'map', | ||
| + | view: new ol.View({ | ||
| + | center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'), | ||
| + | zoom: 10 | ||
| + | }) | ||
| + | }); | ||
| }) | }) | ||
| - | }); | ||
| - | }) | ||
| </script> | </script> | ||
| <style type="text/css"> | <style type="text/css"> | ||
| Line 457: | Line 478: | ||
| - exemple de rendu pour l'exercice 4 {{:geoinf16:cartocss_ex4.png?200|}} | - exemple de rendu pour l'exercice 4 {{:geoinf16:cartocss_ex4.png?200|}} | ||
| - Modifier le code nécessaire ci-dessus pour créer une application de webmapping utilisant votre style MapBox. | - Modifier le code nécessaire ci-dessus pour créer une application de webmapping utilisant votre style MapBox. | ||
| + | |||
| + | **Corrigés des exercices MapBox/CartoCSS** | ||
| + | * Ex1: Dans la sidebar Layers du studio on découvre qu'il y a effectivement une couche de géodonnées nommé building. Définissons un style pour représenter ses entités :<code> | ||
| + | #building { | ||
| + | polygon-fill: #c1b0ad; | ||
| + | } | ||
| + | </code>On voit que la couche landuse dispose d'une propriété class dont l'une des valeurs peut être 'parks'. Définissons un style ne représentant que ces parcs :<code> | ||
| + | #landuse[class='parks'] { | ||
| + | polygon-fill: #6db569; | ||
| + | } | ||
| + | </code>La couche poi_label a une propriété name qui sert d'étiquette :<code> | ||
| + | #poi_label[zoom>=19] { | ||
| + | text-name: '[name]'; | ||
| + | text-face-name: @sans_bold; | ||
| + | text-size: 14; | ||
| + | } | ||
| + | </code>Ce sont les couches road, tunnel et bridge qui vous servir comme suit :<code> | ||
| + | #road, | ||
| + | #bridge, | ||
| + | #tunnel { | ||
| + | [class='motorway'],[class='motorway_link'] { | ||
| + | line-color: #fc8; | ||
| + | line-width: 3px; | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | * Ex2: En utilisant les couches liés aux “thèmes” mapbox.mapbox-terrain-v1 et mapbox.mapbox-streets-v5, on ajoute aux layers de l'exercice 1 les couches hillshade, (?) et contour. On représente les courbes de niveaux de cette dernière comme suit :<code> | ||
| + | #contour[zoom>=14] { | ||
| + | line-color: #b7b7b7; | ||
| + | line-width: 1; | ||
| + | text-name: '[ele]'; | ||
| + | text-face-name: @sans; | ||
| + | text-fill: #838383; | ||
| + | text-size: 12; | ||
| + | text-placement: line; | ||
| + | [index=5],[index=10] { | ||
| + | line-width: 3; | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | * Ex3: Le chargement de la source de géodonnées “dans MapBox” démarre une phase de découpage des données en tuiles vectoriels selon un découpage en pyramide (appelé //gridset// par MapBox). Il ne reste donc plus qu'à habiller ces tuiles vectoriels avec un style pour produire la pyramide des tuiles images qui seront demandées à la volée par les clients cartographiques. | ||
| + | |||
| + | * Ex4: Après initialisation d'un nouveau style par la composition des couches des thèmes **mapbox.mapbox-streets-v5,oertz.4bf1beab**, on peut construire le style “by night” suivant : {{:geoinf16:mynightstyle.mss.zip|}} | ||
| ===== 4. Composition de couches ===== | ===== 4. Composition de couches ===== | ||
geoinf16/ol3tuto.1478284354.txt.gz · Last modified: 2018/05/16 10:05 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
