Turf.js pointsWithinPolygon - 创建可用数组

Question

我已经通读了关于 Turf.js pointsWithinPolygon 的文档，了解到它需要一个数组。我知道我想要完成什么，但我不确定如何正确转换我的 L.geoJSON 层以满足数组条件。请原谅奇怪的格式，因为我最近玩了很多，失去了一些结构。

我的观点是：

    var employees2 = L.geoJSON();    
        
    Papa.parse('src/data1/Employees.csv', {
                        header: true,
                        download: true,
                        dynamicTyping: true,
                        skipEmptyLines: true,
                        complete: function(results) {
                            results.data.forEach((employee) => {
                                feature = {
                                    "type": "Feature",
                                    "geometry": {
                                      "type": "Point",
                                      "coordinates": [employee.Long, employee.Lat]
                                    },
                                    "properties": {
                                      "Postal Code": employee.Pcode
                                    }
                                  }
                                
                                       mrkEmployees = L.geoJSON(feature, {
                                           pointToLayer: function (feature, latlng){
                                               return L.marker(latlng, {icon: redcircle});
                                           }
                                           
                                       }).addTo(employees2)
                                mrkEmployees.bindPopup(employee.Pcode)
                            })
                        }
    });

我的多边形（草坪缓冲区）是：

        var buffers2 = L.geoJSON();
       
        // parse local CSV file
        
        Papa.parse('src/data1/Houses.csv', {
                        header: true,
                        download: true,
                        dynamicTyping: true,
                        skipEmptyLines: true,
                        complete: function(results) {
                            results.data.forEach((house) => {
                                feature = {
                                    "type": "Feature",
                                    "geometry": {
                                      "type": "Point",
                                      "coordinates": [house.Longitude, house.Latitude]
                                    },
                                    "properties": {
                                      "Location": house.Location,
                                      "Type": house.Type
                                    }
                                  }
                                
                                       mrkHouses = L.geoJSON(feature).addTo(houses)
                                        houseBuffer = turf.buffer(mrkHouses.toGeoJSON(), 5, {units: 'kilometers'});
                                        lyrTest = L.geoJSON(houseBuffer, {style: 
                                                house.Type === 'Duplex' ? { color: "blue" } : 
                                                house.Type === 'Quadplex' ? { color: "yellow" } :
                                                { color: "red"}}).addTo(buffers2)
                                
                                        mrkHouses.bindPopup(house.Location);
                                        lyrTest.bindPopup("5km Buffer");
                                

                            })
                    }
            });

让我困惑的部分是如何提取我的数组，因为我的许多属性都是在我解析的 CSV 代码块中定义的，因此在尝试调用坐标时会产生错误。

边学边学。成功定义 pointsWithinPolygon 之后，我将尝试将所述点导出（保存在外部）作为图层 - 以防上下文有帮助。

一如既往地感谢 - 这个社区非常慷慨而且非常乐于助人。

编辑 - 请参阅 DEMO 文件。

Answer 1

不要将特征添加到 GeoJSON-Group，要再次将组添加到 GeoJSON-Group。一次就够了

var employeesData = L.geoJSON(null,{
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: redcircle});
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties["Postal Code"])
    }
}).addTo(map);
...
...Papa loop
results.data.forEach((employee) => {
            var feature = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [employee.Long, employee.Lat]
                },
                "properties": {
                    "Postal Code": employee.Pcode
                }
            };
            employeesData.addData(feature);
        })

缓冲区相同（我将数据和缓冲区分成不同的组）：

var housesData = L.geoJSON(null,{
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Location)
    }
}).addTo(map);

var buffersData = L.geoJSON(null,{
    style: function (feature) {
        return feature.properties.Type === 'Duplex' ? { color: "blue" } : feature.properties.Type === 'Quadplex' ? { color: "yellow" } : { color: "red"}
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup("5km Buffer")
    }
}).addTo(map);

... Papa loop
            housesData.addData(feature);
            buffersData.addData(turf.buffer(feature, 5, {units: 'kilometers'}));

然后你可以检查缓冲区中的点是否：（我不知道第一个函数是否正常工作，如果没有，你必须检查每个缓冲区是否有点 getPointsInPolygonForEachBuffer）

var pointsInBuffer;
function getPointsInPolygon(){
    var ptsWithin = turf.pointsWithinPolygon(employeesData.toGeoJSON(), buffersData.toGeoJSON());
    pointsInBuffer = L.geoJSON(ptsWithin).addTo(map);
}

function getPointsInPolygonForEachBuffer(){
    pointsInBuffer = L.geoJSON().addTo(map);
    buffersData.eachLayer((layer)=>{
        var ptsWithin = turf.pointsWithinPolygon(employeesData.toGeoJSON(), layer.toGeoJSON());
        pointsInBuffer.addData(ptsWithin);
    })
}

完整代码：

var employeesData = L.geoJSON(null,{
pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: redcircle});
},
onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties["Postal Code"])
}
}).addTo(map);

var housesData = L.geoJSON(null,{
onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.Location)
}
}).addTo(map);

var buffersData = L.geoJSON(null,{
style: function (feature) {
    return feature.properties.Type === 'Duplex' ? { color: "blue" } : feature.properties.Type === 'Quadplex' ? { color: "yellow" } : { color: "red"}
},
onEachFeature: function (feature, layer) {
    layer.bindPopup("5km Buffer")
}
}).addTo(map);


Papa.parse('src/data1/Employees.csv', {
header: true,
download: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
    results.data.forEach((employee) => {
        var feature = {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [employee.Long, employee.Lat]
            },
            "properties": {
                "Postal Code": employee.Pcode
            }
        };
        employeesData.addData(feature);
    })
}
});


// parse local CSV file
Papa.parse('src/data1/Houses.csv', {
header: true,
download: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results) {
    results.data.forEach((house) => {
        var feature = {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [house.Longitude, house.Latitude]
            },
            "properties": {
                "Location": house.Location,
                "Type": house.Type
            }
        };
        housesData.addData(feature);
        buffersData.addData(turf.buffer(feature, 5, {units: 'kilometers'}));
    })
}
});


var pointsInBuffer;
function getPointsInPolygon(){
var ptsWithin = turf.pointsWithinPolygon(employeesData.toGeoJSON(), buffersData.toGeoJSON());
pointsInBuffer = L.geoJSON(ptsWithin).addTo(map);
}

function getPointsInPolygonForEachBuffer(){
pointsInBuffer = L.geoJSON().addTo(map);
buffersData.eachLayer((layer)=>{
    var ptsWithin = turf.pointsWithinPolygon(employeesData.toGeoJSON(), layer.toGeoJSON());
    pointsInBuffer.addData(ptsWithin);
})
}

Turf.js pointsWithinPolygon - 创建可用数组

Turf.js pointsWithinPolygon - creating a usable array

buffer

leaflet

turfjs