[cesium] | 自定义材质线插件 | 支持动态生成材质

刺骨的言语ヽ痛彻心扉 2022-12-27 11:02 508阅读 0赞

基于Cesium的材质线插件，引入即可使用，需要的自取。

插件地址：[传送门][Link 1]

在线访问:  [查看地址][Link 2]

### 使用 ###

// 自定义纹理材质
          let MaterialLineImage = [
            './src/line.png',
            './src/line2.png',
            './src/line3.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 new Cesium.CustomMaterialLine({
              image: image,
              color: color,
              duration: 2000
            })
          }
          // 添加实体线
          let startPoint = Cesium.Cartesian3.fromDegrees(104.081701757991, 30.627042558105988)
          let glowingLine = null
          for (let i = 0, len = 8; i < len; i++) {
    
            let endPoint = Cesium.Cartesian3.fromDegrees((Math.random() / 100) +
              104.081701757991, (Math.random() / 100) + 30.627042558105988);
            glowingLine = viewer.entities.add({
              polyline: {
                positions: [startPoint, endPoint],
                width: 5,
                material: getCustomMaterialLine(MaterialLineImage[i % 3], colors[i % 3]),
              }
            });
          }

### 效果 ###

### ![20201210131337623.gif][] ###

[Link 1]: https://github.com/zhangti0708/cesium-materialLine
[Link 2]: http://zhangticcc.gitee.io/cesium-materialline/
[20201210131337623.gif]: /images/20221120/1a384fc747bb4663a258a80824f6d333.png