En este momento estás viendo Cómo agregar rutas en coche y edificios 3d en Mapbox

Cómo agregar rutas en coche y edificios 3d en Mapbox

  • Categoría de la entrada:Mapbox
  • Tiempo de lectura:7 minutos de lectura

Si quieres tener detalle de que es Mapbox y para que se usa, puedes leer la publicación Cómo crear aplicaciones web de mapas con Mapbox

Ahora te explico como agregar rutas en coche y edificios 3D con los siguientes pasos:

1. Descargar e incluir Mapbox y sus plugins

Primero necesitas los archivos base para usar Mapbox en tu proyecto.

En tu archivo HTML, incluye los siguientes enlaces en la sección <head>:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="mapbox-gl-directions-master/src/mapbox-gl-directions.css">
	<link rel="stylesheet" type="text/css" href="mapa_directions.css">

	<title>Mi primer Mapa</title>
</head>
<body>
	<div id='map'></div>
	<nav id="listing-group" class="listing-group">
		<input type="checkbox" id="scrollZoom" checked="checked">
		<label for="scrollZoom">Scroll Zoom</label>
		<input type="checkbox" id="boxZoom" checked="checked">
		<label for="boxZoom">Box zoom</label>
		<input type="checkbox" id="dragRotate" checked="checked">
		<label for="dragRotate">Drag rotate</label>
		<input type="checkbox" id="dragPan" checked="checked">
		<label for="dragPan">Drag pan</label>
		<input type="checkbox" id="keyboard" checked="checked">
		<label for="keyboard">Keyboard</label>
		<input type="checkbox" id="doubleClickZoom" checked="checked">
		<label for="doubleClickZoom">Double click zoom</label>
		<input type="checkbox" id="touchZoomRotate" checked="checked">
		<label for="touchZoomRotate">Touch zoom rotate</label>
	</nav>
	<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
	<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
	<script type="text/javascript" src="mapbox-gl-directions-master/dist/mapbox-gl-directions.js"></script>
	<script type="text/javascript" src='mapa_directions.js'></script>
</body>
</html>

2. Agregar el plugin Directions (para rutas en coche)

Este plugin permite agregar un sistema de navegación para calcular rutas en coche (driving), caminata (walking), o bicicleta (cycling).

En tu archivo JS, agrega esto dentro de la configuración del mapa:

mapboxgl.accessToken = 'TU_TOKEN_MAPBOX';

// Agregar mapa con estilo, coordenadas de centro y zoom
var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-74.082412,4.639386],
	zoom: 9
});

// Agregar rutas con Directions
map.addControl(
	new MapboxDirections({
		accessToken: mapboxgl.accessToken,
	}),
	"top-left"
	);

// Agregar barra de zoom
map.addControl(new mapboxgl.NavigationControl());

// Edificios en 3D

map.on("load", () => {
  
  const layers = map.getStyle().layers;
  const labelLayerId = layers.find(
    (layer) => layer.type === "symbol" && layer.layout["text-field"]
  ).id;
  
  map.addLayer(
    {
      id: "add-3d-buildings",
      source: "composite",
      "source-layer": "building",
      filter: ["==", "extrude", "true"],
      type: "fill-extrusion",
      minzoom: 15,
      paint: {
        "fill-extrusion-color": "#aaa",       
        "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
  );
});

Con esto podrás dar clic en el mapa o escribir direcciones para crear rutas automáticamente.

3. Agregar barra de zoom y navegación

Esto se hace agregando controles prediseñados de Mapbox para moverse y hacer zoom:

// Agregar barra de zoom
map.addControl(new mapboxgl.NavigationControl());

Esto permite al usuario acercar, alejar, rotar o inclinar el mapa fácilmente.

4. Agregar edificios en 3D

Cuando el estilo del mapa tiene la capa de edificios (building), podemos usar extrusión para representarlos en 3D.

// Edificios en 3D

map.on("load", () => {
  
  const layers = map.getStyle().layers;
  const labelLayerId = layers.find(
    (layer) => layer.type === "symbol" && layer.layout["text-field"]
  ).id;
  
  map.addLayer(
    {
      id: "add-3d-buildings",
      source: "composite",
      "source-layer": "building",
      filter: ["==", "extrude", "true"],
      type: "fill-extrusion",
      minzoom: 15,
      paint: {
        "fill-extrusion-color": "#aaa",       
        "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
  );
});

Esto renderiza edificios 3D que se elevan según su altura real cuando haces zoom o cambias el ángulo del mapa.

¿Y si quiero cargar mi propia ruta o edificios?

  • Para rutas personalizadas puedes cargar un archivo GeoJSON con líneas y mostrarlas en el mapa.
  • Para edificios propios en 3D debes usar un tileset desde Mapbox Studio con propiedades de altura.

Todo el codigo lo encuentras aquí.

Ver el paso a paso:

Etiquetas: , , ,