Cesium加载3D Tiles数据

liuccn
已于 2022-07-16 19:18:12 修改
阅读量3.4k
点赞数
CC 4.0 BY-SA版权
分类专栏： Cesium 文章标签： 3d cesium
于 2022-07-16 19:16:59 首次发布
本文链接：https://blog.youkuaiyun.com/lc_2014c/article/details/125823852
Cesium 专栏收录该内容
10 篇文章
订阅专栏
使用原生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>
实现效果

在这里插入图片描述