cesium 解决带高度的polygon 材质不能透明的问题

最新推荐文章于 2024-08-22 10:44:53 发布

AllBlue

最新推荐文章于 2024-08-22 10:44:53 发布

阅读量788

点赞数 12

分类专栏： cesium GIS 文章标签： cesium

本文链接：https://blog.csdn.net/allbluefm/article/details/137827199

版权

cesium 同时被 2 个专栏收录

58 篇文章 2 订阅

订阅专栏

GIS

56 篇文章 2 订阅

订阅专栏

文章讲述了在Cesium中创建带高度的polygon时，如何使用带有透明度的图片作为材质，并指出需要设置material的color属性以实现透明效果。透明度依赖于color的RGBA值，RGB需为白色，且透明度a小于1。

摘要由CSDN通过智能技术生成

问题描述：创建一个带高度的polygon，用一个带透明度的图片做材质，画出来的多边形没有透明效果，图片的透明通道没有用上。

一、创建不带高度polygon

不带高度的polygon，使用带透明度的图片是有效果的，但是不带高度的话，polygon是自动贴模型的，如果在polygon的上面还有模型，那么这个多边形也会贴到上面的模型上去。

let coors = [
                113.296373, 38.189969,
                113.29641, 38.189979,
                113.296289, 38.190231,
                113.296252, 38.190222,                
            ]
            viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(coors),
                    material: new Cesium.ImageMaterialProperty({
                        image: './image/fence.png'
                    })
                },
            });

二、创建带高度的polygon

let coors = [
                113.296373, 38.189969,
                113.29641, 38.189979,
                113.296289, 38.190231,
                113.296252, 38.190222,                
            ]
            viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(coors),
                    material: new Cesium.ImageMaterialProperty({
                        image: './image/fence.png'
                    }),
                    height: 1
                },
            });

三、创建带高度的polygon+设置material的color：即可解决此问题

let coors = [
                113.296373, 38.189969,
                113.29641, 38.189979,
                113.296289, 38.190231,
                113.296252, 38.190222,                
            ]
            viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(coors),
                    material: new Cesium.ImageMaterialProperty({
                        image: './image/fence.png'，
                        color: Cesium.Color.fromCssColorString('rgba(255, 255, 255,0.6)')
                    }),
                    height: 1
                },
            });

1、如果不想改变图片的颜色，那么color的rgb必须是(255, 255, 255)

2、color的透明度a必须小于1，原图片的透明效果才能看到