cesium 实现动态标绘_Cesium学习系列 工具篇36挖地形、态势标绘、可视域

之前文中视频连接失效，再次编辑！

前段时间和小伙伴交流，大家对ceisum挖地形、态势标绘和可视域等等功能很感兴趣。这两三周利用不多的周末时间大概了解下，做了下面几个简单的效果：

1挖地形

2态势标绘

3可视域分析(基于dem)

1挖地形

挖地形在前面文章中介绍过：Cesium学习系列 –工具篇07–GroundClipping挖地形和Cesium学习系列 –工具篇06–GroundPush挖地形.其中Cesium学习系列 –工具篇07–GroundClipping挖地形是使用cesium自带的功能，Cesium学习系列 –工具篇06–GroundPush挖地形是github上一个开源的项目，不过新版本ceisum不能使用，而且项目也没更新。

我们仿照getClippingFunction.js写一个挖圆形区域：

  function clippingFunctionUnion() {

  varfunctionString = 'void circleClip(vec4 fragCoord, vec3 clipCenterWC, float clipRadius)\n' +

  '{\n' +

       '    vec4 clipCenterWCTem =vec4(clipCenterWC.x,clipCenterWC.y,clipCenterWC.z,1.0);\n' +

       '    vec4 positionEC = czm_windowToEyeCoordinates(fragCoord);\n'+

       '    vec4 clipCenterEC = czm_view *clipCenterWCTem;\n' +

       '    float dis2Center =distance(positionEC,clipCenterEC);\n' +

       '    if (dis2Center < clipRadius) {\n' +

       '        discard;\n' +

       '    }\n' +

    '}\n';

   return functionString;

}

这里同时需要修改cesium的其它相关源码，主要是GlobeSurfaceShaderSet.js、GlobeSurfaceTileProvider.js、GlobeFS.j s等，随后我会把编译后cesium版本传至github上。

使用代码如下，改变globe.clippingCircle即可动态更新区域：

var position1 =Cesium.Cartesian3.fromDegrees(116.05537, 30.10932, 100.0);

var globe =viewer.scene.globe;

var clipCirlce =new Cesium.ClippingCircle(position1, 100.0);

globe.clippingCircle= clipCirlce;

2态势标绘

态势标绘没什么难的，主要是根据控制点求拟合后的曲线，这里算法很多，例如样条曲线、贝塞尔曲线等等。

3可视域分析(基于dem)

可视域分析主要有两个思路：基于dem插值、利用shadowmap技术，这里我们采用简单的dem插值算法，这样在编程上容易实现，无需深入了解webgl底层渲染即可实现，shadowmap方式还没了解ceisum的接口，后续再做。

大家有任何的问题都可以在公众号直接留言，我会在第一时间回复哦。

最后啰嗦一句：关注公众号，回复 git地址，获取该工程的所有源码。