如何在地图上显示 3D 要素 - Amazon Location Service
创建包含三维地形细节的地图创建包含三维建筑物详细信息的地图

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

如何在地图上显示 3D 要素

Amazon Location Service 允许您Terrain3D向地图添加三维特征，例如将高程数据显示为三维表面，或者Buildings3D显示具有高度和体积的城市结构。

创建包含三维地形细节的地图

此示例说明如何使用Terrain3D参数创建地图。

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;
}

创建包含三维建筑物详细信息的地图

此示例说明如何使用Buildings3D参数创建地图。

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;
}