토포그래피 맵을 생성하는 방법 - Amazon Location Service
Hillshade 표시윤곽 밀도 선으로 고도 표시Hillshade 및 Contour Density 라인 모두 표시

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

토포그래피 맵을 생성하는 방법

Amazon Location Service를 사용하면 지형 및 윤곽 밀도 기능을 사용하여 지형 맵을 생성하여 고도 변경 및 지리적 특성을 시각화할 수 있습니다.

Hillshade 표시

지형 기능을 사용하면 Hillshade, 고도 변경 사항 및 관련 지리적 특성을 시각화할 수 있습니다.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain 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@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=Hillshade&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
style.css

body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }

윤곽 밀도 선으로 고도 표시

Amazon Location Service를 사용하면 맵에 윤곽 밀도 기능을 추가할 수 있습니다. 이를 통해 지리적 가파른 정도와 고도 변화를 시각화할 수 있습니다.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>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@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?contour-density=Medium&key=${apiKey}`,
                center: [-119.3047, 37.7887], 
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
style.css

body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }

Hillshade 및 Contour Density 라인 모두 표시

Amazon Location Service를 사용하면 맵에서 Hillshade 및 Contour Density 기능을 결합하여 포괄적인 지형 시각화를 수행할 수 있습니다. 이를 통해 깊이 지각이 향상되고 지형 변형 및 지형 특성에 대한 완전한 이해가 가능합니다.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hillshade 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@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?contour-density=Medium&terrain=Hillshade&key=${apiKey}`,
                center: [-119.3047, 37.7887],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
style.css

body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }