使用Cesium的 Material （材质）绘制警戒线

60 阅读 0 评论 40 点赞

我是靠谱客的博主曾经皮皮虾，最近开发中收集的这篇文章主要介绍使用Cesium的 Material （材质）绘制警戒线，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

直接上效果图

在这里插入图片描述

直接上关键代码：

由于是sdk中摘出，不能直接运行。关键在于PolylineMaterialAppearance中new Material的配置：


var instance = new GeometryInstance({
    geometry: new GroundPolylineGeometry({
        width:5,
        positions: this.points
    }),
    attributes: {}
});

const materialOpts = {
    fabric:{
        type : 'PolylineDash',
        uniforms:{
            color:{
                red:1,
                green:1,
                blue:0,
                alpha:1
            },
            gapColor:{
                red:1,
                green:1,
                blue:1,
                alpha:1
            },
            dashLength:50
        }
    }
}

this._primitive = this.parent.add(new GroundPolylinePrimitive({
    asynchronous: false,
    geometryInstances: instance,
    appearance :new PolylineMaterialAppearance({
        material:new Material(materialOpts)
    })
    
}));

解析

Cesium的Material类是一个强大的功能。包含各种各样的材质模板，每种材质模板都有特定的配置。我这里使用的是PolylineDash这个类型。所有的配置都在fabric属性中，用子属性type标识材质类型。这是所有支持的材质类型。在这里可以找到每一种材质类型的内部uniforms的配置。关于fabric的官档示例在这里。