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