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

最新推荐文章于 2025-06-12 17:00:12 发布

李卓书

最新推荐文章于 2025-06-12 17:00:12 发布

阅读量7.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： Cesium webgl

本文链接：https://blog.youkuaiyun.com/wangbiao9292/article/details/107079684

Cesium 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在Cesium中实现动态线绘制的方法，包括解决动态线闪烁问题和纹理贴图效果，适用于墙体绘制等场景。通过具体代码示例，展示了如何响应鼠标点击和移动事件，实现连续线绘制并保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前因后果

最近项目中,需要绘制墙体,测试了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);