【Cesium学习笔记】三、画点、画线、画多边形

---

Ps:本教程所有代码于同一个工程中，运行npm run dev默认首页为App.vue，只需替换App.vue的内容即可切换不同页面。
将上一节的App.vue保存为类似“隐藏控件和按钮.vue”这种对应名称。

一、在Cesium中添加实体

Cesium中添加元素的方式都是在Cesium的Viewer中添加Entity（实体）,再在实体中添加关联的形状。
以下是常见的关联形状：

名称	描述
billboard	广告牌
box	框
cylinder	圆柱体
ellipse	椭圆
ellipsoid	椭球
label	标注
model	模型
plane	平面
point	点
polygon	多边形
polyline	折线
rectangle	矩形
wall	墙

具体可参考Cesium Entity 中文说明

二、画点

通过以下代码在entity中关联一个白色的点，点的大小不随鼠标拉远拉近而改变。

  const point = viewer.entities.add({
    id: 'point', // 设置实体的唯一标识符
    position: Cesium.Cartesian3.fromDegrees(102.7, 25.1), // 设置点的位置，经度为102.7度，纬度为25.1度
    point: {
      pixelSize: 20, // 设置点的像素大小为20
      color: Cesium.Color.WHITESMOKE, // 设置点的颜色为白色
    }
  })
  viewer.zoomTo(point) // 将视图缩放到确保点完全可见的级别

三、画线

新建entity并添加关联的线：

  const polyline = viewer.entities.add({
    polyline: {
      // 将经纬度数组转换为Cartesian3坐标数组，定义折线的各个点位
      positions: Cesium.Cartesian3.fromDegreesArray([102, 25, 103, 25, 104, 25.5]),
      width: 10, // 定义折线的宽度
      material: Cesium.Color.YELLOW, // 定义折线的材质为黄色
    }
  })

四、画多边形

新建polygon的entity在关联多边形

  const polygon = viewer.entities.add({
    polygon: {
      // 定义多边形的层次结构，包含多边形的顶点位置。
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([102, 25, 103, 23, 104, 23, 104, 25])
      },
      // 设置多边形的材质颜色。
      material: new Cesium.Color(1, 53, 19),
      // 设置多边形相对于地形的高度。
      height: 100000,
      // 设置多边形 extrudedHeight 属性，形成立体效果。
      extrudedHeight: 200000,
      // 是否显示多边形轮廓。
      outline: true,
      // 设置多边形轮廓颜色。
      outlineColor: Cesium.Color.WHITE,
      // 是否填充多边形内部。
      fill: false,
    }
  })

五、组合的实体

将一个entity与多个形状关联，即可成组合实体。

  // 组合的实体
  const entity = viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(120, 30, 100), // 定位实体的位置
    billboard: { // 添加一个billboard，即一个图片标记
      image: '/src/assets/goutou.png', // 指定图片路径
      scale: 0.3, // 图片缩放比例
      color: Cesium.Color.RED, // 图片颜色
    },
    label: { // 添加文本标签
      text: '狗头工厂', // 标签文本内容
      font: '13px', // 字体大小
      fillColor: Cesium.Color.WHITE, // 文本颜色
      pixelOffset: new Cesium.Cartesian2(0, -40), // 文本相对于标记的偏移量
    },
    polyline: { // 添加多段线
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([120, 30, 0, 120, 30, 100]), // 线段的两个点，带高度
      material: Cesium.Color.WHEAT, // 线段的材质颜色
    },

  })
  viewer.zoomTo(entity) // 缩放到包含该实体的视图级别

这个组合图形有个很有意思的地方们就是原来做billboard广告牌的图片是白色的，但是将color属性设置为红色，就会对图片进行上色显示。

以上就是本期画图笔记，可以使用其他表中提到的形状进行尝试。