【Cesium学习（八）】Cesium设置材质—后续

Cesium折线材质进阶

最新推荐文章于 2025-07-30 09:36:37 发布

原创最新推荐文章于 2025-07-30 09:36:37 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #材质 #webgl #数据可视化 #前端

Cesium 专栏收录该内容

14 篇文章

订阅专栏

【Cesium学习（八）】Cesium设置材质—后续

在前面一篇文章中学习了为Cesium设置各种材质【Cesium学习（八）】Cesium设置材质
接下来将会对材质进行后续补充。
上文讲解到给Cesium设置材质，有一下几个类型：
ColorMaterialProperty
CompositeMaterialProperty
GridMaterialProperty
ImageMaterialProperty
StripeMaterialProperty
PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty
接着我们将继续学习后面几个类型。
后面材质需要用到PolyLine，我们先来添加一个PolyLine

var entity_polyline = viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-77, 35, -77.1, 35]),
        width: 5,
        material: Cesium.Color.RED,
    },
});
viewer.zoomTo(entity_polyline); // 定位到创建的实体

在这里插入图片描述

1、PolylineGlowMaterialProperty – 折线发光材质
在这里插入图片描述
这个材质的几个属性：
color :获取或设置指定行的 Color 的属性。
glowPower :一个数字属性，用于指定发光强度，以总线宽的百分比表示。
taperPower:一个数字属性，指定渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果。

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower: 0.5,
    color: Cesium.Color.GREEN,
});

在这里插入图片描述
2、PolylineGlowMaterialProperty --折线轮廓

有以下几个属性：
color :指定折线的颜色。
outlineColor :获取或设置指定轮廓的 Color 的属性。
outlineWidth :获取或设置数字属性，指定轮廓的宽度。

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color: Cesium.Color.RED,
    outlineWidth: 3,
    outlineColor: Cesium.Color.BLACK,
});