Cesium基础-（Entity）-（Polyline）

13、Polyline

Cesium中的Polyline是用于在地球上绘制线的一种方式。想象一下，如果你在地球表面或者空间中画一条线，这条线可以是直的，也可以是弯曲的，Polyline就是用来干这个的。下面是Polyline的属性、方法及描述的表格表示：

属性

方法

这些属性和方法可以帮助你控制线的显示方式，比如线的颜色、宽度和是否显示等。通过使用这些属性和方法，你可以在Cesium中创建出各种动态的线效果，比如飞机的飞行路径或者车辆的行驶路线。

代码示例

// 定义一个名为addPolyline的函数，它接受一个名为viewer的参数，这个参数通常是Cesium的Viewer实例。
addPolyline(viewer) {
    // 在viewer的entities集合中添加一个新的实体。
    viewer.entities.add({
        // 给实体命名为"Red line on terrain"。
        name: "Red line on terrain",
        // 定义一个polyline属性，它包含了绘制折线的配置。
        polyline: {
            // positions属性定义了折线上的点的坐标，这里使用Cesium.Cartesian3.fromDegreesArray方法
            // 将经纬度坐标转换成Cesium内部使用的笛卡尔坐标系。
            positions: Cesium.Cartesian3.fromDegreesArray([
                97.82436, // 经度1
                32.071506, // 纬度1
                102.82742, // 经度2
                27.067512, // 纬度2
                102.832166, // 经度3
                48.058329  // 纬度3
            ]),
            // width属性设置了折线的宽度，这里设置为5。
            width: 5,
            // material属性定义了折线在正常视角下的颜色，这里设置为红色。
            material: Cesium.Color.RED,
            // depthFailMaterial属性定义了当折线位于地面以下时的颜色，这里设置为蓝色。
            // 如果不设置这个属性，位于地下的线段将不可见。
            depthFailMaterial: Cesium.Color.BLUE,
            // clampToGround属性设置为false，意味着折线不会固定在地形上，而是在3D空间中绘制。
            clampToGround: false,
            // arcType属性定义了点与点之间连接的路径类型，这里使用Cesium.ArcType.GEODESIC，
            // 表示使用大地测量线（最短路径）来连接点。
            arcType: Cesium.ArcType.GEODESIC
        },
    });
    // 使用viewer.zoomTo方法将视图聚焦到刚刚添加的实体上。
    viewer.zoomTo(viewer.entities);
}

要在Vue代码环境中运行上述addPolyline函数

步骤 1: 安装Cesium

首先，确保你的Vue项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumPolylineViewer.vue的文件。

步骤 3: 引入Cesium

在Vue组件中引入Cesium库：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

export default {
  name: 'CesiumPolylineViewer',
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 初始化Cesium Viewer
      const viewer = new Cesium.Viewer(this.$refs.cesiumContainer);

      // 添加折线实体
      this.addPolyline(viewer);
    },
    addPolyline(viewer) {
      viewer.entities.add({
        name: "Red line on terrain",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            97.82436, 32.071506,
            102.82742, 27.067512,
            102.832166, 48.058329
          ]),
          width: 5,
          material: Cesium.Color.RED,
          depthFailMaterial: Cesium.Color.BLUE,
          clampToGround: false,
          arcType: Cesium.ArcType.GEODESIC
        },
      });
      viewer.zoomTo(viewer.entities);
    }
  }
};
</script>

步骤 4: 使用CesiumPolylineViewer组件

在你的Vue应用中的任何地方引入并使用CesiumPolylineViewer组件：

<template>
  <div id="app">
    <CesiumPolylineViewer />
  </div>
</template>

<script>
import CesiumPolylineViewer from './components/CesiumPolylineViewer.vue';

export default {
  name: 'App',
  components: {
    CesiumPolylineViewer
  }
};
</script>

欢迎关注我的博客及B站：

博客：

https://blog.csdn.net/weixin_44857463/article/details/129157708

B站：

https://space.bilibili.com/610654927?spm_id_from=..0.0

点击蓝字  关注我们

扫码关注

我们一起学习！