【超图+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" /><scripttype="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 = nullwindow.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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！