<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/photofiles/201312/4gYtkTv06g.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/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require(["esri/views/SceneView", "esri/config", "esri/layers/TileLayer", "esri/Map", "esri/Ground"], (
SceneView,
esriConfig,
TileLayer,
Map,
Ground
) => {
//访问内网下portal的门户地址
esriConfig.portalUrl = "https://ncportal.geoscene.cn/portal";
// Create Point Cloud Layer
const layer = new TileLayer({
portalItem: {
// autocasts as new PortalItem()
id: "3702922babfe4ffa9e08d959b38b423d"
}
});
const map = new Map({
ground: new Ground({
layers: [],
surfaceColor: "transparent",//,//设置地面背景色为绿色,alpha通道不起作用
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>
Arcgis 4.x版本之后。地图背景透明
最新推荐文章于 2024-02-22 11:59:46 发布