#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. Я изначально не видел часть кнопки в вашем коде. Это сработало как шарм. еще раз спасибо,