how to draw contour lines 3d
How to create a 3D web map of profile lines
Some weeks agone I worked on a 3D map of contour lines and h2o bodies. It turned out pretty prissy, so I decided to write a tutorial on how I built it. Earlier we swoop into the tutorial you lot tin can view a live version on Glitch and yous can explore the code here.
So without further ado, let's get started!
Part 1: Prepare the information
The data sources for this map are contour lines generated from SRTM data, water bodies from OpenStreetMap and hills as points from swissNAMES3D, a dataset published by Swisstopo, the Swiss Federal Function of Topography. The first two sources comprehend areas all around the world, while the tertiary is specific to Switzerland, and then you will demand to find other sources for your area of interest.
Contour lines
Let'south navigate to the OpenDEM website, where they have profile lines for the whole globe generated from SRTM information. Navigate to your region of interest and download the tile that includes it.
Load the data in ArcGIS Pro and reproject it to a projected coordinate system (for Switzerland I used LV95). So clip the contour lines to a smaller expanse containing merely your region of interest. Mostly a region that is as well large might not be very performant. For Zurich I decided to prune them based on a circle polygon I created in another layer. You could likewise clip them to some administrative border or some other shape. It'due south important to keep the elevation field, because nosotros will utilise it to align the features to the ground. In the end, the contour lines look like this:
H2o bodies
Next we'll download the OpenStreetMap information (I downloaded the whole dataset for Switzerland from Geofabrik). Let's load the polygon h2o bodies in ArcGIS Pro. First we'll reproject it to LV95 and then we'll clip it to the circle polygon shape. So nosotros start filtering the main water bodies. Nosotros want to include but the features with fclass set to water. From the rivers I only kept the Limmat, which is the largest i. Then I selected the main h2o bodies by calculating the surface area in an attribute using Calculate Geometry and selecting all the features with an area bigger than a sure threshold. Some features appeared twice in the dataset, so I removed the duplicates past applying the Delete Identical tool with osm_id field. After this strict selection I only had 9 features in my dataset:
Hills
The original swissNAMES3D data tin be found hither. I downloaded and clipped the data to the circumvolve shape. Then I started filtering the points: I only kept the hills OBJEKTART = Huegeland I manually removed the points that are non dominant hills, like the selected ones in this image:
The points in this dataset take z values which we will utilise for height alignment. I removed most of the fields that weren't needed, just kept the Proper noun field to utilize it for labeling. Later the selection, the dataset contains 45 hill peaks:
After these preprocessing steps, we tin now publish the iii datasets as characteristic layers to ArcGIS Online. Here are the items after publishing:
- Contour lines: https://zurich.maps.arcgis.com/home/item.html?id=c9e39a799fd44255a42f567fb1457f29
- Hills: https://zurich.maps.arcgis.com/home/particular.html?id=e0aa24dd8df44d909cf12aa4a78e457d
- H2o bodies: https://zurich.maps.arcgis.com/home/item.html?id=75306717ac2847b39845b9931405793c
Part ii: Visualization
Permit'south motion into JavaScript country to create a spider web visualization with the data. First of all, we create a WebScene and we display it in a SceneView:
Notice that the WebScene has a transparent basis and the SceneView has a transparent groundwork. This volition provide a nice effect in one case we apply the CSS shadow to the canvas element where the webscene is rendered. Add together this filter effect in your css file:
Next, nosotros get-go adding the data and applying renderers. The principal thing about this visualization is that it uses 2 colors: a light chocolate-brown for the background rgb(244,239,227) and a dark brown rgb(86,72,31)for the features and the text. All the other colors are obtained by blending these 2.
To create a shine transition from lower areas to higher ones, we continuously change the opacity from lower contour lines to the college ones. With ArcGIS API for JavaScript, this tin can be done using the opacity visual variable:
Notice the elevationInfo using an Arcade expression that exaggerates the bodily elevation of the contour lines.
Next we'll add together the water polygon and as a symbol we will utilize an extruded polygon to enhance the 3D event:
And so we render the hills with a PointSymbol with an IconSymbol3DLayer. The important office here is labeling these points. When visualizing labels in 3D, nosotros oftentimes use callouts to avert occlusion and to conspicuously show where the characterization is pointing at. Also notice over again an added elevation info that exaggerates z-values:
This map looks overnice, but it would be much nicer to guide the user to the most famous hills effectually Zurich. To do that we'll add a panel on the right side that contains some more information about the area. We will as well place buttons that users tin click to navigate easier to the main viewpoints. For each viewpoint we store a camera position that we can print from the app by running this code in the browser panel:
Now we can demark those camera positions to the buttons in the panel to guide the user to the areas of interest:
Final, simply not least, I always make certain to add credits for the data I used.
And those were the principal steps for creating this web app. If y'all follow this tutorial feel gratuitous to improvise, combine it with other data, become wild with the colors… and share it in the comments, I'd love to run across what you made!
Accept fun mapping and coding!
Raluca
Source: https://medium.com/@ralucagnicola/how-to-create-a-3d-web-map-of-contour-lines-68d1e1491a2b
0 Response to "how to draw contour lines 3d"
Post a Comment