Built with blockbuilder.org
Created
February 2, 2021 19:49
-
-
Save mastersigat/eb8a3cad2919305e0439dc542786ccb5 to your computer and use it in GitHub Desktop.
#MapboxGL / DEM 3D (MapboxGL 2.x)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Carte en 3D MapboxGL 2</title> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> | |
| <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script> | |
| <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" /> | |
| <style> | |
| body { margin: 0; padding: 0; } | |
| #map { position: absolute; top: 0; bottom: 0; width: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| zoom: 16, | |
| center: [6.13, 45.901], | |
| pitch: 80, | |
| bearing: 90, | |
| style: 'mapbox://styles/mapbox/outdoors-v9' | |
| }); | |
| map.on('load', function () { | |
| map.addSource('mapbox-dem', { | |
| 'type': 'raster-dem', | |
| 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1', | |
| 'tileSize': 512, | |
| 'maxzoom': 14 | |
| }); | |
| // add the DEM source as a terrain layer with exaggerated height | |
| map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1}); | |
| // add a sky layer that will show when the map is highly pitched | |
| map.addLayer({ | |
| 'id': 'sky', | |
| 'type': 'sky', | |
| 'paint': { | |
| 'sky-type': 'atmosphere', | |
| 'sky-atmosphere-sun': [0.0, 0.0], | |
| 'sky-atmosphere-sun-intensity': 15 | |
| } | |
| }); | |
| var layers = map.getStyle().layers; | |
| var labelLayerId; | |
| for (var i = 0; i < layers.length; i++) { | |
| if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { | |
| labelLayerId = layers[i].id; | |
| break; | |
| } | |
| } | |
| // Ajout de la source | |
| map.addSource('mapbox-streets-v7', { | |
| type: 'vector', | |
| url: 'mapbox://mapbox.mapbox-streets-v7'}); | |
| // Ajout couche des routes | |
| map.addLayer({ | |
| "id": "Routes", | |
| "type": "line", | |
| "source": "mapbox-streets-v7", | |
| "layout": {'visibility': 'visible'}, | |
| "source-layer": "road", | |
| "paint": {"line-color": "#ff8533", "line-width": 1} | |
| }); | |
| map.addLayer( | |
| { | |
| 'id': '3d-buildings', | |
| 'source': 'composite', | |
| 'source-layer': 'building', | |
| 'filter': ['==', 'extrude', 'true'], | |
| 'type': 'fill-extrusion', | |
| 'minzoom': 15, | |
| 'paint': { | |
| 'fill-extrusion-color': '#aaa', | |
| // use an 'interpolate' expression to add a smooth transition effect to the | |
| // buildings as the user zooms in | |
| 'fill-extrusion-height': [ | |
| 'interpolate', | |
| ['linear'], | |
| ['zoom'], | |
| 15, | |
| 0, | |
| 15.05, | |
| ['get', 'height'] | |
| ], | |
| 'fill-extrusion-base': [ | |
| 'interpolate', | |
| ['linear'], | |
| ['zoom'], | |
| 15, | |
| 0, | |
| 15.05, | |
| ['get', 'min_height'] | |
| ], | |
| 'fill-extrusion-opacity': 0.6 | |
| } | |
| }, | |
| labelLayerId | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment