Turf.js pointsWithinPolygon — создание полезного массива

Я прочитал документ на 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 и поэтому вызывают ошибки при попытке вызвать координаты.

Учусь на ходу. После успешного определения точек внутри полигона я попытаюсь экспортировать (сохранить извне) указанные точки в виде слоя — на случай, если поможет контекст.

Как всегда спасибо - это сообщество очень щедрое и чрезвычайно полезное.

РЕДАКТИРОВАТЬ. См. файл DEMO.

введите здесь описание изображения


person Parkes555    schedule 12.12.2020    source источник
comment
в функции загрузки дома вы говорите, что хотите загрузить полигон, но создаете point объект, это не сработает. не могли бы вы поделиться своими данными и как выглядят результаты   -  person Falke Design    schedule 13.12.2020
comment
Я попытался создать jfiddle, но анализируется слишком много плагинов и данных. Однако я могу включить основной раздел моего кода js.   -  person Parkes555    schedule 14.12.2020
comment
@FalkeDesign — я обновил нижнюю часть поста, добавив ссылку на сценарий и скриншот того, как он выглядит. Проанализированные CSV представляют собой просто широту/долготу + столбец идентификатора. Просто пытаюсь понять, как определить из них массив для подачи в Turf.js, чтобы создать список точек, попадающих в каждый буфер.   -  person Parkes555    schedule 14.12.2020


Ответы (1)


Не добавляйте функцию в группу GeoJSON, чтобы снова добавить группу в группу GeoJSON. Одного раза достаточно.

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

Complete code:

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

person Falke Design    schedule 14.12.2020
comment
Большое спасибо за это, @falke-design. Я переделал код именно так, как вы изложили, и все намного понятнее, когда разбито на разделы. К сожалению, я не думаю, что функции pointsInPolygon работают. Я попробовал console.log, чтобы увидеть, были ли эти переменные заполнены какими-либо данными, но продолжал возвращаться неопределенными. Я также попытался применить другой стиль к «pointsInBuffer», чтобы увидеть, появляются ли они, но не работают и нет ошибок. - person Parkes555; 16.12.2020
comment
Демо посмотрите в демо, оно работает именно так, как я описал - person Falke Design; 16.12.2020
comment
Первоначально я не видел кнопку в вашем коде. Это сработало как шарм. еще раз спасибо, - person Parkes555; 18.12.2020