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);
代码说明:
- 初始化Cesium Viewer:创建一个Cesium Viewer实例。
- 设置鼠标事件处理器:使用
ScreenSpaceEventHandler处理鼠标事件。 - 左键点击事件:当用户左键点击时,获取点击位置的经纬度,并创建一个圆的Entity。
- 鼠标移动事件:当用户移动鼠标时,计算圆的半径并更新圆的大小。
- 右键点击事件:当用户右键点击时,停止绘制圆并清除当前的圆Entity。
这样,用户就可以通过鼠标在Cesium地球上绘制圆了。