溫度分佈圖 (Heatmap)

範例展示

原始碼

copy
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>溫度分佈圖 (Heatmap) - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [120.973882, 23.6], // 初始中心座標，格式為 [lng, lat]
            zoom: 6, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));
        map.addControl(new gomp.NavigationControl());

        map.on('load', function(){
            map.addSource('temperature', {
                'type': 'geojson',
                'data': "[YOUR_GEOJSON_FILE_HERE]" // 此範例所使用的檔案請見 https://www.map8.zone/js/vector/heatmap.json
            });
            // 新增類別為 circle 之圖層
            map.addLayer({
                'id': 'temperature',
                'type': 'circle',
                'source': 'temperature',
                'paint': {
                    // 依據地圖 zoom 值動態改變 circle-blur (模糊程度) 之值
                    'circle-blur': [ 
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        6, 2, // zoom 為 6 時，circle-blur 為 2
                        20, 1 // zoom 為 20 時，circle-blur 為 1
                    ],
                    // 依據各點 property 內容改變 circle-color (各點顏色) 之值；此處以溫度為例
                    'circle-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'temperature'],
                        // 由溫度 (temperature) 為 0 開始，設定每個區段的顏色
                        0, 'rgb(0, 234, 255)',
                        10, 'rgb(10, 255, 0)',
                        20, 'rgb(160, 255, 0)',
                        30, 'rgb(255, 190, 0)',
                        40, 'rgb(255, 120, 0)',
                        50, 'rgb(255, 81, 0)'
                    ],
                    // 依據地圖 zoom 值改變 circle-radius (圓點尺寸) 之值
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        6, 20, // zoom 為 6 時，circle-radius 為 20
                        7, 25, // zoom 為 7 時，circle-radius 為 25
                        18, 250 // zoom 大於等於 19 時，circle-radius 固定為 250
                    ]
                }
            })
        });
        map.once('idle', function(){
            map.moveLayer('temperature')
        })
    </script>
</body>
</html>