Comment ajouter une ligne sur la carte - Amazon Location Service
Ajouter une ligne préenregistréeAjouter une ligne en temps réelConseils aux développeurs

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Comment ajouter une ligne sur la carte

Avec Amazon Location Service, vous pouvez ajouter à la fois des traces GPS préenregistrées sous forme de chaînes de lignes et des traces GPS en temps réel à des cartes dynamiques.

Ajouter une ligne préenregistrée

Dans cet exemple, vous allez ajouter une trace GPS préenregistrée sous forme de fichier GeoJSON (main.js) à la carte dynamique. Pour ce faire, vous devez ajouter une source (comme GeoJSON) et une couche avec le style de ligne de votre choix à la carte.

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Add a line on the map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
            <script src='main.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";
                const awsRegion = "eu-central-1";
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map',
                    style: styleUrl,
                    center: [-123.126575, 49.290585],
                    zoom: 12.5
                });

                map.on('load', () => {
                    map.addSource('vancouver-office-to-stanley-park-route', {
                        type: 'geojson',
                        data: routeGeoJSON
                    });

                    map.addLayer({
                        id: 'vancouver-office-to-stanley-park-route',
                        type: 'line',
                        source: 'vancouver-office-to-stanley-park-route',
                        layout: {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        paint: {
                            'line-color': '#008296',
                            'line-width': 2
                        }
                    });
                });
            </script>
        </body>
    </html>
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."
                }
            }
        ]
    };

Ajouter une ligne en temps réel

Dans cet exemple, vous allez simuler l'ajout de nouvelles coordonnées GPS une par une pour créer une trace GPS en temps réel. Cela est utile pour suivre les mises à jour des données en temps réel.

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Add a line on the map in real-time</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
            <script src='main.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";
                const awsRegion = "eu-central-1";
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map',
                    style: styleUrl,
                    center: [-123.126575, 49.290585],
                    zoom: 12.5
                });

                map.on('load', () => {
                    const coordinates = routeGeoJSON.features[0].geometry.coordinates;
                    routeGeoJSON.features[0].geometry.coordinates = [coordinates[0], coordinates[20]];

                    map.addSource('vancouver-office-to-stanley-park-route', {
                        type: 'geojson',
                        data: routeGeoJSON
                    });

                    map.addLayer({
                        id: 'vancouver-office-to-stanley-park-route',
                        type: 'line',
                        source: 'vancouver-office-to-stanley-park-route',
                        layout: {
                            'line-cap': 'round',
                            'line-join': 'round'
                        },
                        paint: {
                            'line-color': '#008296',
                            'line-width': 2
                        }
                    });

                    map.jumpTo({center: coordinates[0], zoom: 14});
                    map.setPitch(30);

                    let i = 0;
                    const timer = window.setInterval(() => {
                        if (i < coordinates.length) {
                            routeGeoJSON.features[0].geometry.coordinates.push(coordinates[i]);
                            map.getSource('vancouver-office-to-stanley-park-route').setData(routeGeoJSON);
                            map.panTo(coordinates[i]);
                            i++;
                        } else {
                            window.clearInterval(timer);
                        }
                    }, 100);
                });
            </script>
        </body>
    </html>
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."
                }
            }
        ]
    };

Conseils aux développeurs

Limites d'ajustement : vous pouvez ajuster la ligne aux limites de la carte en calculant les limites des coordonnées de la ligne :


    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 });