cesium小试牛刀

最新推荐文章于 2024-05-20 11:01:35 发布

逸然健在

最新推荐文章于 2024-05-20 11:01:35 发布

阅读量1.9k

点赞数 1

分类专栏： GIS ３ＤＧＩＳ cesium JavaScript

本文链接：https://blog.csdn.net/qq_26991807/article/details/82353078

版权

GIS 同时被 3 个专栏收录

28 篇文章 5 订阅

订阅专栏

JavaScript

22 篇文章 1 订阅

订阅专栏

cesium

7 篇文章 6 订阅

订阅专栏

久仰cesium的大名，3dGIS的受欢迎程度在如今也是不言而喻。之前做过商业版的3dGIS项目用的是skyline的产品，对于开源3dGIS,看的我也是心痒难耐，今天就照着做了几个demo.确实强大。

准备工作：1.cesiumLab :yong 3dtile 的发布，例如地形，用于extrude的矢量面数据，点数据等。

2.广州市全市建筑轮廓 .shp 文件，广东省部分区域DEM。

3.cesium 1.45压缩包

将lab中制作的地形和建筑3DTile文件放到tomcat下面或者iis目录下运行即可，还是很容易上手的。细节的话，还是要多看api文档。

多的不说，直接上代码和效果图吧：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
        <style>
             @import url(../Build/Cesium/Widgets/widgets.css); 
            html, body, #container {
                width: 98%; height: 98%; margin: 0; padding: 0; overflow: hidden;
            }
        </style>
    </head>
    <body>
        
        <div id="container">
                
        </div>

        <button id='flytoGZ'style=" z-index:99999" onclick='flygz()'></button>
                <button   id='flytoSZ' style=" z-index:99999" onclick='flysz()' ></button>
        <script>
            var viewer = new Cesium.Viewer('container');
            var longitude = 113.32000249500005;
            var latitude = 23.149254307297817;
            var height = 3.4846899907793303e-9;
            var heading = 0;
            var tileset = new Cesium.Cesium3DTileset({
                url: 'http://localhost:8080/cesiumBuiding1/cesiumBuiding1/tileset.json'
            });
            viewer.scene.primitives.add(tileset);
            tileset.readyPromise.then(function(argument) {
                var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
                var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
                var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
                Cesium.Matrix4.multiply(mat, rotationX, mat);
                tileset._root.transform = mat;
                viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
            });

            //加载深圳地形
            var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(112.99986),Cesium.Math.toRadians(21.99986),
            Cesium.Math.toRadians(115.00014),Cesium.Math.toRadians(23.00014));
            var terrainLayer = new Cesium.CesiumTerrainProvider({
                url: 'http://localhost:8080/cesiumTerra',
                requestWaterMask:true,
                // credit: 'http://www.bjxbsj.cn',
            });
            viewer.terrainProvider = terrainLayer;
            // viewer.scene.camera.flyTo({destination: rectangle});

            function flygz(){
                viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
            }
            function flysz(){
                viewer.scene.camera.flyTo({destination: rectangle});
            }

        </script>
    </body>
</html>

深圳，香港区域地形

逸然健在

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
cesium小试牛刀

久仰cesium的大名，3dGIS的受欢迎程度在如今也是不言而喻。之前做过商业版的3dGIS项目用的是skyline的产品，对于开源3dGIS,看的我也是心痒难耐，今天就照着做了几个demo.确实强大。准备工作：1.cesiumLab :yong 3dtile 的发布，例如地形，用于extrude的矢量面数据，点数据等。2.广州市全市建筑轮廓 .shp 文件，广东省部分区域DEM。3....
复制链接

扫一扫