三维地图如何加载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>

 

posted @ 2020-05-25 14:07  万里哥  阅读(405)  评论(0)  编辑  收藏  举报