cesium在二维地图中拖拽移动实体

最新推荐文章于 2026-03-27 04:46:19 发布

原创

最新推荐文章于 2026-03-27 04:46:19 发布 · 3.2k 阅读

收录于

本文介绍如何使用 Cesium JavaScript 库实现实体的动态位置更新和交互功能，包括通过后台数据实时更新实体位置，实现拖动实体并实时更新其位置坐标，以及在 2D 和 Columbus 视图模式下控制相机锁定与解锁。

var viewer = new Cesium.Viewer('cesiumContainer',{
     sceneMode: 2,
});
viewer.entities.add({
     id:'id',
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard :{
        image : '../images/Cesium_Logo_overlay.png'
    }
});viewer.entities.add({
     id:'id2',
    position : Cesium.Cartesian3.fromDegrees(-50.59777, 40.03883),
    billboard :{
        image : '../images/Cesium_Logo_overlay.png'
    }
});
var  pointDraged = null;
var  leftDownFlag=false;
viewer.screenSpaceEventHandler.setInputAction(leftDownAction, Cesium.ScreenSpaceEventType.LEFT_DOWN);
viewer.screenSpaceEventHandler.setInputAction(leftUpAction, Cesium.ScreenSpaceEventType.LEFT_UP);
viewer.screenSpaceEventHandler.setInputAction(mouseMoveAction, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
function leftDownAction(e) {
    console.log("左键按下");
    var  windowPosition = e.position;
    pointDraged = viewer.scene.pick(windowPosition);//选取当前的entity
    leftDow