• 三维地图如何加载gltf数据代码


    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
            <title></title>
            <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
            <link href="./css/pretty.css" rel="stylesheet">
            <script src="./js/jquery.min.js"></script>
            <script src="./js/config.js"></script>
            <script src="./js/tooltip.js"></script>
            <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
        </head>
    
        <body>
            <div id="cesiumContainer"></div>
            <div id='loadingbar' class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
            <script type="text/javascript">
                function onload(Cesium) {
                    //初始化viewer部件
                    var viewer = new Cesium.Viewer('cesiumContainer');
                    var scene = viewer.scene;
                    var widget = viewer.cesiumWidget;
                    $('#loadingbar').remove();
                
    
                    //加载地块1建筑
                    var gltf1 = viewer.entities.add({
                        name: "gltf",
                        position: new Cesium.Cartesian3.fromDegrees(113.525727552426, 22.7664568396822, 0),
                        model: {
                            uri: "./data/MZW/mzw_01_bui.gltf"
                        }
                    }); 
               
                    var gltf2 = viewer.entities.add({
                        name: "gltf",
                        position: new Cesium.Cartesian3.fromDegrees(113.525727552426, 22.7664568396822, 0),
                        model: {
                            uri: "./data/MZW/mzw_01_flo_01.gltf"
                        }
                    });
                     
                  
                    var gltf3 = viewer.entities.add({
                        name: "gltf",
                        position: new Cesium.Cartesian3.fromDegrees(113.525727552426, 22.7664568396822, 0),
                        model: {
                            uri: "./data/MZW/mzw_01_flo_02.gltf"
                        }
                    });
                    
             
                    var gltf4 = viewer.entities.add({
                        name: "gltf",
                        position: new Cesium.Cartesian3.fromDegrees(113.525727552426, 22.7664568396822, 0),
                        model: {
                            uri: "./data/MZW/mzw_02_bui_01.gltf"
                        }
                    });
    
              
                    var gltf5 = viewer.entities.add({
                        name: "gltf",
                        position: new Cesium.Cartesian3.fromDegrees(113.525727552426, 22.7664568396822, 0),
                        model: {
                            uri: "./data/MZW/mzw_02_bui_02.gltf"
                        }
                    });
                     
                    viewer.zoomTo(gltf1);
                    viewer.zoomTo(gltf2);
                    viewer.zoomTo(gltf3);
                    viewer.zoomTo(gltf4);
                    viewer.zoomTo(gltf5);
                }
            </script>
        </body>
    
    </html>
  • 相关阅读:
    PLSQL配置介绍
    jquery实现无外边框table
    以太坊白皮书
    区块链技术教程,如何从零开始学习以太坊及区块链
    Python机器学习中文版
    史上最全TensorFlow学习资源汇总
    什么是人工智能?终于说明白了
    Python 语音识别
    Step by Step 真正从零开始,TensorFlow详细安装入门图文教程!帮你完成那个最难的从0到1
    什么是加密经济学? 初学者终极指南
  • 原文地址:https://www.cnblogs.com/wanlige/p/12956595.html
Copyright © 2020-2023  润新知