cesium自带2维和3维的切换
代码比较简单
/** * 二三维场景切换 */ let viewType= "三维视图"; function setViewType () { let scene = viewer.scene; switch (viewType) { case "三维视图": scene.morphTo3D(0); viewType = '二维视图'; break; case "二维视图": scene.morphTo2D(0); viewType = '三维视图'; break; default: break; } }
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <script src="../Cesium-1.89/Build/Cesium/Cesium.js"></script> <style> @import url(../Cesium-1.89/Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #eye { position: absolute; width: 20%; height: 20%; bottom: 0; right: 0; z-index: 999; background: red; border: solid blue 1px; } #show { width: 100%; height: 100%; } </style> </head> <body> <div style="display: -webkit-flex;display: flex;width: 100%;height: 100%"> <div style="width: 90%;height: 100%"> <div id="cesiumContainer"></div> </div> <div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px"> <button onclick="cameraLookAtTransform()">模型定位</button> <button onclick="setViewType()">二三维场景切换</button> </div> </div> <video id="daolu" muted autoplay loop crossorigin controls> <source src="../../static/data/daolu.mp4" type="video/mp4"/> </video> <script> //Cesium token let cesium_tk = "token"; Cesium.Ion.defaultAccessToken = cesium_tk; // 添加mapbox自定义地图实例 let layer = new Cesium.MapboxStyleImageryProvider({ url: 'https://api.mapbox.com/styles/v1', username: 'sungang', styleId: 'styleId', accessToken: 'accessToken', scaleFactor: true }); let viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: layer, geocoder: false, homeButton: false, sceneModePicker: false, baseLayerPicker: false, navigationHelpButton: false, animation: false, timeline: false, fullscreenButton: false, vrButton: false }); viewer._cesiumWidget._creditContainer.style.display = "none"; let model = new Cesium.Cesium3DTileset({ url: '../res/data/3dtiles/tianjie/tileset.json', modelMatrix: Cesium.Matrix4.fromArray( [0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0, -0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0, -0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0, -663.0794944260269, 1211.490494620055, 2974.1003134818748, 1]), }); let tileset = viewer.scene.primitives.add(model); //模型定位 function cameraLookAtTransform() { var boundingSphere = model.boundingSphere viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(120.0), Cesium.Math.toRadians(-10), boundingSphere.radius * 2.5)) viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY) } /** * 二三维场景切换 */ let viewType= "三维视图"; function setViewType () { let scene = viewer.scene; switch (viewType) { case "三维视图": scene.morphTo3D(0); viewType = '二维视图'; break; case "二维视图": scene.morphTo2D(0); viewType = '三维视图'; break; default: break; } } </script> </body> </html>