最近项目有一个需求
cesium 地球上生成一条线,在线的每两个点之间生成一个中心坐标点,在这个中心坐标点上画一个箭头,箭头的朝向是 每组两个经纬度的 第二个经纬度
- 先计算两个经纬度点之间的中心坐标点
/**
* 计算两个点之间的中心点坐标
* @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
}
- 在计算中心坐标点的角度朝向,并生成箭头
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)