《Cesium 中两点绘制线的实现：实线、虚线、动态线、流动线详解》

摘要

在 Cesium 三维地球可视化开发中，两点之间绘制线是常见的需求。本文详细介绍如何在 Cesium 中实现两点间绘制实线、虚线、动态线和流动线，并提供完整的代码示例，方便开发者快速上手，满足不同场景下的可视化需求。

一、环境与依赖

本文代码基于 Cesium 库进行开发，在使用代码前，请确保已引入 Cesium 库文件。可以通过 CDN 引入：

\<script src="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Cesium.js">\</script>

\<link href="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

或者通过 npm 安装后在项目中引入：

npm install cesium

二、两点绘制实线

在 Cesium 中绘制两点间的实线较为简单，直接通过viewer.entities.add方法添加polyline实体即可，示例代码如下：

// 假设已有viewer实例

let startPoint = Cesium.Cartesian3.fromDegrees(116.38, 39.90);

let endPoint = Cesium.Cartesian3.fromDegrees(116.40, 39.92);

let lineEntity = viewer.entities.add({

  polyline: {
      positions: [startPoint, endPoint],

      width: 5,

    material: Cesium.Color.RED // 设置线的颜色

}

});

上述代码中，通过Cesium.Cartesian3.fromDegrees将经纬度坐标转换为笛卡尔坐标，然后在polyline配置中指定起止点坐标、线宽和颜色，即可完成实线绘制。

三、两点绘制虚线

绘制虚线可以使用PolylineGlowMaterialProperty材质来实现，该材质通过设置特定参数模拟虚线效果，示例代码如下：

// 假设已有viewer实例

var first = Cesium.Cartesian3.fromDegrees(116.38, 39.90);

var end = Cesium.Cartesian3.fromDegrees(116.40, 39.92);

// 计算两个点的中点坐标 

var midpoint = Cesium.Cartesian3.midpoint(first, end, new Cesium.Cartesian3());

// 创建虚线材质