1、代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>地上地下</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<script src="/js/lib/cesiumplugins/ImageryProvider-WebExtend.js"></script>
<body>
<div id="cesiumContainer"></div>
<div id='toolbar' class="param-container tool-bar">
<label style="color: #FFFFFF">影像: </label>
<input type="range" id="影像" min="0" max="1" value="1" step="0.05" style="width: 170px">
<br />
<label style="color: #FFFFFF">地形: </label>
<input type="checkbox" id="地形">   
<br />
</div>
<script>
function onl oad(Cesium) {
var Routes1;
var Routes2;
var Routes3;
var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, {
url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
});
var viewer = new Cesium.Viewer('cesiumContainer', {
// imageryProvider: GoogleMap
});
// viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
// url: './images/BlackMarble_2016.jpg'
// }));
viewer.imageryLayers.addImageryProvider(GoogleMap);
var globe = viewer.scene.globe;
viewer.scene.undergroundMode = true;
viewer.scene.sun.show = false;
viewer.scene.moon.show = false;
viewer.scene.skyBox.show = false;
viewer.scene.skyAtmosphere.show = false;
viewer.scene.fxaa = true;
$("#影像").on("input change", function() {
globe.globeAlpha = this.value;
});
var blueBox = viewer.entities.add({
name: 'Blue box with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
// height: 100,
outlineColor: Cesium.Color.BLACK,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
var yellowBox = viewer.entities.add({
name: 'Yellow box with black outline',
position: Cesium.Cartesian3.fromDegrees(-108.202, 41.202),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.YELLOW.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
var czml = [{
"id": "document",
"name": "box",
"version": "1.0"
}, {
"id": "shape2",
"name": "Red box with black outline",
"position": {
"cartographicDegrees": [-107.0, 40.0, -150000.0]
},
"box": {
"dimensions": {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"material": {
"solidColor": {
"color": {
"rgba": [255, 0, 0, 128]
}
}
},
"outline": true,
"outlineColor": {
"rgba": [0, 0, 0, 255]
},
"heightReference": Cesium.HeightReference.CLAMP_TO_GROUND
}
}];
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(viewer.entities);
};
</script>
</body>
2、效果