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 Next revision Both sides next revision | ||
|
geoinf16:ol3tuto [2016/11/16 08:50] oertz [Ex3B : Custom tiling service with CartoCSS] |
geoinf16:ol3tuto [2016/11/17 07:56] oertz [Ex3B : Custom tiling service with CartoCSS] |
||
|---|---|---|---|
| Line 424: | Line 424: | ||
| <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 505: | Line 512: | ||
| </code> | </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 une pyramide de tuiles. 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. | + | * 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|}} | * 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|}} | ||
geoinf16/ol3tuto.txt · Last modified: 2019/02/13 11:29 by oertz
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
