調整疊加圖層透明度

範例展示

圖層透明度 100%
原始碼

copy
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>調整疊加圖層透明度 - 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%;
        }
        label{
            display:block;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="slider">
        <label>圖層透明度 <span id="opacity">100%</span></label>
        <input id="slider" type="range" min="0" max="100" step="0" value="100" />
    </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: [121.54208, 25.09499], // 初始中心座標，格式為 [lng, lat]
            zoom: 13, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        var slider = document.getElementById('slider');
        var sliderValue = document.getElementById('opacity');
        
        map.on('load', function() {
            var imageLayer = {
                "id": "chungShanDist",
                "source": {
                    "type": "image",
                    "url": "[YOUR_IMAGE_HERE]", // 請代換為您的圖檔之 URL (例如 "https://example.com/image.png")
                    "coordinates": [
                        [121.51584139, 25.10385030],
                        [121.57275227, 25.10385030],
                        [121.57275227, 25.03308515],
                        [121.51584139, 25.03308515]
                    ]
                },
                "type": "raster",
                "paint": {"raster-opacity":1}
            };
            map.addLayer(imageLayer);
            
            slider.addEventListener('change', function(e) {
                // 調整圖層透明度
                map.setPaintProperty('chungShanDist', 'raster-opacity', parseInt(e.target.value, 10) / 100);
                
                // 顯示當前透明度
                sliderValue.textContent = e.target.value + '%';
            });
        });
    </script>
</body>
</html>