As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Como adicionar uma linha ao mapa
Com o Amazon Location Service, você pode adicionar traços de GPS pré-gravados como sequências de linhas e traços de GPS em tempo real aos mapas dinâmicos.
## Adicionar uma linha pré-gravada
Neste exemplo, você adicionará um traço de GPS pré-gravado como GeoJSON (main.js) ao mapa dinâmico. Para fazer isso, você precisa adicionar uma fonte (como GeoJSON) e uma camada com estilo de linha de sua escolha ao mapa.
### Exemplo de código de linha pré-gravado
------
#### [ 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."
}
}
]
};
```
------
## Adicionar uma linha em tempo real
Neste exemplo, você simulará a adição de novas coordenadas GPS, uma por uma, para criar um traço de GPS em tempo real. Isso é útil para rastrear atualizações de dados em tempo real.
### Exemplo de código de linha em tempo real
------
#### [ 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."
}
}
]
};
```
------
## Dicas para o desenvolvedor
**Ajustar limites:** você pode ajustar a linha aos limites do mapa calculando os limites das coordenadas da linha:
```
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 });
```