根据鼠标在cesium 地球上画圆的需求

365 阅读1分钟
var viewer = new Cesium.Viewer('cesiumContainer');

var drawing = false;
var circleEntity = null;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(click) {
    if (!drawing) {
        drawing = true;
        var position = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
        if (Cesium.defined(position)) {
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);

            circleEntity = viewer.entities.add({
                name : 'Circle',
                position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
                ellipse : {
                    semiMajorAxis : 1000.0, // 半长轴,单位为米
                    semiMinorAxis : 1000.0, // 半短轴,单位为米
                    material : Cesium.Color.BLUE.withAlpha(0.5)
                }
            });
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function(movement) {
    if (drawing && circleEntity) {
        var position = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        if (Cesium.defined(position)) {
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);

            var center = Cesium.Cartesian3.fromDegrees(longitude, latitude);
            var distance = Cesium.Cartesian3.distance(center, circleEntity.position.getValue(Cesium.JulianDate.now()));

            circleEntity.ellipse.semiMajorAxis = distance;
            circleEntity.ellipse.semiMinorAxis = distance;
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(click) {
    if (drawing) {
        drawing = false;
        circleEntity = null;
    }
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

代码说明:

  1. 初始化Cesium Viewer:创建一个Cesium Viewer实例。
  2. 设置鼠标事件处理器:使用 ScreenSpaceEventHandler 处理鼠标事件。
  3. 左键点击事件:当用户左键点击时,获取点击位置的经纬度,并创建一个圆的Entity。
  4. 鼠标移动事件:当用户移动鼠标时,计算圆的半径并更新圆的大小。
  5. 右键点击事件:当用户右键点击时,停止绘制圆并清除当前的圆Entity。

这样,用户就可以通过鼠标在Cesium地球上绘制圆了。