多個圓形圖層疊加

範例展示

原始碼

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%;
        }
    </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" src="//cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></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.52415, 25.04624], // 初始中心座標，格式為 [lng, lat]
            zoom: 14, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            pitch: 42, // 攝影機仰角, 可省略, [0-60]
            bearing: -13, // 地圖角度, 可省略, [-180 ~ 180; 0 為正北朝上, 180 為正南朝上]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        var circles = [
            {
                id: 0, 
                center: {
                    lat: 25.04624, 
                    lng: 121.52415
                },
                radius: 500, // 500 公尺
                color: "#2970C0", 
                outlineColor: "blue"
            }, 
            {
                id: 1, 
                center: {
                    lat: 25.05003,
                    lng: 121.52942
                },
                radius: 300, // 300 公尺
                color: "#4E9A54", 
                outlineColor: "gold"
            }, 
            {
                id: 2, 
                center: {
                    lat: 25.04996, 
                    lng: 121.50792
                },
                radius: 1500, // 1,500 公尺
                color: "#D63030", 
                outlineColor: "red"
            }
        ];

        var center = circles[0].center;
        var boundsRange = {
            lat: 0.042, 
            lng: 0.042
        }

        map.on('load', function () {
            circles.forEach(function(circle) {
                new gomp.Marker({
                    offset: [0, -15]
                })
                .setLngLat([circle.center.lng, circle.center.lat])
                .addTo(map);

                // 繪製中心點半徑方圓範圍
                var circleData = turf.circle(turf.point([circle.center.lng, circle.center.lat]), circle.radius / 1000, {});
                map.addLayer({
                    "id": "circle-fill-" + circle.id,
                    "type": "fill",
                    "source": {
                        "type": "geojson",
                        "data": circleData
                    },
                    "paint": {
                        "fill-color": circle.color,
                        "fill-opacity": 0.2
                    }
                });
                map.addLayer(
                    {
                        id: "circle-text-" + circle.id,
                        type: "symbol",
                        source: {
                            type: "geojson",
                            data: {
                                type: "FeatureCollection",
                                features: [
                                    {
                                        type: "Feature",
                                        geometry: {
                                            type: "Point",
                                            coordinates: [circle.center.lng, circle.center.lat]
                                        }
                                    }
                                ]
                            }
                        },
                        layout: {
                            'text-allow-overlap': true,
                            'text-field': '半徑' + circle.radius + '公尺範圍',
                            'text-font': ["Open Sans Regular"],
                            'text-offset': [0, 1],
                            'text-size': 15
                        },
                        paint: {
                            'text-color': circle.color,
                            'text-halo-color': '#fff',
                            'text-halo-width': 2
                        }
                    }
                );
                map.addLayer({
                    "id": "circle-outline-" + circle.id,
                    "type": "line",
                    "source": {
                        "type": "geojson",
                        "data": circleData
                    },
                    "paint": {
                        "line-color": circle.outlineColor,
                        "line-opacity": 0.3,
                        "line-width": 2,
                        "line-offset": 1
                    }
                });
            });
        });
    </script>
</body>
</html>