Cesium 计算两个经纬度的中心点坐标,并计算出两个点的角度朝向

617 阅读1分钟

最近项目有一个需求

cesium 地球上生成一条线,在线的每两个点之间生成一个中心坐标点,在这个中心坐标点上画一个箭头,箭头的朝向是 每组两个经纬度的 第二个经纬度

  1. 先计算两个经纬度点之间的中心坐标点
/**
 * 计算两个点之间的中心点坐标
 * @param point1 第一个点的坐标[long,lat]
 * @param point2 第二个点的坐标[long,lat]
 * @returns 返回中心点
 */
export function twoToCenter(point1: any, point2: any) {
  
  //坐标转换
  let pointNew1 = Cesium.Cartesian3.fromDegrees(point1[0], point1[1])
  
  let pointNew2 = Cesium.Cartesian3.fromDegrees(point2[0], point2[1])

  //计算两个点的中心坐标
  let centerPoint = Cesium.Cartesian3.lerp(pointNew1, pointNew2, 0.5, new Cesium.Cartesian3())
  
  return  centerPoint
}
  1. 在计算中心坐标点的角度朝向,并生成箭头
let coordItem = [[lng1,lat1],[lng2,lat2]]
//获取两个点之间的中心点坐标
let centerPoint = twoToCenter(coordItem[0],coordItem[1])
//通过 turf 计算两个点的方向向量
let angle = turf.rhumbBearing(coordItem[0],coordItem[1])
//转换成cesium的角度
const angleInRadians = Cesium.Math.toRadians(-angle + 90)

let arrowEntity = viewer.entities.add({
    position: centerPoint,
    billboard: {
        image: image,//箭头图标,也可以是canvas,canvans可以改变样式和颜色
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
    }
})

arrowEntity.billboard.rotation = angleInRadians
viewer.zoomTo(viewer.entities)