[Gfoss] Buffer con Turf renderizzato in MapBox
Massimiliano Moraca
info a massimilianomoraca.it
Gio 31 Ott 2019 19:24:21 CET
Salve a tutti, mi trovo di fronte a questo problema/dilemma e non so come
comportarmi. Voglio generare un buffer a distanza prestabilita intorno ad
alcuni punti usando le librerie di spatial analysis Turf.js[1] e
renderizzare il tutto con MapBox.
Leggendo la documentazione ufficiale di Turf e di MapBox(che usa comunque
Turf per lo spatial analysis) mi sono trovato di fronte a tre diverse
versioni di questa semplice procedura ma solo una di esse funziona:
map.on('load', function() {
/// Esempio dal sito Turf.js | https://turfjs.org/docs/#buffer
console.log('- Usando l\'
esempio preso dal sito Turf.js voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
///////// START
var point = turf.point([-90.548630, 14.616599]);
console.log('Ho letto le coordinate del punto')
var buffered = turf.buffer(point, 500, {units: 'miles'});
console.log('Con le coordinate del punto ho generato il buffer')
///////// FINE
/// Esempio 1 dal sito MapBox |
https://docs.mapbox.com/help/how-mapbox-works/geospatial-analysis/
console.log('- Usando l\'
esempio1 preso dal sito MapBox voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
///////// START
var point = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0, 0]
},
properties: {
name: 'Null Island'
}
};
console.log('Ho letto le coordinate del punto')
var buffered = turf.buffer(point, 200, { unit: 'miles' });
console.log('Con le coordinate del punto ho generato il buffer')
///////// FINE
/// Esempio 2 dal sito MapBox creato visualizzando il codice sorgente
della mappa |
https://docs.mapbox.com/help/demos/turf-intro/nullisland.html
console.log('- Usando l\'
esempio2 preso dal sito MapBox voglio leggere il punto, generare un
buffer e renderizzare entrambi
\n\n')
///////// START
var point = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
},
'properties': {
'name': 'Null Island'
}
};
console.log('Ho letto le coordinate del punto')
var buffered = turf.buffer(point, 200, 'miles');
console.log('Con le coordinate del punto ho generato il buffer')
///////// FINE
// Aggiunta dell'url del vettore sorgente
map.addSource('point_source', {
type: 'geojson',
data: point,
});
console.log('Ho associato al punto la geometria')
// Renderizzazione del vettore sorgente
map.addLayer({
'id': 'tower',
'type': 'circle',
'source': 'point_source',
paint: {
'circle-color': '#f30',
'circle-radius': 3,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
console.log('Ed infine l\'ho renderizzato\n\n')
// Renderizzazione del buffer
map.addLayer({
'id': 'buffer',
'type': 'fill',
'source': {
'type': 'geojson',
'data': buffered
},
'layout': {
// 'line-join': 'round',
// 'line-cap': 'round'
},
'paint': {
'fill-color': '#fff',
'fill-opacity': 0.50,
'fill-outline-color': '#f30'
}
});
console.log('Ora ho renderizzato il buffer\n\n\n\n')
console.log('Stai vedendo il progetto completamente renderizzato con l\'
aggiunta dei vettori che hai richiesto')
});
Se volete fare un test commentate due esempi per volta. Sia che si usa
"*Esempio
dal sito Turf.j"* che "*Esempio 1 dal sito MapBox",* si avrà lo stesso
errore in console:
> Uncaught Error: Invalid unit
> at Object.e.exports.distanceToDegrees (turf.min.js:16)
> at Object.e.exports [as buffer] (turf.min.js:1)
> at r.<anonymous> ((index):53)
> at r.St.fire (evented.js:115)
> at r._render (map.js:1976)
> at map.js:2047
Mentre se si usa l'ultimo esempio il buffer viene renderizzato
correttamente e tutto va come deve andare. Per renderizzare la mappa di
sfondo su cui andare ad inserire il tutto ho usato le indicazioni base di
MapBox[2] e sia MapBox che Turf sono in CDN ed il tutto gira in Django.
Non utilizzo Node.js per il progetto su cui sto lavorando, non so usarlo e
non mi pare sia un obbligo nè per Turf nè per MapBox.
Il mio problema/dilemma sta in questo: è sbagliato il codice di esempio sul
sito delle librerie(può mai essere?) o sono io che sbaglio qualcosa?
____
[1] https://turfjs.org/
[2] https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart
*ing.Massimiliano Moraca*
*Analisi, progettazione e sviluppo di soluzioni GIS e WebGIS*
*P.IVA*: 08700081212
*CELL*: 333 59 49 583 (*lun - ven 9.00 - 18.00*)
*WEB*: www.massimilianomoraca.it
* Attività svolta ai sensi della Legge 4 del 14 gennaio 2013, art.1*
Maggiori informazioni sulla lista
Gfoss