Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
Comment créer une carte 3D
Amazon Location Service vous permet d'ajouter des fonctionnalités tridimensionnelles aux cartes, par exemple Terrain3D pour afficher les données altimétriques sous forme de surface tridimensionnelle ou Buildings3D pour afficher des structures urbaines en hauteur et en volume.
Créez une carte avec des détails de terrain en trois dimensions
Cet exemple montre comment créer une carte avec un Terrain3D paramètre.
- 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;
}
Créez une carte avec les détails des bâtiments en trois dimensions
Cet exemple montre comment créer une carte avec un Buildings3D paramètre.
- 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;
}
Activer/désactiver l'affichage du globe
Cet exemple montre comment activer ou désactiver la projection en vue du globe. Par défaut, la vue Globe est activée.
- 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;
}
