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

#leaflet #buffer #turfjs

#брошюра #буфер #turfjs

Вопрос:

Я прочитал документ о Turf.js Указывает на inpolygon и понимает, что для этого требуется массив. Я знаю, чего я хочу достичь, но я не уверен, как правильно преобразовать мои слои 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)
                            })
                        }
    });
 

и мои полигоны (которые являются буферами turf):

         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 я попытаюсь экспортировать (сохранить извне) указанные точки в виде слоя — на случай, если контекст поможет.

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

РЕДАКТИРОВАТЬ — см. ДЕМОНСТРАЦИОННЫЙ файл.

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

Комментарии:

1. в функции загрузки дома вы говорите, что хотите загрузить полигон, но создаете point объект, это не сработает. не могли бы вы поделиться своими данными и тем, как выглядят результаты

2. Я попытался создать jfiddle, но слишком много плагинов и анализируемых данных. Я могу включить основной раздел моего js-кода.

3. @FalkeDesign — Я обновил нижнюю часть сообщения, включив ссылку на скрипт и скриншот того, как он выглядит. Проанализированные CSV — это просто lat / long столбец идентификатора. Просто пытаюсь выяснить, как определить массив из них для ввода Turf.js чтобы создать список точек, которые попадают в каждый буфер.

Ответ №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);
})
} 

Комментарии:

1. Большое спасибо за это, @falke-design. Я перестроил код точно так, как вы изложили, и все становится намного понятнее при разделении на разделы. К сожалению, я не думаю, что функции pointsInPolygon работают. Я попробовал консоль. войдите, чтобы узнать, были ли эти переменные заполнены какими-либо данными, но продолжали возвращаться неопределенными. Я также попытался применить другой стиль к «pointsInBuffer», чтобы посмотреть, не появились ли они, но не сработали и не было ошибок.

2. Демонстрация посмотрите на демонстрацию, она работает именно так, как я ее описал

3. Я изначально не видел часть кнопки в вашем коде. Это сработало как шарм. еще раз спасибо,