尝试一下在线预览此示例演示如何将线标记应用于折线。标记可以通过提供有关关联要素的其他视觉提示来增强线的制图信息。这个场景展示了由 F. Bellingshausen 领导的探险队的路线,该探险队于 1819 年开始证明或反驳南极大陆的存在。箭头线标记使识别路线的方向变得容易。
标记样式设置在 LineSymbol3D 上的 LineSymbol3DLayer 上:
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
10
11
12
13
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"
}
}]
}
该示例还具有 LabelSymbol3D 的新要素,以及 TextSymbol3DLayer。您可以定义材质,背景以及字体。
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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"
}
}
};
准备 labelingInfo 时,可以选择带有 labelExpressionInfo 的内容,并使用属性 labelPlacement 定义标注的位置。
Use dark colors for code blocks
1
2
3
4
5
6
7
labels.labelingInfo = { // autocasts as new LabelClass()
symbol: labelSymbol,
labelExpressionInfo: {
expression: labelExpression
},
labelPlacement: "above-left",
}
对于此示例,使用 VirtualLighting,它可确保场景始终处于良好的照明状态,并且阴影中没有地球的任何部分。灯光的位置跟随相机,并设置在相机后面,左侧有一个小的偏移。
Use dark colors for code blocks
1
2
3
view.environment.lighting = {
type: "virtual" // autocasts as new VirtualLighting()
}