(精品)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做的还是不够好,所以需要我们自己通过业务逻辑去组织