PathVisualizer

概述

PathVisualizer 是一个基于 CesiumJS 的可视化组件，用于在地球上绘制航线、航迹等路径，同时支持自定义样式、动态更新等特性。

快速开始

安装

npm install cesium-path-visualizer

使用

1. 引入 CesiumJS 和 PathVisualizer 组件：

   <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
   <script src="./node_modules/cesium-path-visualizer/dist/PathVisualizer.js"></script>
   

2. 创建 Cesium 场景和视图容器：

   <div id="cesiumContainer"></div>
   

   var viewer = new Cesium.Viewer('cesiumContainer');
   

3. 创建 PathVisualizer 实例并添加至场景：

   var pathVisualizer = new PathVisualizer(viewer, {
     path: [{ 
       positions: Cesium.Cartesian3.fromDegreesArrayHeights([
         -75.62898254394531, 40.02804946899414, 0,
         -82.99879455566406, 39.985172271728516, 1000,
       ]),
       color: Cesium.Color.BLUE,
       width: 5.0,
     }]
   });
   

API

PathVisualizer 构造函数

new PathVisualizer(viewer: Cesium.Viewer, options: Object) => PathVisualizer

参数

• viewer：(Cesium.Viewer) 必需，CesiumJS 的 Viewer 实例。

• options：(Object) 必需，配置选项，包括：

  • path：(Array<Object>) 必需，路径数组，每个元素为一个路径对象，包括：

    • positions：(Array<Cesium.Cartesian3>) 必需，路径节点数组，每个元素为 Cesium.Cartesian3 实例，表示经纬度坐标位置。

    • color：(Cesium.Color) 可选，路径颜色，默认为红色。

    • width：(Number) 可选，路径宽度，默认为 3.0。

  • loop：(Boolean) 可选，是否循环播放路径，默认为 false。

  • show：(Boolean) 可选，是否显示路径，默认为 true。

  • trailTime：(Number) 可选，路径尾迹消失时间（单位：秒），默认为 60.0。

  • trailLength：(Number) 可选，路径尾迹长度（单位：米），默认为 10000.0。

返回值

• (PathVisualizer) PathVisualizer 实例。

PathVisualizer 实例方法

flyTo(options: Object)

跳转至路径所在区域。

参数

• options：(Object) 可选，飞行参数选项，包括：

  • duration：(Number) 可选，飞行时间（单位：秒），默认为 3.0。

  • offset：(Cesium.HeadingPitchRange) 可选，相机偏转角度和缩放比例偏移量，默认为 { heading: 0, pitch: -20, range: -1000 }。

show()

显示路径。

hide()

隐藏路径。

setPath(path: Array)

设置路径。

参数

• path：(Array<Object>) 必需，路径数组，每个元素为一个路径对象，包括：

  • positions：(Array<Cesium.Cartesian3>) 必需，路径节点数组，每个元素为 Cesium.Cartesian3 实例，表示经纬度坐标位置。

  • color：(Cesium.Color) 可选，路径颜色，默认为红色。

  • width：(Number) 可选，路径宽度，默认为 3.0。

setLoop(loop: Boolean)

设置路径是否循环播放。

参数

• loop：(Boolean) 必需，是否循环播放路径。

setTrailTime(trailTime: Number)

设置路径尾迹消失时间。

参数

• trailTime：(Number) 必需，路径尾迹消失时间（单位：秒）。

setTrailLength(trailLength: Number)

设置路径尾迹长度。

参数

• trailLength：(Number) 必需，路径尾迹长度（单位：米）。

示例

基本用法

var pathVisualizer = new PathVisualizer(viewer, {
  path: [{
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75.62898254394531, 40.02804946899414, 0,
      -82.99879455566406, 39.985172271728516, 1000,
    ]),
    color: Cesium.Color.BLUE,
    width: 5.0,
  }]
});

隐藏路径

pathVisualizer.hide();

显示路径

pathVisualizer.show();

跳转至路径区域

pathVisualizer.flyTo();

更新路径

pathVisualizer.setPath([{
  positions: Cesium.Cartesian3.fromDegreesArrayHeights([
    -75.80898254394531, 40.02804946899414, 0,
    -82.98879455566406, 39.905172271728516, 1000,
  ]),
  color: Cesium.Color.RED,
  width: 10.0,
}]);

设置路径循环播放

pathVisualizer.setLoop(true);

设置路径尾迹消失时间和长度

pathVisualizer.setTrailTime(30);
pathVisualizer.setTrailLength(5000);

常见问题

如何设置路径节点样式？

目前不支持直接设置路径节点样式，但可以在 options.path 中自定义每段路径的样式，例如：

pathVisualizer.setPath([{
  positions: Cesium.Cartesian3.fromDegreesArrayHeights([...]),
  color: Cesium.Color.BLUE,
  width: 5.0,
}, {
  positions: Cesium.Cartesian3.fromDegreesArrayHeights([...]),
  color: Cesium.Color.RED,
  width: 3.0,
}]);

这里我们使用了两段路径，第一段为蓝色，宽度为 5.0，第二段为红色，宽度为 3.0。

如何动态更新路径节点？

可以使用 setPath 方法更新路径节点，例如：

pathVisualizer.setPath([{
  positions: Cesium.Cartesian3.fromDegreesArrayHeights([...]),
  color: Cesium.Color.RED,
  width: 10.0,
}]);

如何修改路径尾迹的样式？

目前不支持直接设置路径尾迹的样式，但可以在 Cesium.Viewer 中通过 cesiumWidget 对象的 trailLine 属性进行配置，例如：

viewer.cesiumWidget.scene.globe.enableLighting = true;
viewer.cesiumWidget.scene.trackedEntity = undefined;
viewer.cesiumWidget.scene.fog.enabled = false;
viewer.cesiumWidget.scene.globe.showWaterEffect = true;
viewer.cesiumWidget.scene.postProcessStages.fxaa.enabled = true;
viewer.cesiumWidget.trackedEntity = undefined;
viewer.cesiumWidget.scene.globe.depthTestAgainstTerrain = true;

viewer.cesiumWidget.trackedEntityChanged.addEventListener((trackedEntity) => {
  viewer.cesiumWidget.scene.postProcessStages.bloom.enabled = false;

  if (Cesium.defined(trackedEntity)) {
    trackedEntity.path.show = true;
    trackedEntity.path.width = 10.0;
    trackedEntity.path.resolution = 120;
    trackedEntity.path.material = new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.1,
      taperPower: 0.5,
      color: Cesium.Color.fromCssColorString('#ff0000').withAlpha(1.0),
    });
  }
});

viewer.cesiumWidget.scene.postProcessStages.bloom.enabled = true;

这里我们通过在 Cesium.Viewer 对象的各种配置选项中设置 path.show、path.width、path.resolution、path.material 以及 postProcessStages 等属性来控制路径尾迹样式。具体属性及其含义可通过查看 CesiumJS 官方文档进行了解。

如何控制路径的动画效果？

目前不支持直接控制路径动画效果的速度和方向，但可以通过设置 options.loop 为 true 或者 pathVisualizer.setLoop(true) 来实现路径循环播放。同时，您也可以通过调用 pathVisualizer.hide() 和 pathVisualizer.show() 来隐藏和显示路径。