This sample demonstrates how to query an ElevationLayer for the elevation of a point.
It instantiates two elevation layers that contain the elevation of the earth surface before and after the 2014 Oso landslide. When the user clicks on the map, it queries both layers for the elevation at the clicked position and shows the difference between before and after the landslide.
This sample also shows how to apply line markers to polylines. Markers can enhance the cartographic information of a line by providing additional visual cues about the associated feature. In this scene the arrow marker makes it clear in which direction the landslide changed the elevation.
The marker style is set on the LineSymbol3DLayer on a LineSymbol3D:
const lineSymbol = {
type: "line-3d", // autocasts as new LineSymbol3D()
symbolLayers: [
{
type: "line", // autocasts as new LineSymbol3DLayer()
material: { color: [150, 26, 15] },
size: 2,
marker: {
type: "style", // autocasts as new LineStyleMarker3D()
style: "arrow",
placement: "end"
}
}
]
};In this sample, the value of the elevation difference is displayed using a TextSymbol3DLayer inside a PointSymbol3D with a verticalOffset. The graphics have been added to view.graphics, which can be used to display client-side visualizations that do not need to be persisted in webscenes.
const textSymbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
verticalOffset: {
screenLength: 10 // Offset the text to be above the line
},
symbolLayers: [
{
type: "text", // autocasts as new TextSymbol3DLayer()
material: { color: "black" },
size: 12,
background: { color: [255, 255, 255, 0.75] },
verticalAlignment: "bottom" // Aligns the text's bottom to be above the input position
}
]
};
view.graphics.add(
new Graphic({
geometry: inputPosition,
symbol: textSymbol
})
);