cesium绘制路线,实现三维漫游

原创

已于 2024-09-26 14:40:14 修改 · 4.3k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-04-03 14:55:36 首次发布

该代码示例展示了如何在Cesium三维地球中通过鼠标点击添加点和线，构建折线，并计算折线中心点。当右键结束绘制时，判断绘制方向。之后，实现点击飞行功能，包括设置飞行时间和动态调整相机视角。此外，还包含了计算两点间方位角的辅助函数。

1.鼠标点击添加点和线

handler.setInputAction(function (event) {
   
   
        //返回地球表面上的点坐标
        const earthPosition = positionUtil.cartesian2ToCartesian3(event.position)
        if (Cesium.defined(earthPosition)) {
   
   
            const ellipsoid = viewer.scene.globe.ellipsoid;
            const cartographic = ellipsoid.cartesianToCartographic(earthPosition);
            const lon = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const alt = cartographic.height + 20 // 高度加20
            AddPoint({
   
   
                lon,
                lat,
                alt,
                color: Cesium.Color.YELLOW
            }, viewer);
            positions.push(Cesium.Cartesian3.fromDegrees(lon, lat, alt))
            positons2.push({
   
   x:lon,y:lat,z:alt})
            if (positions.length >=2) {
   
   
              if (!polyline)
                polyline = AddPolyline(viewer)
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 添加点
const AddPoint = (params, viewer) => {
   
   
  const entity:any = new Cesium.Entity({
   
   
      id:`${
     
     params.lon}点`,
      name: '点',
      show: true,
      position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
      point: new Cesium.PointGraphics({
   
   
          show: true, //是否展示
          pixelSize: 10, //点大小
          color: params.color
      })
  });
  //收集Id
  viewer.entities.add(entity);
  return entity;
}
 // 添加线
 const AddPolyline = (viewer) => {
   
   
  const entity = new Cesium.Entity({
   
   
      id:`${
     
     new Date().getTime()}线`,
      name: '线',
      polyline: new Cesium.PolylineGraphics({
   
   
          show: true

最低0.47元/天解锁文章