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

野性酷女 2023-03-02 10:18 26阅读 0赞

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

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

## 效果 ##

动态泛光墙

![20200727172459165.gif][]![20210520110833193.gif][]

泛光面

![20200727172511127.gif][]

城市泛光线

![20200728103207739.gif][]

![20210709094358549.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

### 其他示例 ###

三维效果和功能![20200728175107789.gif][]

![20200728175118717.gif][]

### 使用 ###

// 在引入的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>

查看在线效果：[传送门 ][Link 1]

[20200727172459165.gif]: https://img-blog.csdnimg.cn/20200727172459165.gif
[20210520110833193.gif]: /images/20230208/d7b98bf8304f48be8085681ed8e55b5f.png
[20200727172511127.gif]: /images/20230208/91f42b5a08bd43eab29c32aa1c3a5ed6.png
[20200728103207739.gif]: /images/20230208/78d67052ca0046b59c8e38e1d36e86e2.png
[20210709094358549.gif]: /images/20230208/96c515647e964a5891c4b6c552fa2461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20230208/70457617767248c3bcf843f120eea7da.png
[20200728175107789.gif]: /images/20230208/ee858d6c3b884513ab61632d1694003f.png
[20200728175118717.gif]: /images/20230208/023f6f598a4447b19f15e0700ac08097.png
[Link 1]: http://zhangticcc.gitee.io/webgis/