맵의 스타일 기능을 설정하는 방법 - Amazon Location Service

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

맵의 스타일 기능을 설정하는 방법

Amazon Location Service를 사용하면 스타일 기능을 설정하여 맵을 사용자 지정할 수 있습니다. 지형, 윤곽 밀도, 트래픽 및 이동 모드 기능을 맵에 추가할 수 있습니다.

  • 지형: 지형 시각화를 활성화하여 고도 변경 사항과 지리적 특성을 표시하므로 사용자가 매핑된 영역의 물리적 환경을 이해하는 데 도움이 됩니다.

  • ContourDensity: 윤곽선 밀도 수준을 조정하여 지형 가파른 정도와 고도 변화를 표시합니다.

  • 트래픽: 실시간 트래픽 데이터를 오버레이하여 현재 도로 정체, 건설 및 인시던트와 같은 현재 교통 상황을 표시하므로 정보에 입각한 라우팅 결정을 내릴 수 있습니다.

  • TravelMode: 도로 제한이 있는 대중교통 또는 트럭 탐색에 대한 관련 라우팅 정보를 표시하려면 운송별 계층을 선택합니다.

이 예제에서는 확인란이 있는 맵을 생성하여 지형 및 윤곽선을 개별적으로 또는 동시에 시각화합니다.

Index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain and Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
                <style>
            .controls {
                position: absolute;
                top: 10px;
                left: 10px;
                background: white;
                padding: 10px;
                border-radius: 5px;
                z-index: 1000;
            }
        </style>
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <div class="controls">
            <label><input type="checkbox" id="terrain" checked> Terrain</label><br>
                <label><input type="checkbox" id="contour" checked> Contour Lines</label>
        </div>
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            let terrainEnabled = true;
            let contourEnabled = true;

            function updateMap() {
                // Built-in JavaScript API that handles URL query parameters
                const params = new URLSearchParams({ key: apiKey });
                
                if (terrainEnabled) params.append('terrain', 'Hillshade');
                if (contourEnabled) params.append('contour-density', 'Medium');
                
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?${params}`;
                map.setStyle(styleUrl);
            }

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&contour-density=Medium&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 10,
            });

            document.getElementById('terrain').addEventListener('change', (e) => {
                terrainEnabled = e.target.checked;
                updateMap();
            });

            document.getElementById('contour').addEventListener('change', (e) => {
                contourEnabled = e.target.checked;
                updateMap();
            });
        </script>
    </body>
</html>

이 예제에서는 트럭별 라우팅 정보 및 도로 제한을 표시하도록 트럭 이동 모드 계층이 활성화된 맵을 생성합니다.

Index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Truck routing map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <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 truckMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Truck&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: truckMapStyleUrl,
                center: [-74.0060, 40.7128], // NYC coordinates
                zoom: 12,
            });
        </script>
    </body>
</html>