第05章 - 图层体系与图层控制

if (this.getEvents) {
  const events = this.getEvents();
  map.on(events, this);
  this.once('remove', () => map.off(events, this));   // 自动解绑
}

const marker = new Marker([30.27, 120.15]);
marker.addTo(map);
marker.addTo(map);   // 第二次什么也不做
console.log(Object.keys(map._layers).length);  // 1

import {LeafletMap, TileLayer, Marker, Polyline, LayerGroup, FeatureGroup} from 'leaflet';

const map = new LeafletMap('map').setView([30.27, 120.15], 12);
new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19}).addTo(map);

// FeatureGroup：能批量绑弹窗、能冒泡事件、能取聚合 bounds
const fg = new FeatureGroup([
  new Marker([30.27, 120.15]),
  new Marker([30.30, 120.20])
]).addTo(map);

fg.bindPopup('我是分组里的成员');
fg.on('click', e => console.log('点了', e.propagatedFrom.getLatLng()));

console.log(fg.getBounds().toBBoxString());  // 聚合包围盒

// LayerGroup：只负责"一起加、一起删"，没有上面这些能力
const lg = new LayerGroup([new Polyline([[30.2, 120.1], [30.3, 120.2]])]).addTo(map);
lg.clearLayers();

const inner = new LayerGroup([new Marker([30.27, 120.15])]);
const outer = new FeatureGroup([inner, new Marker([30.30, 120.20])]);
outer.addTo(map);

outer.eachLayer(l => console.log(l.constructor.name));   // LayerGroup, Marker
console.log(outer.getBounds().isValid());                 // true，包含嵌套分组的点

import {GeoJSON} from 'leaflet';

const data = {
  type: 'FeatureCollection',
  features: [
    {type: 'Feature', properties: {name: 'A', level: 2},
     geometry: {type: 'Point', coordinates: [120.15, 30.27]}}
  ]
};

new GeoJSON(data, {
  filter: feature => feature.properties.level > 1,
  pointToLayer: (feature, latlng) => new CircleMarker(latlng, {radius: 8}),
  onEachFeature: (feature, layer) => layer.bindPopup(feature.properties.name)
}).addTo(map);

import {LeafletMap, TileLayer, LayersControl, Marker, FeatureGroup} from 'leaflet';

const map = new LeafletMap('map').setView([30.27, 120.15], 12);

const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19, attribution: '© OpenStreetMap contributors'
});
const dark = new TileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
  subdomains: 'abcd', maxZoom: 20, attribution: '© OpenStreetMap contributors © CARTO'
});

osm.addTo(map);   // 默认显示的底图必须自己先 addTo

const pois = new FeatureGroup([new Marker([30.27, 120.15])]).addTo(map);

new LayersControl(
  {'标准底图': osm, '暗色底图': dark},       // 基础图层：单选
  {'兴趣点': pois}                            // 叠加层：多选
).addTo(map);

if (this.options.autoZIndex && layer.setZIndex) {
  this._lastZIndex++;
  layer.setZIndex(this._lastZIndex);
}

map.on('baselayerchange', e => {
  console.log('切换到底图：', e.name);
  // e.layer 是当前选中的图层
});

const marker = new Marker([30, 120]);
map.removeLayer(marker);   // 没加过，静默返回

const registry = {
  base: new LayerGroup(),
  poi: new LayerGroup(),
  analysis: new LayerGroup()
};

for (const group of Object.values(registry)) {
  group.addTo(map);   // 组在图上，成员按需增删
}

// 加载 POI
registry.poi.clearLayers();
layers.forEach(l => registry.poi.addLayer(l));

// 一次性隐藏分析结果
map.removeLayer(registry.analysis);
registry.analysis.addTo(map);   // 重新显示

let currentBase = null;

function setBaseLayer(layer) {
  if (currentBase) {
    map.removeLayer(currentBase);
  }
  map.addLayer(layer);
  currentBase = layer;
}