Saltar a contenido

5.1.Introducción Mapas 3D

Introducción

Gracias a la poténcia de WebGL y los nuevos navegadores , cada vez hay más librerias geoweb con capacidades 3D

La visualización 3D no sólo se limita a la extrusión del terreno síno que va más allá, como por ejemplo visualización de nubes de puntos lidar , visión hiperrealista de ciudades

Algunas librerías geo con capacidades 3D

MapBox GL JS

Cesium JS

Deck.GL

Procedural

Threejs

Potree

ArcGis API JavaScript

Algunos formatos 3D geo

3D-Tiles: Especificación estándar OGC creada por Cesium para la creación de piràmides de datos vectores con información 3D .

3D Scene Layers (I3S):Especificación estándar OGC creada por ESRI para la creación de piràmides de datos vectores con información 3D

Terrain-RGB: Datos de elevación codificados en teselas PNG rasterizadas como valores de color que pueden ser decodificados a alturas en metros.

Formula para pasar el color a metros : height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

Capacidades 3D de MapBox GL JS

Cómo ver un mapa 3D en Mapbox GL

Método setTerrain https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setterrain

Paso 1 : Creamos con VSCode mapa3d.html

  • Vamos a VSCode y creamos el archivo mapa3d.html dentro de /geoweb

Utilizamos opcion pitch para inclinar el mapa al inicio

    <html>
    <head>
    <meta charset='utf-8' />
    <title>Mapa 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <link href='css/estilobase.css' rel='stylesheet' />

    <script src='js/3d.js'></script>
    <script>
        //Añadir vuestor token!!
        var map;
        function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
             map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/satellite-streets-v10',
                center: [2.16859, 41.3954],
                zoom: 12,
                attributionControl: false,
                pitch: 45,
                hash: true
            });

            map.addControl(new mapboxgl.AttributionControl({ compact: true }));
            map.addControl(new mapboxgl.NavigationControl());

        } // final init
    </script>
    </head>

    <body onload="init()">

        <div id="map"></div>
    </body>

    </html>

Paso 3: Creamos archivo 3d.js

  • Dentro de nuestro directorio /geoweb/js/ creamos el archivo 3d.js, dónde crearemos funciones especificas de nuestro proyecto

  • Creamos la función add3D()

   function add3D() {

    map.addSource('mapbox-dem', {
        'type': 'raster-dem',
        'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
        'tileSize': 512,
        'maxzoom': 14
    });

   map.setFog({});


    map.setTerrain({
        'source': 'mapbox-dem',
        'exaggeration': 1.5
    });


    //edificios de los estilos Mapbox

/*
    map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',
                'fill-extrusion-height': ['get', 'height'],                    
                'fill-extrusion-opacity': 0.9
            }
        });

*/





} //fin funcion

Con fog controlamos el ambiente del mapa

https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/

Paso 4: Llamamos funciones en el evento load de map

  • Llamamos a la función add3D()
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Mapa 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <link href='css/estilobase.css' rel='stylesheet' />

    <script src='js/3d.js'></script>
    <script>
        //Añadir vuestor token!!
        var map;
        function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
             map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/satellite-streets-v10',
                center: [2.16859, 41.3954],
                zoom: 12,
                attributionControl: false,
                pitch: 45,
                hash: true
            });

            map.addControl(new mapboxgl.AttributionControl({ compact: true }));
            map.addControl(new mapboxgl.NavigationControl());

            map.on('load', function () {
             add3D();
            }); //fin onload

        } // final init
    </script>
    </head>

    <body onload="init()">

        <div id="map"></div>
    </body>

    </html>

visualizamos el mapa

alt text

Descomentamos y añadimos capa edificios mapbox

Editamos index.html y subimos el ejemplo al GitHub

    git pull
    git add .
    git commit -m "visor 3d"
    git push