Cesium加载3D Tiles数据

这篇具有很好参考价值的文章主要介绍了Cesium加载3D Tiles数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用原生Cesium加载3D Tiles数据,并实现对图层的选中、样式的修改、图元的隐藏。

实现代码
<!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>3D Tiles</title>
    <link href="../cesium-1.86/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="./libs/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../cesium-1.86/Build/Cesium/Cesium.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>

        let Viewer, tileset;
        let selectPickedEntity = null;

        // 切换自己的token
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';

        function onload(Cesium) {

            var obj = [6378137.0, 6378137.0, 6356752.3142451793];
            Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));
            Viewer = new Cesium.Viewer('cesiumContainer', {
                infoBox: false,
                animation: false,       //动画
                homeButton: true,       //home键
                geocoder: true,         //地址编码
                baseLayerPicker: false, //图层选择控件
                timeline: false,        //时间轴
                fullscreenButton: true, //全屏显示
                infoBox: true,         //点击要素之后浮窗
                sceneModePicker: true,  //投影方式  三维/二维
                navigationInstructionsInitiallyVisible: false, //导航指令
                navigationHelpButton: false,     //帮助信息
                selectionIndicator: false, // 选择
            });
            //关闭logo
            Viewer._cesiumWidget._creditContainer.style.display = 'none';

            //addImageLayer();
            add3DTiles();

            function addImageLayer() {
                var imageryLayers = Viewer.imageryLayers;
                var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
                var tiandituTk = '天地图官网申请的Token';
                var labelImagery = new Cesium.WebMapTileServiceImageryProvider({
                    //影像底图
                    url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + tiandituTk,
                    subdomains: subdomains,
                    layer: "tdtImgLayer",
                    style: "default",
                    format: "image/jpeg",
                    tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
                    show: true
                })

                imageryLayers.addImageryProvider(labelImagery);
            }

            function add3DTiles() {
                tileset = Viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                    url: '../3data/tileset.json',
                    shadows: Cesium.ShadowMode.DISABLED,
                    luminanceAtZenith: 1 //Cesium 1.53版本后增加的luminanceAtZenith,用来调节程序纹理的亮度
                }));

                tileset.readyPromise.then(function (layer) {
                    console.log('----->', layer, layer.content);
                    tileset.style = new Cesium.Cesium3DTileStyle({
                        color: {
                            conditions: [
                                // ["true", "color('white')"]
                                ["true", "rgba(255,255,255,1)"]
                            ]
                        },
                    });
                    Viewer.flyTo(tileset);
                    handle();
                }).otherwise(function (error) {
                    throw (error);
                });

                // 设置瓦片加载完成监听事件,获取所有的所有feature数据信息
                tileset.tileLoad.addEventListener(function (tile) {
                    let content = tile.content;
                    console.log(content);
                    let featuresLength = content.featuresLength;
                    console.log("要素数量为:" + featuresLength);
                    console.log("第一个要素为:");
                    let feature = content.getFeature(0);
                    console.log(feature);
                })
            }

            function handle() {
                var handler = new Cesium.ScreenSpaceEventHandler(Viewer.canvas);

                handler.setInputAction(function (movement) {

                    //还原前选择要素的本颜色
                    if (selectPickedEntity) {
                        selectPickedEntity.color = Cesium.Color.WHITE;
                        selectPickedEntity = null;
                    }

                    var pickingEntity = Viewer.scene.pick(movement.position);
                    //判断选择是否为Cesium3DTileFeature
                    if (pickingEntity instanceof Cesium.Cesium3DTileFeature) {
                        selectPickedEntity = pickingEntity;

                        var propertyNames = pickingEntity.getPropertyNames();
                        var length = propertyNames.length;
                        for (var i = 0; i < length; ++i) {
                            var propertyName = propertyNames[i];
                            console.log(propertyName + ': ' + pickingEntity.getProperty(propertyName));
                        }
                        //隐藏选中的要素
                        //pickingEntity.show = false;

                        //将模型变为黄色高亮
                        pickingEntity.color = Cesium.Color.RED;
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
        }

        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>

</html>
实现效果

Cesium加载3D Tiles数据文章来源地址https://www.toymoban.com/news/detail-420987.html

到了这里,关于Cesium加载3D Tiles数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 三维GIS开发:利用Cesium加载 M3D 地质体模型(附代码)

    实现步骤 Step 1.  引用开发库 : 本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能; Step 2.  创建布局 : 创建 id=\\\'GlobeView\\\' 的 div 作为三维视图的容器,并设置其样式; Step 3.  构造三维场景控件 : 实例化 Cesium.WebSceneControl 对象,完成

    2024年02月10日
    浏览(40)
  • Cesium入门之十:Cesium加载3DTiles数据

    3DTiles是一种面向网格化、可展示的大规模三维空间数据格式,专门为流式传输和渲染海量3D地理空间数据而设计的,用于存储和管理基于网格的三维模型数据。其数据结构基于B3DM和PNTS格式,可以支持多个级别的LOD,并使用Tilesets(瓦片集合)来组织和管理数据。3DTiles具有以

    2024年02月12日
    浏览(50)
  • 3D Tiles 规范(一概述)

    3D Tiles 专为流式传输和渲染大量 3D 地理空间内容而设计,例如摄影测量、3D 建筑、BIM/CAD、实例化要素和点云。它定义了分层数据结构和一组提供可渲染内容的Tile格式。3D Tiles 没有定义内容可视化的明确规则;客户可以根据自己认为合适的方式可视化 3D Tiles 数据。    在 3

    2024年04月25日
    浏览(39)
  • glTF模型转3D Tiles

    将 glTF 模型转换为 3D Tiles 格式需要使用一些工具来完成。其中一种方法是使用 Cesium 的 3D Tiles 工具。 Cesium 是一个开源的 3D 地球浏览器,它提供了一个命令行工具,可以将 glTF 模型转换为 3D Tiles 格式。要使用这个工具,你需要先安装 Node.js 和 Cesium。然后,你可以使用以下命

    2024年02月11日
    浏览(30)
  • 3D Tiles语义分割流水线

    Dylan Chua 和 Anne Lee 开发了一个处理管线,用于对 3D Tiles 中包含的 GL 传输格式 (glTF) 模型进行语义分割。 该管道读取并遍历 3D Tileset,以输出包含元数据的经过转换的划分对象集。 该项目为 3D 语义分割器提供了最小可行产品,作为各种应用程序的概念验证。 他们接受模拟和培

    2024年04月16日
    浏览(39)
  • cesium加载3dtiles倾斜摄影数据

    效果如图 倾斜摄影数据的地址:百度网盘 请输入提取码 提取码:ztde 1.配置nginx,代理3dtiles倾斜摄影数据服务 如我的倾斜摄影数据放在D盘的某个文件夹里面,nginx可以这样配置    2.代码里面3dtiles的url指向倾斜摄影服务地址,同时配置一系列的参数 3dtiles的配置参数如下,可

    2024年02月11日
    浏览(46)
  • 3D Tiles官方示例资源下载链接

    本文列出Cesium官方提供的 3D Tiles 1.0和1.1规范的9个示例切块集(tileset)。 有关如何使用本地服务器托管这些示例的详细信息,请参阅 INSTRUCTIONS.md。 推荐:用 NSDT设计器 快速搭建可编程3D场景。 Metadata Granularities这个3D Tiles 1.1 示例演示了 中元数据在不同粒度级别的使用。 该示

    2024年02月15日
    浏览(42)
  • Cesium 加载3Dtiles数据-最佳方法对比

            Cesium加载空间数据的方法有很多种,网络上关于3Dtiles数据集加载的废话连篇,看着就很无语。这里我本人直抒胸臆,简单介绍一下数据的加载方式。         先打开Cesium的深度检测的开关,也可以不打开。                完成以上步骤后,利用Cesium的readyPromi

    2024年02月11日
    浏览(93)
  • Cesium加载城市白膜数据3DTiles

    首先,城市建筑数据可以去网上扒一些,拿到的都是 shp格式 的文件。 shp文件可以很方便的转为 Geojson文件 ,然后再通过Cesium导入也可以实现效果。效果如下所示: 图中就是用Geojson数据添加到地图中,大约有117000条数据,加载的效果还可以。但是数据量大加载时间会比较长

    2024年02月11日
    浏览(59)
  • Unity Cesium 加载本地数据(DEM、DOM)

    cesium for unity自带数据源,联网状态下能够实时加载影响和地型等数据,十分方便。但不少项目需要离线使用,而官方只给出api并没有给出示例资源,这就需要我们自己处理数据进行加载。 加载本地数据的原理非常简单,将资源转换到可用格式,然后发布成链接的形式,然后

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包