Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
Cómo crear un mapa 3D
Amazon Location Service le permite añadir elementos tridimensionales a los mapas, por ejemplo, Terrain3D para mostrar los datos de elevación como una superficie tridimensional o Buildings3D para mostrar estructuras urbanas con altura y volumen.
Cree un mapa con detalles tridimensionales del terreno
En este ejemplo se muestra cómo crear un mapa con Terrain3D parámetros.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Terrain</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
const apiKey = "Add Your Api Key";
const mapStyle = "Standard";
const awsRegion = "us-east-1";
const map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Terrain3D&key=${apiKey}`,
center: [7.6583, 45.9763],
zoom: 12,
pitch: 60, // Tilt angle (0-85 degrees)
validateStyle: false, // Disable style validation for faster map load
});
</script>
</body>
</html>
- style.css
-
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
Crea un mapa con detalles de edificios tridimensionales
En este ejemplo se muestra cómo crear un mapa con Buildings3D parámetros.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Buildings</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
const apiKey = "Add Your Api Key";
const mapStyle = "Standard";
const awsRegion = "us-east-1";
const map = new maplibregl.Map({
container: 'map',
style:
`https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?buildings=Buildings3D&key=${apiKey}`,
center: [7.6583, 45.9763],
zoom: 12,
pitch: 60, // Tilt angle (0-85 degrees)
validateStyle: false, // Disable style validation for faster map load
});
</script>
</body>
</html>
- style.css
-
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
Activar/desactivar la vista de globo
En este ejemplo se muestra cómo activar o desactivar la proyección de vista de globo. De forma predeterminada, la vista de globo está habilitada.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Globe View</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
const apiKey = "Add Your Api Key";
const mapStyle = "Standard";
const awsRegion = "us-east-1";
const map = new maplibregl.Map({
container: 'map',
style:
`https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
center: [-74.5, 40],
zoom: 2,
validateStyle: false, // Disable style validation for faster map load
});
map.on('style.load', () => {
// Globe view is enabled by default
// To disable globe view, uncomment the next line:
// map.setProjection({});
});
</script>
</body>
</html>
- style.css
-
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
