标签：style 场景 示例 color SceneMode Cesium 超图 CESIUM btns
前言
缺少前置学习使用资料，请自行查阅：[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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。