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地址，获取该工程的所有源码。
