【cesium】 FlyLine飞行漫游路线

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参数

Option参数	参数类型	默认值	说明
id	String	0	标识路线唯一值，无特殊意义
name	String		路线名称，无特殊意义
points	[[x, y, z],[x, y, z]…]		路线坐标数组，按坐标路线进行漫游
speed	Number/Array		飞行速度 ，km/h
camera	Object	·{ "type": "gs", "followedX": 50, "followedZ": 10 }·	对漫游时空中飞行时的相机视角进行设置，可以设置跟随视角、锁定第一视角等效果
shadow	Object	·{ "show": false, "type": "wall", "color": "#00ff00", "outline": false, "opacity": 0.3 }·	对漫游时空中飞行时的对地投影显示效果进行配置，支持墙和圆锥
interpolation	boolean	false	是否对路线进行setInterpolationOptions插值
interpolationDegree	Number	2	对路线进行插值时的interpolationDegree参数设置
clockLoop	boolean	false	是否结束后继续循环漫游路线
showGroundHeight	boolean	false	是否在label中显示离地高度
model	Object	·{ "show": false, "scale": 1, "minimumPixelSize": 50 }·	对漫游时显示的gltf模型进行配置，支持Draw中的所有可配置属性
label	Object	·{ "show": false, "color": "#ffffff", "font_family": "楷体", "font_size": 20 }·	对漫游时显示的文字注记进行配置，支持Draw中的所有可配置属性
path	Object	·{ "show": false, "lineType": "solid", "color": "#3388ff", "opacity": 0.5, "width": 1 }·	对漫游时显示的轨迹路线进行配置，支持Draw中的所有可配置属性

四、实例flyline的属性

属性名	类型	说明
popup		设置或获取漫游的模型关联的popup弹窗配置
info	objcet 只读	获取实时的漫游点信息，包含：已飞行时间time，已飞行距离len，所在坐标x、y、z
position	Cartesian3 只读	当前实时坐标位置
hdr	HeadingPitchRoll	获取当前实时hdr方向信息
orientation	Quaternion	获取当前实时orientation方向信息
matrix	Matrix4	获取当前实时矩阵信息

五、实例flyline的方法

方法名	返回值	说明
start(function onEnd )	void	开始漫游
pause()	void	暂停漫游
proceed()	void	继续漫游
stop()	void	停止漫游
centerAt()	void	相机视角定位至路线矩形范围内
clampToGround(function onEnd,Object opts? )	void	贴地漫游时，计算并生成贴地路线，opts控制参数：has3dtiles是否贴模型，splitNum插值次数，//贴地时，异步计算完成后开始flyLine.clampToGround(function () { flyLine.start();}, { has3dtiles: true }); //has3dtiles为true时贴模型表面
updateStyle(FlyLine Options params)	void	更新参数，支持Options所有值
updateAngle( boolean isAuto, object opts)	void	更新角度（opts支持heading, pitch, roll），isAuto时基于移动位置自动计算方位
toGeoJSON()	Object	生成json格式规范的路线数据，与传入Flyline时的options是一致的。
toCZML()	Object	生成CZML格式规范的路线数据。
destroy()	void	释放所有资源