cesium 模拟连线通信

此代码示例展示了如何使用Cesium库创建一个三维地球场景,并模拟卫星轨迹和飞机飞行。通过定义时间间隔和位置数据,计算并绘制了卫星和飞机在不同时间点的位置。同时,利用Cesium的Timeline组件控制时间轴,并通过调整时间范围和速度来动态展示运动轨迹。此外,还实现了根据卫星和飞机位置实时绘制连接线的功能。
var pointsInfo =
      {
        "s_id": "40905",
        "start": 1604937600000,
        "end": 1604938600000,
        "start_for_timeline": 1604937600000,
        "end_for_timeline": 1604938600000,
        "on_circle_milliseconds": 1000,
        "sat_locations_array": [{
          "a": 16.644356,
          "b": 16.906161,
          "c": 0
          //"c": 531947
        }, {
          "a": 5.961894,
          "b": 54.23244,
          "c": 0
          //"c": 540576
        }, {
          "a": -95.029766,
          "b": 82.126711,
          "c": 0
          //"c": 543170
        }]
      };


    var viewer = new Cesium.Viewer("cesiumContainer", {

      imageryProvider : new Cesium.UrlTemplateImageryProvider({
        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      })
    });
   
    //去掉版权信息
    viewer._cesiumWidget._creditContainer.style.display = "none";

    var entity_sat = viewer.entities.add({
        // 将实体availability设置为与模拟时间相同的时间间隔。
        id:'111',
        position: Cesium.Cartesian3.fromDegrees(16.644356,16.906161,531947),//计算实体位置属性
        //基于位置移动自动计算方向.
        //orientation: new Cesium.VelocityOrientationProperty(entity1p),
        //加载飞机模型
         model: {
            //uri: 'weixin.gltf',
            uri: '/car/25car2.gltf',

            minimumPixelSize: 30
        },
        //路径
        path: {
            resolution: 1,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.PINK
            }),
            width: 5
        }
    });

    var s_id = pointsInfo.s_id;
    var situation_time_start = pointsInfo.start;
    var situation_time_end = pointsInfo.end;

    // 下边两个时间用于控制时间轴日期显示
    var situation_time_start_for_timeline = pointsInfo.start_for_timeline;
    var situation_time_end_for_timeline = pointsInfo.end_for_timeline;

    // 卫星原始位置、卫星位置加上经度偏移
    var sat_locations_array = pointsInfo.sat_locations_array;

    var on_circle_milliseconds = pointsInfo.on_circle_milliseconds;

    // 起始时间(卫星可见)
    var start = Cesium.JulianDate.fromDate(new Date(situation_time_start));
    var stop = Cesium.JulianDate.fromDate(new Date(situation_time_end));

    entity_sat.time_orbit_start = start.clone();
    entity_sat.time_orbit_stop = stop.clone();

    // 起始时间(时间轴)
    var start_for_timeline = Cesium.JulianDate.fromDate(new Date(situation_time_start_for_timeline));
    var stop_for_timeline = Cesium.JulianDate.fromDate(new Date(situation_time_end_for_timeline));

    // 设置始时钟始时间
    viewer.clock.startTime = start_for_timeline.clone();

    // 设置始终停止时间
    view
### Cesium 中实现打点和连线功能 以下是基于 Cesium 的示例代码,用于实现在三维地球场景中的打点以及连接这些点形成线的功能。 #### 打点功能 在 Cesium 中可以通过 `viewer.entities.add` 方法来添加实体点。以下是一个简单的例子: ```javascript // 初始化 Cesium 场景 const viewer = new Cesium.Viewer('cesiumContainer'); // 添加一个点 viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9082), // 经纬度坐标 (北京) point: { pixelSize: 10, // 点大小 color: Cesium.Color.RED, // 颜色 outlineColor: Cesium.Color.WHITE, outlineWidth: 2 } }); // 刷新以显示更改 viewer.zoomTo(viewer.entities); ``` 此部分实现了在一个指定位置上放置一个红色的点[^1]。 --- #### 连接多个点形成线 为了绘制一条或多条线,可以使用 `Polyline` 来定义路径。下面的例子展示了如何将两个或更多点连成一线: ```javascript // 定义一组经纬高度数据表示点的位置 const positions = Cesium.Cartesian3.fromDegreesArrayHeights([ 116.4074, 39.9082, 0, // 起点 (经度, 纬度, 海拔) 117.2088, 39.1245, 0 // 终点 ]); // 创建一个多段线对象 viewer.entities.add({ polyline: { positions: positions, // 设置点位数组 width: 5, // 线宽 material: Cesium.Color.BLUE.withAlpha(0.7) // 线的颜色及透明度 } }); // 刷新视图以便查看效果 viewer.zoomTo(viewer.entities); ``` 上述代码片段中,通过设置 `polyline.positions` 属性指定了两点之间的路径,并设置了线条宽度与颜色属性。 --- #### 动态实时绘线 如果希望支持用户交互式的动态绘线,则可引入自定义工具类如 `PolylineDrawer` 或者手动监听鼠标事件完成操作。这里提供一种简单的方式作为参考: ```javascript let drawingPositions = []; let isDrawing = false; function onMouseClick(event) { if (!isDrawing) return; const cartesian = viewer.camera.pickEllipsoid( event.position, viewer.scene.globe.ellipsoid ); if (cartesian) { drawingPositions.push(cartesian); // 更新多段线 updatePolyline(drawingPositions); } } function startDrawing() { isDrawing = true; viewer.screenSpaceEventHandler.setInputAction(onMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK); } function stopDrawing() { isDrawing = false; viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); } function updatePolyline(positions) { let entity = viewer.entities.getById('dynamicLine'); if (!entity) { entity = viewer.entities.add({ id: 'dynamicLine', polyline: { positions: [], clampToGround: true, width: 3, material: Cesium.Color.GREEN } }); } entity.polyline.positions = new Cesium.CallbackProperty(() => positions, false); } ``` 在此脚本里,当启动绘图模式 (`startDrawing`) 后,每次点击地图都会记录下当前选定点并将它们加入到已有的线路当中去;结束时调用 `stopDrawing()` 即停止捕捉新节点。 --- ### 注意事项 - 上述方法适用于基本需求下的静态或者半自动化的标注工作流。 - 对于更复杂的应用场景比如编辑现有轨迹、调整样式参数等可能还需要额外扩展逻辑处理机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值