点位起飞并有落地线

基础知识

Viewer他就是我们初始化地图的时候用到一个API，他也就是梦开始的地方，地图初始我们在之前的操作中把他的状态进行啦提升放在啦data函数中.

官网描述 (opens new window)：用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展，它添加了对各种应用程序有用的功能。

也就是这个样子

   this.viewer = new Cesium.Viewer('DOM元素或者盒子的ID',{'配置小部件'})

点位起飞

API:viewer (opens new window)和Cartesian3 (opens new window)

在添加点位的时候this.viewer.entities.add方法中设置他position改为Cesium.Cartesian3.fromDegrees(pointObj.longitude * 1, pointObj.latitude * 1,100)

100椭圆体上方的高度，以米为单位

  // cesium 加载点位
addMarker() {
  const Cesium = this.cesium
  // 清除上一次加载的点位
  this.viewer.entities.removeAll()
  // foreach循环加载点位
  this.pointInfo.forEach((pointObj) => {
    this.viewer.entities.add({
      name: pointObj.psName,
      code: pointObj.id,
      id: pointObj.id,
      position: Cesium.Cartesian3.fromDegrees(pointObj.longitude * 1, pointObj.latitude * 1,100),
      // 点
      // point: {
      //   pixelSize: 5,
      //   color: Cesium.Color.RED,
      //   outlineColor: Cesium.Color.WHITE,
      //   outlineWidth: 2,
      // },
      // 文字标签
      label: {
        // show: false,
        text: pointObj.psName,
        font: '12px monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor: Cesium.Color.fromCssColorString('rgb(11, 255, 244)'),
        outlineWidth: 4,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
        pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
      },
      // 图标
      billboard: {
        image: require('@/assets/logo.png'),
        width: 18,
        height: 24,
      },
    })
  })
},

落地线

此时我们点就飞起来啦，现在需要在点位的下方加入一条落地线

  // cesium 加载点位
addMarker() {
  this.pointEntitiesLine = [];
  const Cesium = this.cesium
  // 清除上一次加载的点位
  this.viewer.entities.removeAll()
  // foreach循环加载点位
  this.pointInfo.forEach((pointObj) => {
    // 循环添加点位引线方法
    const labelEntityLine = this.loadFloatPoint(pointObj, pointObj.longitude * 1, pointObj.latitude * 1, 100);
    ...
    this.pointEntitiesLine.push(labelEntityLine);
  })
},

loadFloatPoint方法

// 加载高度线
loadFloatPoint(pointObj, long, lat, height) {
  const Cesium = this.cesium;
  const lineColor = "#108de7";
  const entityLine = this.viewer.entities.add({
    name: 'line_' + pointObj.pointName,
    code: 'line_' + pointObj.id,
    id: 'line_' + pointObj.id,
    // 经度维度必须是数字 
    // position: Cesium.Cartesian3.fromDegrees(120.42602, 31.92423),
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        long, lat, 0,
        long, lat, height,
      ]),
      width: 1,
      // 材质设置
      // material: Cesium.Color.DODGERBLUE,
      material: Cesium.Color.fromCssColorString(lineColor),
      // material : new Cesium.PolylineGlowMaterialProperty({ //发光线
      //     glowPower : 0.1,
      //     color : Cesium.Color.DODGERBLUE
      // })
    },
  });
  return entityLine;
},