标签：false scene 视图 Cesium let 切换 cesium viewType 3D
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>
标签：false,scene,视图,Cesium,let,切换,cesium,viewType,3D 来源： https://blog.csdn.net/qq_36213352/article/details/122465031
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。