

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

# 如何创建地形图
<a name="how-to-create-topographic-maps"></a>

Amazon Location Service 允许您使用地形和等高线密度要素创建地形图，以可视化海拔变化和地理特征。

## 显示山体阴影
<a name="show-hillshade"></a>

Terrain 功能允许您对山体阴影、海拔变化和相关的地理要素进行可视化。

### 山体阴影示例
<a name="hillshade-example"></a>

------
#### [ 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%; }
```

------

## 使用等高线密度线显示高程
<a name="show-contour-density"></a>

Amazon Location Service 允许您在地图中添加等高线密度功能。这提供了地理陡度和海拔变化的可视化。

### 等高线密度示例
<a name="contour-density-example"></a>

------
#### [ 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%; }
```

------

## 同时显示山体阴影线和等高线密度线
<a name="show-hillshade-contour"></a>

使用 Amazon Location Service，您可以在地图上组合山体阴影和等高线密度功能，以实现全面的地形可视化。这可以增强深度感知能力，并全面了解地形变化和地形特征。

### 带有等高线密度的山体阴影示例
<a name="hillshade-contour-example"></a>

------
#### [ 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%; }
```

------