cesium-2-3D切换

2022/1/13 6:07:14

编程Tag： 切换 let 视图 3d false Cesium Scene viewType

本文主要是介绍cesium-2-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>

这篇关于cesium-2-3D切换的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

cesium-2-3D切换

cesium-2-3D切换

核心js代码

完整代码

相关编程文章