This sample 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. This scene shows the route of an expedition led by F. Bellingshausen that set out in 1819 to prove or disprove the existence of the Antarctic continent. The arrow line markers make it easy to identify the direction of the routes.
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: [121, 72, 0] },
size: "3px",
marker: {
type: "style", // autocasts as new LineStyleMarker3D()
style: "arrow",
placement: "end"
}
}]
}The sample also features new capabilities of LabelSymbol3D with a TextSymbol3DLayer. You can define the material, the background and also the font.
const labelSymbol = {
type: "label-3d", // autocasts as new LabelSymbol3D()
symbolLayers: [{
type: "text", // autocasts as new TextSymbol3DLayer()
material: { color: "black" },
size: 16, // Defined in points
background: {
color: [236, 232, 221, 0.7]
},
font: {
family: "IM FELL DW Pica",
style: "italic",
weight: "normal"
}
}]
};When preparing the labelingInfo, you can choose the content with a labelExpressionInfo and define the location of the label with the property labelPlacement. .
labels.labelingInfo = { // autocasts as new LabelClass()
symbol: labelSymbol,
labelExpressionInfo: {
expression: labelExpression
},
labelPlacement: "above-left",
}For this sample we use the VirtualLighting, which makes sure that the scene is always nicely lit and there are no parts of the globe in shadow. The position of the light follows the camera and is set behind the camera with a small offset to the left side.
view.environment.lighting = {
type: "virtual" // autocasts as new VirtualLighting()
}