argis api for javascript 三维球体背景更改

请问argis api for javascript 4.18 三维地球的背景如何隐藏

微信截图_20220512170305.png

 
已邀请:

张佳期

赞同来自: ListeningLTG

 
效果图:

图4.png

 
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Custom background for SceneView | Sample | ArcGIS API for JavaScript 4.21
</title>
<style>
html,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}


body {
background-image: url(https://sc.68design.net/photof ... 6g.jpg);
}

header {
position: absolute;
top: 0;
right: 0;
text-align: right;
max-width: 400px;
padding-right: 20px;
color: #61399b;
line-height: 1.5em;
}


#backgroundSetting {
padding: 10px;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.21/esr ... ot%3B />
<script src="https://js.arcgis.com/4.21/%26 ... gt%3B

<script>
require(["esri/views/SceneView", "esri/layers/TileLayer", "esri/Map", "esri/Ground"], (

SceneView,

TileLayer,
Map,
Ground
) => {

// Create Point Cloud Layer
const layer = new TileLayer({
url:"https://ncportal.geoscene.cn/s ... ot%3B,
});

const map = new Map({
ground: new Ground({
layers: ,
surfaceColor: "transparent",
opacity: 0,//给地面设置透明度
}),
layers: [layer]
});

const view = new SceneView({
viewingMode: "local",
container: "viewDiv",
map: map,
alphaCompositingEnabled: true,
environment: {
// set a transparent background
background: {
type: "color",
color: [255, 252, 244, 0]
},
lighting: {
date: "Sun Jul 15 2018 08:00:00 GMT+0200 (W. Europe Daylight Time)"
},
// disable stars
starsEnabled: false,
// disable atmosphere
atmosphereEnabled: false
},

// limit zooming in and out
// constraints: {
// altitude: {
// min: 20000000,
// max: 25000000
//}
//},

//不要放大缩小等按钮
//ui: {
//components: ["attribution"]
//},

padding: {
top: 100
}
});

const backgroundCheckbox = document.getElementById("background");
backgroundCheckbox.addEventListener("change", (event) => {
const backgroundColor = view.environment.background.color.clone();
backgroundColor.a = event.target.checked ? 0 : 1;
view.environment.background.color = backgroundColor;
});

view.ui.add("backgroundSetting", "bottom-left");
});
</script>
</head>

<body>

<div id="viewDiv"></div>
<div id="backgroundSetting" class="esri-widget">
<input type="checkbox" id="background" checked /><label for="background">Transparent background</label
>
</div>
</body>
</html>
</script>
</head>

<body></body>

</html>

要回复问题请先登录注册