【超图+CESIUM】【基础API使用示例】17、超图｜CESIUM - 手动设置场景的二三维展示
作者：互联网
前言
缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)
以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。
手动设置场景的二三维展示，也可通过设置sceneModePicker:true的方式显示右上角的自带控件。
使用
-
效果
-
完整代码
<!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>二三维场景切换</title>
<link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script
type="text/javascript"
src="./public/Build/Cesium/Cesium.js"
></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#cesium-container {
width: 100%;
height: 100%;
}
.panel {
position: fixed;
left: 10px;
top: 10px;
z-index: 1;
background-color: #fff;
}
.panel .btn {
cursor: pointer;
}
</style>
</head>
<body>
<div id="cesium-container" />
<div class="panel">
<p class="btn">三维场景</p>
<p class="btn">平面场景</p>
</div>
<script>
// 注意：四种模式自行测试
// Cesium.SceneMode.COLUMBUS_VIEW ： 哥伦布视图模式。一个 2.5D 透视图，其中地图平放，其上方绘制了非零高度的对象。
// Cesium.SceneMode.MORPHING ： 在模式之间变形，例如，3D 到 2D。
// Cesium.SceneMode.SCENE2D ： 二维模式。使用正交投影自上而下查看地图。
// Cesium.SceneMode.SCENE3D ： 3D模式。地球的传统 3D 透视图。
let viewer = null
window.onload = function () {
viewer = new Cesium.Viewer('cesium-container', {
sceneModePicker: false, // 右上角模式切换控件
navigation: false,
})
// setS3MServiceHandler()
changeSceneModeHandler()
}
// 点击切换场景模式
function changeSceneModeHandler() {
const btns = document.querySelectorAll('.panel .btn')
btns[0].style.color = 'red'
btns[0].addEventListener('click', () => {
btns[0].style.color = 'red'
btns[1].style.color = '#000'
viewer.scene.mode = Cesium.SceneMode.SCENE3D //三维场景
})
btns[1].addEventListener('click', () => {
btns[1].style.color = 'red'
btns[0].style.color = '#000'
viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW //平面场景
})
}
// 添加由supermap iserver上发布的s3m服务
function setS3MServiceHandler() {
viewer.scene.open(
'http://www.supermapol.com/realspace/services/3D-NewCBD/rest/realspace'
)
}
</script>
</body>
</html>
标签：style,场景,示例,color,SceneMode,Cesium,超图,CESIUM,btns 来源： https://blog.csdn.net/weixin_44402694/article/details/123181639