[cesium] 基于Cesium的动态泛光效果示例

抽空将之前的功能单独抽出来写成一个模块，方便单独调用，配合单个模块写了一些示例

可以兼容各个基于cesium底层库的三方框架，引入即可。

效果

模型光源模拟 

动态泛光墙

泛光面

城市泛光线

建筑物调整

其他示例

 三维效果和功能

使用

// 在引入的cesiumJS下面引入d3kit插件
<script src="http://zhangticcc.gitee.io/d3kit/d3kit.js"></script>
<script>
    
 // 初始化 Cesium.Viewer
 let viewer = new Cesium.Viewer("d3map");
 // 初始化 d3kit
 let d3kit = new Cesium.D3Kit(viewer)
 // 泛光场景配置 建筑物材质发光
 d3kit.setDefSceneConfig()
 d3kit.setBloomLightScene()

 // 自定义纹理材质
 let MaterialLineImage = [
    'data/images/Textures/ArrowOpacity.png',
    'data/images/Textures/ArrowTransparent.png',
    'data/images/Textures/DataTransLine.png',
    'data/images/Textures/DotTransparent.png',
    'data/images/Textures/LinkPulse.png',
    'data/images/Textures/meteor_01.png',
    'data/images/Textures/Trail.png',
    'data/images/Textures/Trail1.png',
 ]
 // color
 let colors = [
    new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 1),
    new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 1),
    new Cesium.Color(221 / 255, 221 / 255, 221 / 255, 1)
 ];

 let getCustomMaterialLine = (image, color) => {
    return d3kit.getCustomMaterialLine({
      image: image,
      color: color,
      duration: 2000
    })
 }

// 创建动态线
let startPoint = Cesium.Cartesian3.fromDegrees(104.081701757991, 30.627042558105988)
for (let i = 0, len = 8; i < len; i++) {

    let endPoint = Cesium.Cartesian3.fromDegrees((Math.random() / 100) +         
      104.081701757991, (Math.random() / 100) + 30.627042558105988);

    let positions = d3kit.getLinkedPointList(startPoint, endPoint, 100000, 50);

    let glowingLine = viewer.entities.add({
      polyline: {
        positions: positions,
        width: 5,
        material: getCustomMaterialLine(MaterialLineImage[i], colors[i % 3]),
      }
    });
 }

</script>

开源地址：github

查看在线效果：传送门 

基于cesium拓展效果：传送门2