Note, after unzipping both downloads, I change the file extension of the LIDAR to ‘csv’ — it comes as ‘txt’ by default.
Adding the LIDAR data to QGIS using the create layer from a Delimited Text File iconIf you downloaded the same data as I did, you’ll get a lot of points, almost 5 million!The goal is to filter this number to a reasonable amount of features and to render only what you need.
I use a ‘Mask’ in this example below by creating a polygon layer and using the clip tool, and I also filter out elevation less than zero.
When you are happy with your edits, save the file as an ESRI shapefile.
Clipping the LIDAR data with a shapefile ‘mask’After editing the LIDAR data, it’s time to load up the imagery file into QGIS.
The first job is to save the Geotiff as a rendered image:Now we are going to use a tool in the processing menu in QGIS: ‘gdal2xyz’:And we run this tool as batch: we want to make 3 CSV files, one per channel, to get the Red, Green & Blue values for every latitude and longitude.
Load up the three CSVs you generated:To make things a bit easier for myself, I change the field names in the files: in the LIDAR, I rename Longitude to X, Latitude to Y, Elevation to Z; and in the Red, Green and Blue CSVs I save them as ESRI Shapefiles and change Field_3 to Red, Green, & Blue respectively.
Then it’s nearest neighbor time.
I use the ‘NNJoin’ plugin for QGIS for this.
Basically, I’m going to add the nearest color value for every point in the LIDAR, so I have to do the join three times.
The goal is to end up with the following attributes: X | Y | Z | Red | Green | Blue.
Using ‘NNJoin’ plugin to get the Color Values for each LIDAR pointAlmost there, let’s save the shapefile as a CSV so that we can approach the next step, building the array that Deck.
gl will parse.
There are a lot of ways and tools you could use to build the array, I use Tableau, because it is what I'm used to.
You could even build the array in QGIS using the field calculator.
However, the basic principle is the same, we need a concatenated string.
Something like:"["+STR([X])+","+STR([Y])+","+STR([Z])+","+STR([Red])+","+STR([Green])+","+STR([Blue])+"],"Now that you have built the array, prefix and postfix the array with a “[“ and “],” in notepad and save this as ‘array.
json’.
Save it to a CORS compliant website and share it, something like Dropbox should work.
I’ve added a boiler template to get you started!The end result could be something like this:Golden Gate Bridge LIDAR with RGB values using Deck.
gl and Mapbox GL JSShare what you build and reach out on Twitter if you have any questions — tag me @AllanWalkerIT and @mapbox.
Allan WalkerAllan is an Engineer at Mapbox.
www.
mapbox.
com.. More details