ArcGIS API for JavaScript 4.X在SceneView（三维场景）下设置透明背景或图片背景

目录

存在的问题

SceneView设置为透明

Map设置为透明

设置背景图片

---

存在的问题

• 将地图的底图背景透明SceneView设置背景无效
• map的数据框背景颜色设置为透明后，放在basemap的图层也会变成透明
• 背景图片设置无效，被背景总是黑色

SceneView设置为透明

ArcGIS API for JavaScript 4.X中的SceneView有一个环境参数environment，将其背景（background）的颜色设置为透明，按道理就实现了背景透明。

            this.view = new SceneView({
                container: "mapDIV",
                map: webMap,
                environment: {
                    background: {
                        type: 'color',
                        color: [255, 255, 0, 0],
                    },
                },
            });

可是并无任何效果， 然后查看环境参数的属性，需要将氛围属性atmosphereEnabled设置为false。

Map设置为透明

SceneView设置为透明后，如果底图为区域不是全球的情况下，底图的数据范围还是会有默认的颜色存在，此时需要将Map和WebScene的ground将Ground中的opacityopacity值设置为0。

let map = new WebScene({
    ground: {surfaceColor: "#1b2540",opacity: 0.01,},
    layers:[baseLayer]
});

提示：因为将ground的透明度设置为0，在basemap中的图层也会变成透明，所以不能用使用API中带有的底图切换工具，例如BasemapGallery、BasemapLayerList、BasemapToggle等；但不影响ground中配置的ElevationLayer。

设置背景图片

当你成功将背景变为透明，可是无论你怎么设置装地图DOM的背景图片，始终都不会出来，一直都是黑的，而此时你只需要将SceneView中的alphaCompositingEnabled属性设置为true，这样你的背景图片就会显示出来。

let map = new WebScene({
    ground: {
        surfaceColor: "#1b2540",
        opacity: 0.01,
    },
    layers:[baseLayer]
});
self.view = new SceneView({
    container: "mapDIV",
    map: map,
    alphaCompositingEnabled: true,
    environment: {
        background: {
            type: 'color',
            color: [255, 255, 0, 0],
        },
        starsEnabled: true,
        atmosphereEnabled: false,
    },
});

注意：在API中的解释，启用了alphaCompositingEnabled属性后，SceneView的性能会降低，所以非必要情况下还是沿用与系统相似的背景色