View a markdown version of this page

3D 맵을 생성하는 방법 - Amazon Location Service
3차원 지형 세부 정보로 맵 생성3차원 건물 세부 정보가 포함된 맵 생성Globe 보기 활성화/비활성화

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

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

Globe 보기 활성화/비활성화

이 예제에서는 글로브 뷰 프로젝션을 활성화하거나 비활성화하는 방법을 보여줍니다. 기본적으로 글로브 보기가 활성화됩니다.

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