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,原图片的透明效果才能看到

相关推荐
duansamve5 天前
React 18+TS中使用Cesium 1.95
react.js·typescript·cesium
DSLMing8 天前
Cesium 内置变量 czm_ellipsoidInverseRadii
cesium
Mintopia9 天前
Cesium-kit 又发新玩意儿了:CameraControl 相机控制组件全解析
前端·three.js·cesium
Mintopia11 天前
🌍 cesium-kit —— 快速实现动态标点与交互的 Cesium 工具库
前端·three.js·cesium
Mintopia12 天前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia13 天前
🚀 cesium-kit:让 Cesium 开发像写 UI 组件一样简单
前端·前端框架·cesium
YAY_tyy15 天前
【Cesium 开发实战教程】第六篇:三维模型高级交互:点击查询、材质修改与动画控制
前端·javascript·3d·教程·cesium
不浪brown1 个月前
全面开发!可同时支持“倾斜模型”以及“地形”的填挖方(土方)分析工具
cesium
臣臣臣臣臣什么臣1 个月前
解决 Cesium 中 WFS 图层变形问题:从现象到根源的完整排查之路
cesium
咔咔一顿操作1 个月前
第七章 Cesium 3D 粒子烟花效果案例解析:从原理到完整代码
人工智能·3d·信息可视化·cesium