기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 맵에 선을 추가하는 방법
Amazon Location Service를 사용하면 사전 레코딩된 GPS 추적을 선-문자열로 추가하고 실시간 GPS 추적을 동적 맵에 추가할 수 있습니다.
## 사전 레코딩된 선 추가
이 예제에서는 사전 레코딩된 GPS 추적을 동적 맵에 GeoJSON(main.js)으로 추가합니다. 이렇게 하려면 맵에 소스(예: GeoJSON)와 선택한 선 스타일이 있는 계층을 추가해야 합니다.
### 사전 레코딩된 선 코드 예제
------
#### [ index.html ]
```
Add a line on the map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
#### [ main.js ]
```
const routeGeoJSON = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[-123.117011, 49.281306],
[-123.11785, 49.28011],
...
[-123.135735, 49.30106]
]
},
properties: {
name: "Amazon YVR to Stanley Park",
description: "An evening walk from Amazon office to Stanley Park."
}
}
]
};
```
------
## 실시간으로 선 추가
이 예제에서는 새 GPS 좌표를 하나씩 추가하여 실시간 GPS 추적을 생성하는 방법을 시뮬레이션합니다. 실시간 데이터 업데이트를 추적하는 데 유용합니다.
### 실시간 선 코드 예제
------
#### [ index.html ]
```
Add a line on the map in real-time
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
#### [ main.js ]
```
const routeGeoJSON = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[-123.117011, 49.281306],
[-123.11785, 49.28011],
...
[-123.135735, 49.30106]
]
},
properties: {
name: "Amazon YVR to Stanley Park",
description: "An evening walk from Amazon office to Stanley Park."
}
}
]
};
```
------
## 개발자 팁
**범위 맞춤:** 선 좌표의 범위를 계산하여 맵 범위에 선을 맞출 수 있습니다.
```
const coordinates = routeGeoJSON.features[0].geometry.coordinates;
const bounds = coordinates.reduce((bounds, coord) => bounds.extend(coord), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, { padding: 20 });
```