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.

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

Falke Design 13.12.2020 21:06

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

Parkes555 13.12.2020 22:34

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

Parkes555 13.12.2020 23:46
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
3
860
1
Перейти к ответу Данный вопрос помечен как решенный

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

Полный код:

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

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

Parkes555 16.12.2020 19:04
Демо смотрите в демо, всё работает именно так, как я описал
Falke Design 16.12.2020 19:53

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

Parkes555 17.12.2020 23:06

Другие вопросы по теме