(精品)cesium-绘制动态线(解决闪烁)的进击研究教程

前因后果

最近项目中,需要绘制墙体,测试了cesium提供的诸多entity,发现都死在了贴纹理阶段;最后妥协于使用wall实体进行墙体的绘制.期间解决了纹理贴图效果,高程遮挡,动态绘制线路闪烁等问题,鉴于动态线绘制闪烁比较典型(相当于解决了点,线,面,盒子…等所有实体的动态改变问题及纹理贴图问题),这里记录一下,供大家参考.

效果图先行

1 动态线带闪烁效果
在这里插入图片描述2 连续线绘制带闪烁
在这里插入图片描述3 带纹理的墙
在这里插入图片描述

动态线绘制

思路

鼠标点击时,生成线实体–>鼠标移动式,控制线坐标

代码及效果图
var line = undefined; //全局线对象
        var linearr = []; //线的坐标存储
        //鼠标点击事件监听
        handler.setInputAction(function (event) {
            //获取世界坐标点    
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //如果世界坐标点存在
            if (cartesian) {
                
                //添加一个线对象 
                if (!line) {
                    linearr.push(cartesian)
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //鼠标移动事件监听
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              //考虑在鼠标移动的一瞬间,linearr应该增加一个坐标点,当再次移动时,该坐标点应该更换
              linearr[1]=cartesian;               
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

在这里插入图片描述

动态线连续绘制

思路

我们已经完成了线跟随鼠标移动时的效果,接下来,我们要进行推论
推论1:点击鼠标时,能够线路绘制
推论2:线路跟随鼠标进行连续创建

代码及效果图

针对上述两种条件推演,贴上如下代码
(1) 首先是推论2
代码;

 var line = undefined; //全局线对象
        var linearr = []; //线的坐标存储
        //鼠标点击事件监听
        handler.setInputAction(function (event) {
            //获取世界坐标点    
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //如果世界坐标点存在
            if (cartesian) {
                
                //添加一个线对象 
                if (!line) {
                    linearr.push(cartesian)
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //鼠标移动事件监听
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              //考虑在鼠标移动的一瞬间,linearr应该增加一个坐标点,当再次移动时,该坐标点应该更换
              linearr[linearr.length]=cartesian;               
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

在这里插入图片描述(2) 推论1验证
代码:

var line = undefined; //全局线对象
        var linearr = []; //线的坐标存储
        //鼠标点击事件监听
        handler.setInputAction(function (event) {
            //获取世界坐标点    
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //如果世界坐标点存在
            if (cartesian) {
                linearr.push(cartesian)
                //添加一个线对象 
                if (!line) {                   
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //鼠标移动事件监听
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              debugger;
              //考虑在鼠标移动的一瞬间,linearr应该增加一个坐标点,当再次移动时,该坐标点应该更换
              linearr[linearr.length-1]=cartesian;      
              console.log(linearr) ;        
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

在这里插入图片描述

结论

贴图部分目前cesium做的还是不够好,所以需要我们自己通过业务逻辑去组织

抱歉,作为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对象中,以便可以动态绘制线
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

李卓书

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

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

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

打赏作者

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

抵扣说明:

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

余额充值