Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Cara membuat peta 3D
Amazon Location Service memungkinkan Anda menambahkan fitur tiga dimensi ke peta, seperti Terrain3D menampilkan data elevasi sebagai permukaan tiga dimensi, atau Buildings3D menampilkan struktur perkotaan dengan tinggi dan volume.
Buat peta dengan detail medan tiga dimensi
Contoh ini menunjukkan cara membuat peta dengan Terrain3D parameter.
- 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;
}
Buat peta dengan detail bangunan tiga dimensi
Contoh ini menunjukkan cara membuat peta dengan Buildings3D parameter.
- 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;
}
Aktifkan/nonaktifkan tampilan Globe
Contoh ini menunjukkan cara mengaktifkan atau menonaktifkan proyeksi tampilan Globe. Secara default, tampilan Globe diaktifkan.
- 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;
}
