turf.js：正在执行缓冲区但未将 geojson 添加到传单地图

Question

div id 称为缓冲区。当用户单击缓冲区时，发生点会缓冲 1 英里

<div id="map2" class="col-md-4 well">
    <p>GeoDjango is da bomb</p>
    <button id="Highlands" class="form-control btn-primary">Highlands</button>
    <button id="buffer" class="form-control btn-warning">Buffer</button>
</div>

javascript

var incidences = new L.GeoJSON.AJAX("http://127.0.0.1:8000/incidence_data/", {
    onEachFeature: function (feature, layer) {
        //console.log(feature.properties);
        layer.bindPopup(feature.properties.name.toString())
    }
});
incidences.addTo(map);

var incidences2 = incidences.toGeoJSON();


$("#buffer").click(function () {
    if ($("#buffer").html() == 'Buffer') {
        var buff = turf.buffer(incidences2, 1, {'units': 'miles'});
        bufferLayer = L.geoJSON(buff).addTo(map);
        $("#buffer").html("Remove Buffer");
    } else {
        map.removeLayer(bufferLayer);
        $("#buffer").html("Buffer");
    }
});

我不确定缓冲区是否正在执行，因为控制台中绝对没有任何内容。

我发现这个问题和我的出奇地相似。 https://gis.stackexchange.com/questions/285077/does-turf-js-work-with-geodjango

Answer 1

incidences2 应仅在 incidences 完全加载后创建。

作为第一次检查，稍后尝试创建它：

console.log("starting...");

const incidences = new L.GeoJSON.AJAX("http://127.0.0.1:8000/incidence_data/", {
    onEachFeature: function (feature, layer) {
        //console.log(feature.properties);
        layer.bindPopup(feature.properties.name.toString())
    }
});
incidences.addTo(map);

console.log("... not loaded yet!");

$("#buffer").click(function () {
    const incidences2 = incidences.toGeoJSON();
    console.log(incidences2);
    if ($("#buffer").html() == 'Buffer') {
        var buff = turf.buffer(incidences2, 1, {'units': 'miles'});
        console.log(buff);
        bufferLayer = L.geoJSON(buff).addTo(map);
        $("#buffer").html("Remove Buffer");
    } else {
        map.removeLayer(bufferLayer);
        $("#buffer").html("Buffer");
    }
});

turf.js：正在执行缓冲区但未将 geojson 添加到传单地图

turf.js: Buffer executing but geojson not being added to leaflet map

javascript

ajax

leaflet

turfjs