cesium-2-3D切换
cesium自带2维和3维的切换
代码比较简单
核心js代码
/**
* 二三维场景切换
*/
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>