Cesium快速上手4-Polylines图元使用讲解

本文详细介绍了Cesium库中Polyline的各种类型,如空间直线、恒向线、罗经线等,以及它们在地图上的表示和实际应用,如导航中的路线绘制。同时涵盖了发光、带边框、箭头和虚线等不同样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Polyline & Cesium.PolylineCollection

在这里插入图片描述
ArcType 线段的类型
在这里插入图片描述
以下逐步介绍:

  1. 空间直线(无弧度) Cesium.ArcType.NONE
    空间直线很好理解,两点之间没有弧度,与球面是二维还是三维没有关系

  2. 球面线段
    球面距离是球面上两点之间的最短连线的长度,就是经过这两点的大圆在这两点间的一段劣弧的长度。(大圆就是经过球心的平面截球面所得的圆)
    在这里插入图片描述

  3. 恒向线
    首先来看它的特性:

1.在墨卡托投影图上显示为直线
2.与每一子午线相交成同一角度
在这里插入图片描述

我们知道球体(例如地球)表面上两点之间的最短距离是一个大圆。导航的时候,要驶过一个真正的大圆圈,需要不断改变转向的路线。在大多数情况下,对于短距离航行而言,大圆弧路线和恒向线路线之间的长度差异很小。在高纬度或长途航行中,差异可能很大。在那种情况下,导航员通常将大圆航线分成一系列短的恒向线,以便舵手可以转向一次之后,几个小时不用转方向。

1.两点直接连线

const redLine = viewer.entities.add({
  name: "Red line on terrain",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: Cesium.Color.RED,
    clampToGround: true,
  },
});

2.罗经线

const greenRhumbLine = viewer.entities.add({
  name: "Green rhumb line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    arcType: Cesium.ArcType.RHUMB,
    material: Cesium.Color.GREEN,
  },
});

3.发光的线 PolylineGlowMaterialProperty

const glowingLine = viewer.entities.add({
  name: "Glowing blue line on the surface",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
    width: 10,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.5,
      taperPower: 0.5,
      color: Cesium.Color.CORNFLOWERBLUE,
    }),
  },
});

4.带边框的线 PolylineOutlineMaterialProperty

const orangeOutlined = viewer.entities.add({
  name:
    "Orange line with black outline at height and following the surface",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      39,
      250000,
      -125,
      39,
      250000,
    ]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
      color: Cesium.Color.ORANGE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK,
    }),
  },
});

5.带箭头的线 PolylineArrowMaterialProperty

const purpleArrow = viewer.entities.add({
  name: "Purple straight arrow at height",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      43,
      500000,
      -125,
      43,
      500000,
    ]),
    width: 10,
    arcType: Cesium.ArcType.NONE,
    material: new Cesium.PolylineArrowMaterialProperty(
      Cesium.Color.PURPLE
    ),
  },
});

6.虚线 PolylineDashMaterialProperty

const dashedLine = viewer.entities.add({
  name: "Blue dashed line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      45,
      500000,
      -125,
      45,
      500000,
    ]),
    width: 4,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
    }),
  },
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值