Come impostare le caratteristiche di stile per una mappa - Servizio di posizione Amazon

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Come impostare le caratteristiche di stile per una mappa

Amazon Location Service ti consente di impostare funzionalità di stile per personalizzare la tua mappa. Puoi aggiungere alla mappa caratteristiche del terreno, della densità del contorno, del traffico e della modalità di viaggio.

  • Terreno: abilita la visualizzazione topografica per mostrare le variazioni di altitudine e le caratteristiche geografiche, aiutando gli utenti a comprendere il paesaggio fisico delle aree mappate.

  • ContourDensity: Regola i livelli di densità delle linee di livello per visualizzare la pendenza del terreno e i cambiamenti di elevazione.

  • Traffico: sovrapponi i dati sul traffico in tempo reale per mostrare le condizioni attuali del traffico, come la congestione stradale, la costruzione e gli incidenti, per prendere decisioni informate sul percorso.

  • TravelMode: Seleziona livelli specifici per il trasporto per visualizzare le informazioni di percorso pertinenti per il trasporto pubblico o la navigazione su camion con restrizioni stradali.

In questo esempio, creerai una mappa con caselle di controllo per visualizzare il terreno e le linee di livello singolarmente o contemporaneamente.

Index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain 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@4.x/dist/maplibre-gl.css' />
                <style>
            .controls {
                position: absolute;
                top: 10px;
                left: 10px;
                background: white;
                padding: 10px;
                border-radius: 5px;
                z-index: 1000;
            }
        </style>
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <div class="controls">
            <label><input type="checkbox" id="terrain" checked> Terrain</label><br>
                <label><input type="checkbox" id="contour" checked> Contour Lines</label>
        </div>
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            let terrainEnabled = true;
            let contourEnabled = true;

            function updateMap() {
                // Built-in JavaScript API that handles URL query parameters
                const params = new URLSearchParams({ key: apiKey });
                
                if (terrainEnabled) params.append('terrain', 'Hillshade');
                if (contourEnabled) params.append('contour-density', 'Medium');
                
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?${params}`;
                map.setStyle(styleUrl);
            }

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&contour-density=Medium&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 10,
            });

            document.getElementById('terrain').addEventListener('change', (e) => {
                terrainEnabled = e.target.checked;
                updateMap();
            });

            document.getElementById('contour').addEventListener('change', (e) => {
                contourEnabled = e.target.checked;
                updateMap();
            });
        </script>
    </body>
</html>

In questo esempio, creerai una mappa con il layer della modalità di viaggio in camion abilitato per mostrare informazioni sul percorso e le restrizioni stradali specifiche del camion.

Index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Truck routing 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@4.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <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 truckMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Truck&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: truckMapStyleUrl,
                center: [-74.0060, 40.7128], // NYC coordinates
                zoom: 12,
            });
        </script>
    </body>
</html>