如何設定地圖的樣式功能

Amazon Location Service 可讓您設定自訂映射的樣式功能。您可以將地形、輪廓密度、流量和行程模式功能新增至地圖。

地形：啟用地形視覺化以顯示海拔變化和地理特徵，協助使用者了解其映射區域的物理環境。
ContourDensity：調整輪廓線密度層級以顯示地形陡峭度和高度變化。
流量：覆蓋即時流量資料以顯示目前的流量條件，例如目前的道路擁塞、建構和事件，進而做出明智的路由決策。
TravelMode：選取運輸特定圖層，以顯示具有道路限制的公有運輸或卡車導航的相關路由資訊。

在此範例中，您將建立帶有核取方塊的映射，以單獨或同時視覺化地形和輪廓線。

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>

在此範例中，您將建立已啟用卡車行駛模式 layer 的地圖，以顯示卡車特定的路線資訊和道路限制。

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

篩選 POI

靜態映射