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

问题描述:创建一个带高度的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,原图片的透明效果才能看到

相关推荐
undefined&&懒洋洋3 天前
Cesium使用flyToBoundingSphere实现倾斜相机视角观察物体
前端·javascript·cesium·webgis
GIS瞧葩菜6 天前
GeoSever发布图层(保姆姬)
wms·geoserver·cesium
新中地GIS开发老师6 天前
地理信息科学专业想搞GIS开发:学前端还是后端?
前端·javascript·arcgis·前端框架·cesium
qbbmnnnnnn13 天前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理拓展图层顺序调整功能
vue.js·webgl·三维可视化·cesium·vue3.0·webgis·vuedraggable
smiler15 天前
cesium两种方式实现贴地
前端·cesium
按图索迹17 天前
100GB,台湾台东县绿岛倾斜摄影3DTiles数据来了
三维可视化·cesium·倾斜摄影·3dtiles·台湾倾斜摄影
htsitr24 天前
Cesium如果链接着色器的?
cesium·着色器
T0uken1 个月前
【WebGIS】Cesium:Viewer 初始化、地图加载与基础交互
gis·cesium·webgis
qbbmnnnnnn1 个月前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理基础
前端·wmts·cesium·vue3.0·webgis·3dtiles·图层管理
按图索迹1 个月前
台湾高雄三维倾斜摄影模型3DTiles样例数据介绍
人工智能·3d·cesium·倾斜摄影·3dtiles·台湾·3dgis