맵에 3D 기능을 표시하는 방법 - Amazon Location Service
3차원 지형 세부 정보로 맵 생성3차원 건물 세부 정보가 포함된 맵 생성

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

맵에 3D 기능을 표시하는 방법

Amazon Location Service를 사용하면 고도 데이터를 3차원 표면으로 Terrain3D 표시하거나 높이와 볼륨이 있는 도시 구조를 표시하는 등 맵Buildings3D에 3차원 기능을 추가할 수 있습니다.

3차원 지형 세부 정보로 맵 생성

이 예제에서는 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;
}

3차원 건물 세부 정보가 포함된 맵 생성

이 예제에서는 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;
}