Visualizing data in 3D with WebGL

QGIS displays data in a two-dimensions even if the data is three-dimensional. However, most modern browsers can display 3D data using the WebGL standard. In this recipe, we'll use the Qgis2threejs plugin to display QGIS data in 3D in a browser.

Getting ready

You will need to download some raster elevation data in the zipped directory and place it in your qgis_data directory from the following:

https://geospatialpython.googlecode.com/svn/saveqml.zip

You will also need to install the Qgis2threejs plugin using the QGIS Plugin Manager.

How to do it...

We will set up a color ramp for a DEM draped over a hillshade image and use the plugin to create a WebGL page in order to display the data. To do this, we need to perform the following steps:

  1. First, we will need to import the relevant libraries and the Qgis2threejs plugin:
    from PyQt4.QtCore import *
from PyQt4.QtGui import *
import Qgis2threejs as q23js
  2. Next, we'll disable QGIS automatic reprojection to keep the data display in meters:
    iface.mapCanvas().setCrsTransformEnabled(False)
iface.mapCanvas().setMapUnits(0)
  3. Now, we can load our raster layers:
    demPth = "/Users/joellawhead/qgis_data/saveqml/dem.asc"
hillshadePth = "/Users/joellawhead/qgis_data/saveqml/hillshade.tif"
dem = QgsRasterLayer(demPth, "DEM")
hillshade = QgsRasterLayer(hillshadePth, "Hillshade")
  4. Then, we can create the color ramp renderer for the DEM layer:
    algorithm = QgsContrastEnhancement.StretchToMinimumMaximum
limits = QgsRaster.ContrastEnhancementMinMax
dem.setContrastEnhancement(algorithm, limits)
s = QgsRasterShader() 
c = QgsColorRampShader() 
c.setColorRampType(QgsColorRampShader.INTERPOLATED) 
i = [] 
qri = QgsColorRampShader.ColorRampItem
i.append(qri(356.334, QColor(63,159,152,255), '356.334')) 
i.append(qri(649.292, QColor(96,235,155,255), '649.292')) 
i.append(qri(942.25, QColor(100,246,174,255), '942.25')) 
i.append(qri(1235.21, QColor(248,251,155,255), '1235.21'))
i.append(qri(1528.17, QColor(246,190,39,255), '1528.17')) 
i.append(qri(1821.13, QColor(242,155,39,255), '1821.13'))
i.append(qri(2114.08, QColor(165,84,26,255), '2114.08'))
i.append(qri(2300, QColor(236,119,83,255), '2300'))
i.append(qri(2700, QColor(203,203,203,255), '2700'))
c.setColorRampItemList(i) 
s.setRasterShaderFunction(c) 
ps = QgsSingleBandPseudoColorRenderer(dem.dataProvider(), 1,  s)
ps.setOpacity(0.5) 
dem.setRenderer(ps)
  5. Now, we're ready to add the raster layers to the map:
    QgsMapLayerRegistry.instance().addMapLayers([dem, hillshade])
  6. To create the WebGL interface, we need to take control of the plugin's GUI dialog, but we will keep it hidden:
    d = q23js.qgis2threejsdialog.Qgis2threejsDialog(iface)
  7. Next, we must create a dictionary of the properties required by the plugin. The most important is the layer ID of the DEM layer:
    props = [None,
 None,
 {u'spinBox_Roughening': 4,
u'checkBox_Surroundings': False,
u'horizontalSlider_Resolution': 2,
u'lineEdit_Color': u'',
 'visible': False,
 'dem_Height': 163,
u'checkBox_Frame': False,
u'lineEdit_ImageFile': u'',
u'spinBox_Size': 5,
u'spinBox_sidetransp': 0,
u'lineEdit_xmax': u'',
u'radioButton_MapCanvas': True,
 'dem_Width': 173,
u'radioButton_Simple': True,
u'lineEdit_xmin': u'',
u'checkBox_Sides': True,
u'comboBox_DEMLayer': dem.id(),
u'spinBox_demtransp': 0,
u'checkBox_Shading': False,
u'lineEdit_ymax': u'',
u'lineEdit_ymin': u'',
u'spinBox_Height': {5},{},{},{},{}]}
  8. Now, we will apply these properties to the plugin:
    d.properties = props
  9. We must set the output file for the HTML page:
    d.ui.lineEdit_OutputFilename.setText('/qgis_data/3D/3d.html')
  10. In the next step, we must override the method that saves the properties, otherwise it overwrites the properties we set:
    def sp(a,b):
return
d.saveProperties = sp
  11. Now, we are ready to run the plugin:
    d.run()
  12. On your filesystem, navigate to the HTML output page and open it in a browser.
  13. Follow the help instructions to move the 3D elevation display around.

How it works...

This plugin is absolutely not designed for script-level access. However, Python is so flexible that we can even script the plugin at the GUI level and avoid displaying the GUI, so it is seamless to the user. The only glitch in this approach is that the save method overwrites the properties we set, so we must insert a dummy function that prevents this overwrite.

The following image shows the WebGL viewer in action:

How it works...
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset