3D 路径可视化

此示例显示了可以在 PathSymbol3DLayer 上设置的不同属性，以便为折线要素创建 3D 可视化样式。

通过组合配置文件、宽度和高度，可以创建多种样式：

墙状样式

这种风格垂直拉伸线条，可用于可视化轨迹或空间分隔符，如边界或障碍。

symbols3d-path-quad-wall

要生成此路径样式，您需要将配置文件设置为 quad 并且 height 大于 width。当 anchor 设置为 bottom 且 profileRotation 设置为 heading 时，此样式效果最佳：

const wallSymbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "quad",
    material: {
      color: [100, 100, 100]
    },
    width: 5, // 以 m 为单位的宽度
    height: 30, // 以 m 为单位的高度
    anchor: "bottom", // 垂直锚点设置在墙的最低点
    profileRotation: "heading"
  }]
}

带状样式

带状样式可用于道路、网络、航线等线要素。

symbols3d-path-quad-strip

要创建条带样式的路径，应将 profile 设置为 quad，并且 height 应小于 width。anchor 未设置，因此默认为 center。

示例：

const stripSymbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "quad",
    material: {
      color: [100, 100, 100]
    },
    width: 30, // 以 m 为单位的宽度
    height: 5, // 以 m 为单位的高度
    profileRotation: "heading"
  }]
}

圆管样式

这种样式可用于显示公用管道或地铁线路。

symbols3d-path-round-tube

此样式的 profile 是 “circle”，width 应与 height 具有相同的值。anchor未设置，因此默认为 center。

示例：

const roundTubeSymbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "circle",
    material: {
      color: [100, 100, 100]
    },
    width: 30, // 以 m 为单位的宽度
    height: 30 // 以 m 为单位的高度
  }]
}

方管样式

这种风格适用于展示隧道、空中走廊或任何其他具有矩形管状形状的特征。

symbols3d-path-quad-tube

通过将 profile 设置为 quad 并具有相同的 width 和 height 来创建它。anchor 未设置，因此默认为 center。

示例：

const squareTubeSymbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "quad",
    material: {
      color: [100, 100, 100]
    },
    width: 30, // 以 m 为单位的宽度
    height: 30 // 以 m 为单位的高度
  }]
}