You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
6.0 KiB
HTML
172 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js"></script>
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css"
|
|
rel="stylesheet">
|
|
|
|
</head>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
button {
|
|
height: 70px;
|
|
width: 300px;
|
|
margin-right: 50px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div style="margin-bottom: 100px;">
|
|
<div style="display: flex;">
|
|
<div id="cesiumContainer1" style="height: 700px;margin-right: 10px;flex: 1;"><span
|
|
style="z-index: 2000;">默认</span>
|
|
</div>
|
|
<div id="cesiumContainer2" style="height: 700px;margin-right: 10px;flex: 1;"><span
|
|
style="z-index: 2000;">遥感影像</span>
|
|
</div>
|
|
<div id="cesiumContainer3" style="height: 700px;margin-right: 10px;flex: 1;"><span
|
|
style="z-index: 2000;">带有道路覆盖的遥感影像</span></div>
|
|
<div id="cesiumContainer4" style="height: 700px;margin-right: 10px;flex: 1;"><span
|
|
style="z-index: 2000;">道路影像</span>
|
|
</div>
|
|
</div>
|
|
<div id="creditContainer1" style="display: none;"> </div>
|
|
<div id="creditContainer2" style="display: none;"> </div>
|
|
<div id="creditContainer3" style="display: none;"> </div>
|
|
<div id="creditContainer4" style="display: none;"> </div>
|
|
</div>
|
|
<button id="btnImage">添加Ion影像服务</button>
|
|
<button id="btn"> 设置透明度为0.5和亮度为2</button>
|
|
<button id="btnSingleImage">添加SingleTileImage</button>
|
|
</body>
|
|
<script>
|
|
let viewer1 = new Cesium.Viewer('cesiumContainer1', {
|
|
timeline: false,
|
|
animation: false,
|
|
navigationHelpButton: false,
|
|
fullscreenButton: false,
|
|
baseLayerPicker: false,
|
|
creditContainer: 'creditContainer1',
|
|
geocoder: false,
|
|
})
|
|
let viewer2 = new Cesium.Viewer('cesiumContainer2', {
|
|
timeline: false,
|
|
animation: false,
|
|
navigationHelpButton: false,
|
|
fullscreenButton: false,
|
|
imageryProvider: Cesium.createWorldImagery({
|
|
style: Cesium.IonWorldImageryStyle.AERIAL
|
|
}),
|
|
baseLayerPicker: false,
|
|
creditContainer: 'creditContainer2',
|
|
geocoder: false
|
|
})
|
|
let viewer3 = new Cesium.Viewer('cesiumContainer3', {
|
|
imageryProvider: Cesium.createWorldImagery({
|
|
style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
|
|
}),
|
|
timeline: false,
|
|
animation: false,
|
|
navigationHelpButton: false,
|
|
fullscreenButton: false,
|
|
baseLayerPicker: false,
|
|
creditContainer: 'creditContainer3',
|
|
geocoder: false
|
|
})
|
|
let viewer4 = new Cesium.Viewer('cesiumContainer4', {
|
|
imageryProvider: Cesium.createWorldImagery({
|
|
style: Cesium.IonWorldImageryStyle.ROAD
|
|
}),
|
|
timeline: false,
|
|
animation: false,
|
|
navigationHelpButton: false,
|
|
fullscreenButton: false,
|
|
baseLayerPicker: false,
|
|
creditContainer: 'creditContainer4',
|
|
geocoder: false
|
|
})
|
|
</script>
|
|
<script>
|
|
document.getElementById('btn').disabled = true
|
|
let blackMarble1, blackMarble2, blackMarble3, blackMarble4
|
|
let layers1 = viewer1.scene.imageryLayers,
|
|
layers2 = viewer2.scene.imageryLayers,
|
|
layers3 = viewer3.scene.imageryLayers,
|
|
layers4 = viewer4.scene.imageryLayers
|
|
document.getElementById('btnImage').onclick = function addImageryService() {
|
|
blackMarble1 = layers1.addImageryProvider(
|
|
new Cesium.IonImageryProvider({
|
|
assetId: 3812
|
|
})
|
|
);
|
|
|
|
blackMarble2 = layers2.addImageryProvider(
|
|
new Cesium.IonImageryProvider({
|
|
assetId: 3812
|
|
})
|
|
);
|
|
|
|
blackMarble3 = layers3.addImageryProvider(
|
|
new Cesium.IonImageryProvider({
|
|
assetId: 3812
|
|
})
|
|
);
|
|
|
|
blackMarble4 = layers4.addImageryProvider(
|
|
new Cesium.IonImageryProvider({
|
|
assetId: 3812
|
|
})
|
|
);
|
|
document.getElementById('btnImage').disabled = true
|
|
document.getElementById('btn').disabled = false
|
|
}
|
|
document.getElementById('btn').onclick = function change() {
|
|
blackMarble1.alpha = 0.5;
|
|
blackMarble1.brightness = 2.0;
|
|
blackMarble2.alpha = 0.5;
|
|
blackMarble2.brightness = 2.0;
|
|
blackMarble3.alpha = 0.5;
|
|
blackMarble3.brightness = 2.0;
|
|
blackMarble4.alpha = 0.5;
|
|
blackMarble4.brightness = 2.0;
|
|
console.log('设置成功')
|
|
}
|
|
document.getElementById('btnSingleImage').onclick = () => {
|
|
layers1.addImageryProvider(
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "../Source/Assets/Images/ion-credit.png",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
|
|
})
|
|
);
|
|
layers2.addImageryProvider(
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "../Source/Assets/Images/ion-credit.png",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
|
|
})
|
|
);
|
|
layers3.addImageryProvider(
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "../Source/Assets/Images/ion-credit.png",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
|
|
})
|
|
);
|
|
layers4.addImageryProvider(
|
|
new Cesium.SingleTileImageryProvider({
|
|
url: "../Source/Assets/Images/ion-credit.png",
|
|
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
|
|
})
|
|
);
|
|
}
|
|
</script>
|
|
|
|
</html>
|