Cesium加载三维点云数据

最新推荐文章于 2024-06-27 16:25:52 发布

火气旺就来敲代码，看看还旺不旺

最新推荐文章于 2024-06-27 16:25:52 发布

阅读量6.6k

点赞数 4

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_44539625/article/details/108309700

版权

Cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点云预处理

	点云数据的常见格式有ply，las,txt等格式，而Cesium不能直接加载，所以需要前期的数据处理，将点云数据处理成能够加载的类型

CloudCompare处理点云

在这里插入图片描述把现有的ply格式转为Cesiumlab可以处理的las格式

Cesiumlab切片

在这里插入图片描述

可以选择经纬度局部坐标系（不知道为什么选择wgs84(epgs4326),最后加载的样子有错误），此处的坐标在预览中作为指定位置

Cesium加载

<!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="./Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" type="text/css" href="./Build/Cesium/Widgets/widgets.css" /> 
    
    <!-- 线上
    <script src="https://cesiumjs.org/releases/1.62/Build/Cesium/Cesium.js"></script>
    <script src="https://cesiumjs.org/releases/1.62/Apps/Sandcastle/Sandcastle-header.js"></script>
    <link href="https://cesiumjs.org/releases/1.62/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
</head>

<body>
      <div id="cesiumContainer"></div>
      <div id="toolbar" style="margin: 5px;padding: 2px 5px;position: absolute;top:50px"></div>
      <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            selectionIndicator: false,
            infoBox: false, 
        });
        
            var longitude = 116.39123;
            var latitude = 39.905;
            var height = 1000;
            var heading = 0;
            var tileset = new Cesium.Cesium3DTileset({
                url:url //此处填入发布服务的网址
            });
            // tileset.style = new Cesium.Cesium3DTileStyle({
            //     color: {
            //         conditions: [
            //             // ["${height} > 0", "color('#FFF', 0.5)"],
            //             ['true', "color('#FFFF00', 0.5)"]
            //         ]
            //     }
            // });
           
            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) });    
            });  
    </script>
    
</body>
</html>

最后的Cesiumlab的展示结果
代码的展示结果
其中heading、pitch、roll可以设置旋转参数（我的好像没写pitch和roll）

ps:上面更改点云位置的代码，当点云数据量大时可能无法生效（我也不知道为什么），此时可以将点云用cloudcompare进行抽稀，将数据量减小，再使用代码更改位置即可。

火气旺就来敲代码，看看还旺不旺

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
3
评论
Cesium加载三维点云数据

点云预处理点云数据的常见格式有ply，las,txt等格式，而Cesium不能直接加载，所以需要前期的数据处理，将点云数据处理成能够加载的类型CloudCompare处理点云把现有的ply格式转为Cesiumlab可以处理的las格式Cesiumlab切片Cesium加载<!DOCTYPE html><html lang="en"><head>  &
复制链接

扫一扫

专栏目录