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/16 08:29] oertz [Ex3B : Custom tiling service with CartoCSS] |
geoinf16:ol3tuto [2019/02/13 11:29] (current) oertz [Ex3A : Styling avec WMS] |
||
|---|---|---|---|
| Line 319: | 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 344: | 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 424: | 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 465: | Line 480: | ||
| **Corrigés des exercices MapBox/CartoCSS** | **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> | * 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 { | #building { | ||
| Line 491: | Line 505: | ||
| </code> | </code> | ||
| - | Ex2: | + | * 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> |
| - | + | ||
| - | 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 : | + | |
| #contour[zoom>=14] { | #contour[zoom>=14] { | ||
| line-color: #b7b7b7; | line-color: #b7b7b7; | ||
| Line 507: | Line 518: | ||
| } | } | ||
| } | } | ||
| + | </code> | ||
| - | Ex3: | + | * 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. |
| - | + | ||
| - | 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 une pyramide de tuiles. Il ne reste donc plus qu'à habiller ces tuiles vectoriels avec un style pour produire les tuiles images qui sont 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.mapboxstreets-v5 + oertz.0cf75151, on peut construire le style “by night” suivant : | + | * 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.1479281388.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
