线标记和标注放置

尝试一下在线预览

此示例演示如何将线标记应用于折线。标记可以通过提供有关关联要素的其他视觉提示来增强线的制图信息。这个场景展示了由 F. Bellingshausen 领导的探险队的路线,该探险队于 1819 年开始证明或反驳南极大陆的存在。箭头线标记使识别路线的方向变得容易。

标记样式设置在 LineSymbol3D 上的 LineSymbol3DLayer 上:

             
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。您可以定义材质背景以及字体

                
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 定义标注的位置。

       
1
2
3
4
5
6
7
labels.labelingInfo = {     // autocasts as new LabelClass()
  symbol: labelSymbol,
  labelExpressionInfo: {
    expression: labelExpression
  },
  labelPlacement: "above-left",
}

对于此示例,使用 VirtualLighting,它可确保场景始终处于良好的照明状态,并且阴影中没有地球的任何部分。灯光的位置跟随相机,并设置在相机后面,左侧有一个小的偏移。

   
1
2
3
view.environment.lighting = {
  type: "virtual"    // autocasts as new VirtualLighting()
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.