

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

# 정적 맵에 경로를 추가하는 방법
<a name="how-to-add-route"></a>

이 주제에서는 Amazon Location Service를 사용하여 정적 맵에 경로를 추가하는 방법을 알아봅니다. CalculateRoutes API를 사용하여 경로를 얻는 단계를 진행한 다음, GeoJSON과 점 및 선에 대한 사용자 지정 스타일을 사용하여 정적 맵에서 이를 시각화합니다.

## 경로를 추가하는 단계
<a name="steps-to-add-route"></a>

1. `CalculateRoutes` API에서 경로를 가져옵니다. 동일한 직선에 있는 좌표를 제거하여 LineString을 최적화함으로써 쿼리 문자열이 한도에 도달하지 않도록 합니다.

1. 최적화된 좌표 집합을 기반으로 GeoJSON 객체를 생성합니다.

1. LineString의 첫 번째 점과 마지막 점을 가져와 점 지오메트리를 추가하여 시작 및 종료 위치를 표시합니다.

1. 색상, 크기 및 레이블과 같은 속성을 조정하여 비즈니스 요구 사항에 따라 점과 LineString의 스타일을 지정합니다.

## 압축 스타일을 사용하여 경로 추가
<a name="add-route-using-compact-style"></a>

이 예제에서는 시작점과 종료점이 있는 경로를 [정적 맵에 선을 추가하는 방법](how-to-add-line-static.md)에서 생성된 선에 추가합니다. 경로는 시작점과 종료점의 색상, 크기 및 레이블을 포함한 사용자 지정 스타일로 정의됩니다.

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "color": "#000000", 
        "width": "20m",
        "outline-color": "#a8b9cc",  
        "outline-width": "2px"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.11813, 49.28246]
      },
      "properties": {
        "label": "Pacific Centre",
        "icon": "bubble",
        "size": "large",
        "color": "#34B3A4",
        "outline-color": "#006400",
        "text-color": "#FFFFFF"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.13574, 49.30097]
      },
      "properties": {
        "label": "Stanley Park",
        "icon": "bubble",
        "size": "large",
        "color": "#B3346D",
        "outline-color": "#FF0000",
        "text-color": "#FFFFFF"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/ko_kr/location/latest/developerguide/images/static-add-route-compact.png)


------