Cesium实现鼠标绘制图形的思路

一般而言,不管是绘制多边形,还是绘制线,圆等图形,首先我们要考虑绘制它们的前提条件是什么,什么时候开始绘制,什么时候结束绘制,绘制的CesiumAPI是什么等问题的前期思考。

这里我拿鼠标绘制多边形做例子吧(我用js封装了一个实例对象,目前源码没有办法拿给大家,有需要留言,我发给大家)

1.这里我把开始绘制的事件放到鼠标右键菜单中,操作:右击弹出右键菜单,点击绘制多边形

2.鼠标点击绘制的区域,这里要考虑的是,我如何动态收集点击的点,并实时绘制多边型呢,解决办法:

a.定义一个数据,记录点击的点位置信息(可以在cesium鼠标事件中实现)

b.使用CallbackProperty类实现动态绘制多边形的类,使用entities添加polygon中,属性hierarchy可以使用其动态返回点集合,如:

hierarchy: new Cesium.CallbackProperty(() => {
        return new Cesium.PolygonHierarchy(这里为记录的点集合);
      }, false)

c.使用双击左键结束绘制(使用cesium鼠标事件) 

最后,因为绘制多边形,点击时最开始时不会出现多边形的填充形状,这样会给人的体验不是很好,这里我们可以考虑,现定义一个点集合,点击的前两个点使用点的API绘制出两个点的形状,在第三个点的时候就可以删除前两个绘制点,这样我个人感觉这种操作比较友好。

其它的绘制思路是一样的。大家可以动手试一试。

有需要探讨的问题欢迎留言。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
抱歉,作为AI语言模型,我不能提供代码。但我可以给你一些思路和建议。要在cesium中使用鼠标动态绘制曲线,你需要以下步骤: 1. 监听鼠标点击事件,获取鼠标在地球上的位置。 2. 将鼠标点击的位置转换成笛卡尔坐标系。 3. 将笛卡尔坐标系转换成经纬度坐标系。 4. 将经纬度坐标系转换成cesium中的Cartesian3坐标系。 5. 将Cartesian3坐标系坐标添加到cesium的Entity对象中,以便可以动态绘制曲线。 6. 使用cesium的PolylineGraphics对象设置曲线的样式、颜色等属性。 以下是一个示例代码片段,仅供参考: ```javascript var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); var linePositions = []; handler.setInputAction(function (click) { // 获取鼠标点击位置的笛卡尔坐标系 var cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid); if (cartesian) { // 将笛卡尔坐标系转换成经纬度坐标系 var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 将经纬度坐标系转换成cesium的Cartesian3坐标系 var position = Cesium.Cartesian3.fromDegrees(cartographic.longitude, cartographic.latitude, cartographic.height); linePositions.push(position); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); var entity = viewer.entities.add({ polyline: { positions: linePositions, width: 5, material: Cesium.Color.RED } }); ``` 这段代码监听了鼠标左键点击事件,获取鼠标点击位置的坐标系,并将其添加到linePositions数组中。然后使用这个数组创建了一个PolylineGraphics对象,设置了线条的颜色和宽度,并将其添加到了cesium的Entity对象中,以便可以动态绘制曲线。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

A 壹零贰肆

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

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

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

打赏作者

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

抵扣说明:

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

余额充值