实现效果如图:
实现代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>background-image</title> <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="./css/pretty.css" rel="stylesheet"> <script src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script> </head> <body> <div id="cesiumContainer" class="fullSize" style="background-image: url(./images/home_banner.jpg);"></div> <script> function onload(Cesium) { var viewer = new Cesium.Viewer('cesiumContainer', { animation: false, infoBox: false, selectionIndicator: false, skyBox: false, shadows: false, homeButton: false, navigationInstructionsInitiallyVisible: false, navigationHelpButton: false, skyAtmosphere: false, //天空色不显示 orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true, } }, }); var scene = viewer.scene; //改变天空颜色 scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); var promise = scene.open("http://localhost:8090/iserver/services/3D-newScene/rest/realspace"); Cesium.when(promise, function (layer) { viewer.scene.camera.flyTo({ destination: new Cesium.Cartesian3.fromDegrees(54.366605, 24.517977, 1883.399550), orientation: { heading: 3.3244272759237896, //围绕负z轴的旋转 pitch: -0.37708595899211894, //围绕负y轴的旋转 roll: 6.283172666049328 //围绕正x轴的旋转 }, }); }, function (e) { if (widget._showRenderLoopErrors) { var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?'; widget.showErrorPanel(title, undefined, e); } }); } </script> </body> </html>