cesium学习之路(八)在地图中绘制矩形与立方体

1.矩形

 const entities = this.viewer.entities; //将enities方法保存到变量中
      //矩形
      entities.add({
        position: Cesium.Cartesian3.fromDegrees(104.09, 30.66), //矩形的位置
        box: {
          dimensions: new Cesium.Cartesian3(300, 300, 0), //长宽高
          fill: true, //是否显示填充
          material: Cesium.Color.fromCssColorString(`rgba(255,0,0,1)`), //立方体的颜色,
          outline: true, //是否显示轮廓
          outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //立方体轮廓线的颜色,
          outlineWidth: 1, //轮廓的跨度
        },
      }); 

2.立方体

     entities.add({
        position: Cesium.Cartesian3.fromDegrees(104.07, 30.66), //立方体的位置
        box: {
          dimensions: new Cesium.Cartesian3(300, 300, 600), //长宽高
          fill: true, //是否显示填充
          material: Cesium.Color.fromCssColorString(`rgba(255,0,0,1)`), //立方体的颜色,
          outline: false, //是否显示轮廓
          outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //立方体轮廓线的颜色,
          outlineWidth: 1, //轮廓的跨度
        },
      });

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cesium通过鼠标点击绘制矩形,可以按照以下步骤进行: 1. 创建一个矩形实体对象 ```javascript var rectangleEntity = viewer.entities.add({ rectangle : { coordinates : Cesium.Rectangle.fromDegrees(0.0, 0.0, 0.0, 0.0), material : Cesium.Color.RED.withAlpha(0.5) } }); ``` 2. 添加鼠标点击事件监听器 ```javascript var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(function(click) { // 获取点击位置的经纬度坐标 var position = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid); if (position) { // 设置矩形的起始位置 rectangleEntity.rectangle.coordinates = Cesium.Rectangle.fromDegrees(position.longitude, position.latitude, position.longitude, position.latitude); // 添加鼠标移动事件监听器 handler.setInputAction(function(movement) { // 获取鼠标移动后的经纬度坐标 var endPosition = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid); if (endPosition) { // 更新矩形的位置和大小 rectangleEntity.rectangle.coordinates = Cesium.Rectangle.fromDegrees(position.longitude, position.latitude, endPosition.longitude, endPosition.latitude); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ``` 以上代码,通过`viewer.camera.pickEllipsoid()`方法获取鼠标点击或移动后的经纬度坐标,然后更新矩形实体的位置和大小。其,`Cesium.ScreenSpaceEventHandler()`方法用于创建一个屏幕空间事件处理器,可以监听鼠标点击和移动事件。`Cesium.ScreenSpaceEventType()`枚举类型用于指定事件类型,例如`LEFT_CLICK`表示鼠标左键点击事件,`MOUSE_MOVE`表示鼠标移动事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_63701303

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值