Leaflet开发：如何将Turf.js生成的缓冲区图层加入图层控制器

核心就是两个逻辑没捋顺：

• 你现在是在每个交通点要素的循环回调里，生成一个缓冲区就直接把这个临时图层钉在地图上，根本没把所有交通点的缓冲区凑成一个独立的、完整的图层实例
• Leaflet的图层控制器只认提前初始化好的独立图层对象，你循环里临时生成、直接挂地图的零散图层，它根本管不了

1. 提前初始化独立的缓冲区图层组 #

在和其他图层声明同层级的位置，建一个空的图层组专门装所有交通点生成的缓冲区，别在循环里临时建图层：
var transportasiBufferLayer = L.layerGroup();

2. 修改原缓冲区生成逻辑，把缓冲区整合进图层组 #

把原来onEachFeature回调里直接把缓冲区加地图的逻辑，改成把生成的缓冲区图层加到刚才建的图层组里，顺带给缓冲区加个可视化样式——不然生成的无样式图层全是默认透明效果，根本看不到：

var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: IconTransportasi
    }).bindTooltip(feature.properties.nama_sarpras);
  },
  onEachFeature: function (feature) {
    // 按10公里的参数生成对应点的缓冲区
    var bufferedTransportasi = turf.buffer(feature, 10, { units: 'kilometers' });
    // 将生成的缓冲区转为带样式的Leaflet图层，加入提前建好的缓冲区图层组
    L.geoJSON(bufferedTransportasi, {
      style: {
        color: '#2c7fb8',
        weight: 1,
        fillColor: '#2c7fb8',
        fillOpacity: 0.2
      }
    }).addTo(transportasiBufferLayer);
  }
}).addTo(map);

3. 把缓冲区图层接入图层控制器 #

修改原来的overlays配置对象，把建好的transportasiBufferLayer作为一个独立可勾选的图层项加进去：

var baseLayers = {
  "OpenStreetMap": LayerKita,
  "OpenCycleMap": L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'),
  "Outdoors": L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')
};

var overlays = {
  "Sekolah": Sekolah,
  "Kesehatan": Kesehatan,
  "Transportasi": Transportasi,
  "交通设施10公里缓冲区": transportasiBufferLayer
};

L.control.layers(baseLayers, overlays).addTo(map);

如果需要实现“交通点图层勾选显示时，对应的缓冲区自动同步显示/隐藏”的联动效果，加两行事件监听就行：

// 交通点图层显示时同步加载缓冲区
Transportasi.on('add', () => transportasiBufferLayer.addTo(map));
// 交通点图层隐藏时同步移除缓冲区
Transportasi.on('remove', () => map.removeLayer(transportasiBufferLayer));

• 别在onEachFeature的循环回调里直接调用L.geoJSON(bufferedtransportasi).addTo(map)，这种零散挂载的临时图层完全脱离图层控制器的管理范围，后续想控制显示隐藏只能写额外逻辑硬找
• 给缓冲区设置样式的时候别把填充透明度设为0，不然图层虽然存在，但在地图上完全看不见效果

内容的提问来源于stack exchange，提问作者Annisa Afifah