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

周星星日记

已于 2024-04-23 17:28:03 修改

阅读量2.4k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： cesium集合文章标签：前端 cesium

于 2024-04-22 18:14:44 首次发布

本文链接：https://blog.youkuaiyun.com/sky___Show/article/details/138085871

cesium集合专栏收录该内容

9 篇文章

订阅专栏

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

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

Polyline & Cesium.PolylineCollection

在这里插入图片描述
ArcType 线段的类型

以下逐步介绍：

空间直线(无弧度) Cesium.ArcType.NONE
空间直线很好理解，两点之间没有弧度，与球面是二维还是三维没有关系
球面线段
球面距离是球面上两点之间的最短连线的长度，就是经过这两点的大圆在这两点间的一段劣弧的长度。（大圆就是经过球心的平面截球面所得的圆）
恒向线
首先来看它的特性：

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,
    }),
  },
});