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

最新推荐文章于 2024-08-23 10:51:27 发布

前端杨小白

最新推荐文章于 2024-08-23 10:51:27 发布

阅读量3k

点赞数 3

分类专栏： Cesium

本文链接：https://blog.csdn.net/yangwqi/article/details/104277964

版权

Cesium 专栏收录该内容

21 篇文章 20 订阅

订阅专栏

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
    leftDownFlag = true;
    if (pointDraged) {
      // 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
      viewer.scene.screenSpaceCameraController.enableTranslate = false;//锁定相机
    }
}
function leftUpAction(e) {
    console.log("左键抬起");
    leftDownFlag = false;
    pointDraged=null;
    viewer.scene.screenSpaceCameraController.enableTranslate = true;//解锁相机
 }
function mouseMoveAction(e) {
  if (leftDownFlag === true && pointDraged) {
    console.log("鼠标移动");
    var cartesian = viewer.scene.camera.pickEllipsoid(e.endPosition, viewer.scene.globe.ellipsoid); 
    console.log(cartesian,pointDraged.id.position);
    if (cartesian) {
        pointDraged.id.position = new Cesium.CallbackProperty(function () {
            return cartesian;
        }, false);

    }
  }
}

初始状态