leaflet (2) 使用 Layer Groups

發表於 更新於
使用 layer group 切換圖層

Layer groups

假設我們有一些資料想整理在一起，一次控制。

1
2
3
4
let littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

可以使用 Layer Group Class

1
let cities = L.layerGroup([littleton, denver, aurora, golden]);

這樣我們就建立了一筆 cities 的 layer group囉。

Layers Control

在 leaflet 裡有兩種圖層:

  • base layers: 基本圖層，一次只能顯示一層，例如 tile layers。

  • overlays: 加在基本圖層上的其他圖層。

現在可以先建立兩個基本圖層，並加入 map 裡。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});

let streets = L.tileLayer(mapboxUrl, {
  id: 'mapbox/streets-v11',
  tileSize: 512, zoomOffset: -1,
  attribution: mapboxAttribution
  });

let map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [osm, cities]
});

再來建立兩個物件，一個 base layers，一個 overlays。物件裡的key是顯示在control上的名稱，value 則是對應的圖層。

1
2
3
4
5
6
7
8
let baseMaps = {
    "OpenStreetMap": osm,
    "Mapbox Streets": streets
};

let overlayMaps = {
    "Cities": cities
};

也可以直接將樣式帶入 key，如下 Grayscale 會以灰色顯示。

1
2
3
4
var baseMaps = {
    "<span style='color: gray'>Grayscale</span>": grayscale,
    "Streets": streets
};

最後可以來建立 layer control，第一個參數是 base layer物件，第二個參數是 overlayer 物件。兩個參數都是optional。可以只傳入baseLayer物件，省略第二個參數，或只傳入第二個參數，第一個參數設為null。

1
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

來看看完成範例吧

最後，圖層也可以動態增減

1
2
3
4
5
6
7
8
var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
    
var parks = L.layerGroup([crownHill, rubyHill]);
var satellite = L.tileLayer(mapboxUrl, {id: 'MapID', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

layerControl.addBaseLayer(satellite, "Satellite");
layerControl.addOverlay(parks, "Parks");