cesium FlyLine飞行漫游路线

mars3d.FlyLine是实体类，提供飞行漫游路线控制。

使用示例在后面

一、需求：拿取请求的坐标数据集展示车辆或人员轨迹

1.生成轨迹数据

// 创建生成轨迹数据
function createFlyData (points, modelOptions, loop = true, name = '', speed = 10) {
  const trackPoints = []
  for (let i = 0; i < points.length; i++) {
    // 先将所有坐标转成笛卡尔坐标
    let worldPos = convertWorldPos(
      {
        longitude: Number(points[i].longitude),
        latitude: Number(points[i].latitude),
      }
    )

    // 将笛卡尔坐标转成经纬度
    let cartographic = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(worldPos)
    let lat = mars3d.Cesium.Math.toDegrees(cartographic.latitude)
    let lng = mars3d.Cesium.Math.toDegrees(cartographic.longitude)

    Object.assign(points[i], { x: lng, y: lat })
    trackPoints.push(
      {
        lng: points[i].x,
        lat: points[i].y,
        alt: Number(points[i].layer) > 1 ? (Number(points[i].layer) - 1) * 8 : null,
        datatime: points[i].datatime
      }
    )
  }
  return {
    name: name,
    clockLoop: loop,
    camera: {
      type: '',
      heading: 0,
      pitch: -90,
      roll: 0,
      distance: 500
    },
    clampToGround: true,
    timeField: 'datatime', // 传入时间字段名称
    points: trackPoints,
    speed: speed,
    showGroundHeight: true,
    model: {
      show: true,
      uri: window.document.location.origin + modelOptions.url,
      scale: modelOptions.scale,
      color: '#ffff00',
      minimumPixelSize: 20,
    },
    label: {
      show: false,
      color: '#ffffff',
      font_family: '楷体',
      font_size: 20,
    },
    path: {
      show: true,
      color: '#ffff00',
      opacity: 1,
      width: 3,
      isAll: false
    },
    clockRange: mars3d.Cesium.ClockRange.CLAMPED
  }
}

2.创建飞行轨迹

/**
 * 处理车辆数据·
 * @param {Array} points 轨迹数据
 * @param {String} name 路线名称，无特殊意义
 * @param {Number} speed 飞行速度 ，km/h
 * @param {String} type 标识位区分人员或车辆
 * @return {object} 
*/
function createFlyLine (points, name, speed, type) {
  return new Promise((resolve) => {
    destoryFlyLine()
    let createFlyDataRes = createFlyData(points, modelOptions[type], false, name, speed)
    flyLine = new mars3d.FlyLine(window.viewer, createFlyDataRes)
    startFly(type)
    if (flyLine) {
      resolve('success')
    }
  })
}

3.播放轨迹

// 开始播放轨迹并显示popup
function startFly (type) {
  flyLine.start()
  // 设置视角模式
  updateCameraSetting('gs')
  // 显示popup
  flyLine.popup = {
    anchor: [0, -20], // 左右、上下的偏移像素值
    timeRender: true, // 实时更新html
    html: function () {
      const params = flyLine.timeinfo
      if (!params) return '即将开始播放轨迹'
      let namelabel = type=='car' ? '车牌号' : '姓名'
      const html = `<div style="width: 200px">
                    ${namelabel}：${flyLine.name} <br/>
                      总距离：${flyLine.alllen.toFixed(2)}米 <br/>
                      总时间：${convertSecondsToTime(flyLine.alltimes / window.viewer.clock.multiplier)} <br/>
                      剩余时间：${convertSecondsToTime((flyLine.alltimes - params.time) / window.viewer.clock.multiplier)}
                  </div>`
      return html
    },
  }
  window.viewer.mars.popup.show(flyLine, flyLine.property)
}

4.销毁轨迹线及数据

// 销毁轨迹线及数据
function destoryFlyLine () {
  if (flyLine) {
    window.viewer.mars.popup.close()
    flyLine.stop()
    flyLine.destroy()
    flyLine = null
  }
}

5.改变漫游视角

/**
 * 改变漫游视角
 * @param {String} cameraType 漫游视角类型 自由视角: '', 跟随视角: 'gs', 第一视角: 'dy', 上帝视角: 'sd',
 * @return {object} 
*/
function updateCameraSetting (cameraType) {
  flyLine.updateConfig({
    camera: {
      type: cameraType
    }
  });
}

二、使用示例

//flydata数据值可以从“基础项目” 的“飞行漫游”功能界面操作后保存JSON
var flydata = {
    "id": "1",
    "name": "城市飞行",
    "points": [
        [117.245989, 31.852285, 100],
        [117.246347, 31.834418, 300],
        [117.246703, 31.816635, 500]
    ],
    "speed": 100,
    "camera": { "type": "gs", "followedX": 50, "followedZ": 10 },
    "model": {
        "show": true,
        "uri": "http://data.marsgis.cn/gltf/mars/zhanji.glb",
        "scale": 0.01,
        "minimumPixelSize": 100
    },
    "path": { "show": true, "color": "#ffff00", "opacity": 0.5, "width": 1,"isAll":false },
    "interpolation": false,  //setInterpolationOptions插值 
    "shadow": { "show": true, "type": "wall" }
};
flyLine = new mars3d.FlyLine(viewer, flydata);
flyLine.start();

三、flydata 的option参数

四、实例flyline的属性

五、实例flyline的方法