Vector Layer Settings

If you look at the minimal tutorial, you'll see that the vector layers look very similar to those in 2D maps except for the "Extrusion" settings. So that we have a point, polyline, and polygon layer to work with, go ahead and add a simple polyline layer such as the rivers and lake centers lines from Natural Earth. We have the data converted to a JSON file avilable at:

https://gsp.humboldt.edu/archive/GISData/2019/WGS84_Geographic/NaturalEarth/110m_physical/ne_110m_rivers_lake_centerlines.js

2D Settings

Most of the 2D settings are also available for 3D maps. If you would like to give the countries a more pleasing color scheme, try adding random colors just as we would in 2D:

TheLayer.OnLoad=function()
{
	var TheDataset=this.GetDataset();
	
	var NumFeatures=TheDataset.GetNumFeatures();
	
	for (var i=0;i<NumFeatures;i++)
	{
		var HSL=Math.random()*360;
	
		this.SetFeatureSetting("Style","fillStyle",i,"hsl("+HSL+",50%,80%)");
	}
}

Extrusions

CanvasMap and Three.js have the ability to "extrude" objects from 2 dimensions into three dimensions. This includes points, polylines, and polygons. Points are the easiest so we'll start with them. Take a look at the example and you'll see that when the point data is added, the only difference is the specification of the "Extrusion Depth" as a an attribute. If you rotate the scene,you'll see that each of the cities is different in height based on the cities size. Try changing the line of code with the Extrusion Depth to the following and then change the number to see how it changes the height of the cities:

TheLayer.SetSetting("Extrusion","depth",10); 

For points, you can still change the mark type and size but images will not work for points.

The CM3LayerVector class supports the following settings for extruding vector data including points:

• depth - distance to extrude the object, the height of the extrusion
• bevelEnabled - true to bevel the geometry
• steps - number of points to sub divide the bevel segements, larger numbers of steps increases smoothness but slows performance
• bevelSegments - number of layers to use to create the bevel, larger numbers of steps increases smoothness but slows performance
• bevelSize - how far the extrusion extends beyond the outline of the shape (i.e. makes the shape thicker)
• bevelThickness - how deep into the shape the bevel goes

Note that extrusions do not appear to look good without some bevel. To create a square extrusion, try setting the bevelEnabled setting to true and then make he bevelThickness and bevelSize to small values (near 0).

Extruding Polylines

The default settings for polylines will just draw a line with the specified color.

var URL="https://gsp.humboldt.edu/archive/GISData/2019/WGS84_Geographic/NaturalEarth/110m_physical/ne_110m_rivers_lake_centerlines.js";

var TheRiversLayer=new CM3LayerVector();
TheRiversLayer.SetSetting("Item","Name","Rivers");

TheRiversLayer.SetSetting("Style","fillStyle","rgba(0,0,200,1)");
TheRiversLayer.SetSetting("Elevation","ZOffset",6);

TheMainContainer.AddLayer(TheRiversLayer);   
TheRiversLayer.SetSetting("Dataset","URL",URL);

See the CanvasMap tutorial on extrusions for more information.

Elevation

You can also change the ZOffset for features to make them follow terrain or float in the air above your map.

 TheLayer.SetSetting("Elevation","ZOffset",10);