缓冲区 TurfJS 的传单控制层答案

【问题标题】：Leaflet Control Layer for buffer TurfJS缓冲区 TurfJS 的传单控制层
【发布时间】：2021-07-21 21:19:14
【问题描述】：

如何从 turf js 到我的控制层制作缓冲区？

这是我的缓冲区代码：

var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                L.geoJSON(bufferedtransportasi).addTo(map)
            }
            
        }).addTo(map);

这是我的控制层代码。我想要层缓冲传输到我的控制层：

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
    };

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

【问题讨论】：

标签： javascript leaflet turfjs

【解决方案1】：

如果您想同时启用/禁用所有缓冲层，您需要将它们添加到 LayerGroup，然后将 LayerGroup 添加到层控件：

var bufferGroup = L.featureGroup().addTo(map);
var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                L.geoJSON(bufferedtransportasi).addTo(bufferGroup)
            }
            
        }).addTo(map);


var overlays = {
        "Sekolah": Sekolah,
        "Kesehatan": Kesehatan,
        "Transportasi": Transportasi,
        "Buffer": bufferGroup
    };

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

要将每个缓冲区添加为自己的控件，请将缓冲区层添加到overlays 对象：

    var overlays = {
        "Sekolah": Sekolah,
        "Kesehatan": Kesehatan,
        "Transportasi": Transportasi
    };

var Transportasi = L.geoJSON(geojsonPointSarprasTransportasi, {
            
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: IconTransportasi
                }).bindTooltip(feature.properties.nama_sarpras);
            },
            onEachFeature: function (feature, latlng) {
                var bufferedtransportasi = turf.buffer(feature, 10, {units: 'kilometers'});
                var buffer = L.geoJSON(bufferedtransportasi).addTo(map)
                overlays[feature.properties.nama_sarpras] = buffer;
            }
            
        }).addTo(map);


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

【讨论】：