cesium 加载3dtiles调整位置

最新推荐文章于 2024-05-23 10:24:31 发布
yiyi@yiyi
最新推荐文章于 2024-05-23 10:24:31 发布
阅读量260
点赞数
文章标签： 3d
本文链接：https://blog.csdn.net/2301_78814180/article/details/134582321
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cesium示例</title>
    <!-- 引用cesium的js和css，天地图的扩展js -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet"
        href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" />
    <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
    <style type="text/css">
        html,
        body,
        #tiandituContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>

<body onload="loadData()">
    <div id="tiandituContainer">
    </div>
    <script>

        //Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDJiYWZjNy01YWIzLTQ5MDQtOWRjMC1lNzRjMzZlNDkxZjgiLCJpZCI6MTYzNzI4LCJpYXQiOjE2OTM0NzM4NTZ9.TZLI1V4-2pYZoVSbt-zOkV7Yx7elhjAsqfFt5h4Nrlk";

        var viewer;
        function loadData() {
            //默认会调用微软virtualearth地图
            viewer = new Cesium.Viewer('tiandituContainer', {
                animation: false,       //是否显示动画控件
                homeButton: true,       //是否显示home键
                geocoder: true,         //是否显示地名查找控件，如果设置为true，则无法查询
                baseLayerPicker: true, //是否显示图层选择控件
                timeline: false,        //是否显示时间线控件
                fullscreenButton: true, //是否全屏显示
                infoBox: true,         //是否显示点击要素之后显示的信息
                sceneModePicker: true,  //是否显示投影方式控件  三维/二维
                navigationInstructionsInitiallyVisible: false, //导航指令
                navigationHelpButton: false,     //是否显示帮助信息控件
                selectionIndicator: false, //是否显示指示器组件
            });
            //隐藏cesium的logo
            viewer._cesiumWidget._creditContainer.style.display = "none";
            //默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的
            viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

            //arcgis在线影像地图
            viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
                name: "img_arcgis",
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
            }));

            viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关，打开后地形会遮挡看不到的区域
            viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果

            add3DTiles("模型地址", 131.479394, 29.791416, 8);
        }

        function add3DTiles(url, longitude, latitude, height) {
            var tileset = viewer.scene.primitives.add(
                new Cesium.Cesium3DTileset({
                    url: url,
                    maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
                    //maximumNumberOfLoadedTiles: 1000,
                    maximumMemoryUsage: 512//默认512,内存MB的最大数量
                }));
            tileset.readyPromise.then((tileset) => {

                //模型加载后可能会有便宜和高度不对，需要对模型进行调整
                tileSet(tileset, longitude, latitude, height);
                //tileSetAll(tileset,longitude, latitude, height,0,0,0,1);

                viewer.zoomTo(tileset);
            });
        }
        //利用translation对模型的经度、纬度、高度进行修改
        function tileSet(tileset, longitude, latitude, height) {
            //3dtile模型的边界球体
            var boundingSphere = tileset.boundingSphere;
            //迪卡尔空间直角坐标=>地理坐标（弧度制）
            var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
            //设置新的经度、纬度、高度
            var cartographic_offset = Cesium.Cartographic.fromDegrees(longitude, latitude, height);
            //地理坐标（弧度制）=>迪卡尔空间直角坐标
            var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
            var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_offset.longitude, cartographic_offset.latitude, cartographic_offset.height);
            //获得地面和offset的转换
            var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
            //修改模型矩阵
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }
        
        //利用transform对模型的所有参数进行修改
        function tileSetAll(tileset, longitude, latitude, height, rotateX, rotateY, rotateZ, scale) {
            //旋转角度设置
            var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotateX));
            var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotateY));
            var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotateZ));
            var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
            var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
            var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
            //平移 修改经纬度
            var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
            var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            //旋转、平移矩阵相乘
            Cesium.Matrix4.multiply(transform, rotationX, transform);
            Cesium.Matrix4.multiply(transform, rotationY, transform);
            Cesium.Matrix4.multiply(transform, rotationZ, transform);
            //缩放 修改缩放比例
            var scale1 = Cesium.Matrix4.fromUniformScale(scale);
            Cesium.Matrix4.multiply(transform, scale1, transform);
            //赋值给tileset
            tileset._root.transform = transform;

        }
    </script>
</body>

</html>