master

分支 (1)

管理

管理

master

cesium-study
/
76.3dtiles相关.html

<!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>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="cesiumContainer"></div>
    <div id='tool' style="float:left;position:absolute;left:10px;top:10px;"></div>
    <script src='./js/baiduMap.js'> </script>
    <script src='./js/CreateTestBtn.js'> </script>
    <script>


        var imageryProvider = new BaiduImageryProvider({
            url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
        });
        //加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
        var imageryProvider1 = new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/png",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        });

        viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: imageryProvider
        });
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });

        //加载ghTF

        let scene = viewer.scene;
        //位置
        let position = Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10);
        let hpRoll = new Cesium.HeadingPitchRoll();
        let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
        //添加模型


        let tileset;

        let cesium3DTileset = new Cesium.Cesium3DTileset({
           // url: '测试辅助文件/测试小模型/tileset.json',
            url: '测试辅助文件/small3dtiles/tileset.json', //数据路径
            // url: '测试辅助文件/彩版压缩环氧乙烷/tileset.json',
            maximumScreenSpaceError: 20, //最大的屏幕空间误差，数值越小，显示越精细
            maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
            //minimumPixelSize: 500,
        })


        CreateTestBtn("加载模型", () => {
            tileset = viewer.scene.primitives.add(cesium3DTileset);
        });


        CreateTestBtn("定位模型", () => {
            var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), tileset.boundingSphere.radius);
            viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 2 });

        });

        CreateTestBtn("输出cesium3DTileset", () => {
            console.log(cesium3DTileset);

        });
        CreateTestBtn("显示和隐藏", () => {
            cesium3DTileset.show = !cesium3DTileset.show;
        });

        CreateTestBtn("修改所有的颜色", () => {
            tileset.style = new Cesium.Cesium3DTileStyle({
                color: 'color("red")',
            });

        });

        CreateTestBtn("tileVisible事件", () => {
            // tileset.tileVisible.addEventListener(function (tile) {
            //     if (tile.content instanceof Cesium.Batched3DModel3DTileContent) {
            //         console.log( 'A Batched 3D Model tile is visible.');
            //     }
            // });
            // return;
            // Apply a red style and then manually set random colors for every other feature when the tile becomes visible.
            // tileset.style = new Cesium.Cesium3DTileStyle({
            //     color: 'color("red")',
            // });
            cesium3DTileset.tileVisible.addEventListener(function (tile) {
                var content = tile.content;
                // console.log(content);
                var featuresLength = content.featuresLength;
                for (var i = 0; i < featuresLength; i += 2) {
                    content.getFeature(i).color = Cesium.Color.fromRandom();
                }
            });

        });
        CreateTestBtn("tileLoad 事件", () => {
            cesium3DTileset.tileLoad.addEventListener(function (tile) {
                var content = tile.content;
                // console.log(content);
                var featuresLength = content.featuresLength;
                for (var i = 0; i < featuresLength; i += 2) {
                    content.getFeature(i).color = Cesium.Color.fromRandom();
                }
            });

        });
        CreateTestBtn("tileUnload事件", () => {
            cesium3DTileset.tileUnload.addEventListener(function (tile) {
                console.log('A tile was unloaded from the cache.');
            });
            console.log('估计要卸载的时候才有用了');
        });

        CreateTestBtn("当前视图需要的瓦片，完全加载事件。", () => {
            cesium3DTileset.allTilesLoaded.addEventListener(function () {
                console.log('All tiles are loaded!');
            });
        });

        CreateTestBtn("Cesium3DTileStyle样式定义-失败-估计和建筑有关", () => {

            cesium3DTileset.style = new Cesium.Cesium3DTileStyle({
                color: {
                    conditions: [
                        ['${Height} >= 100', 'color("purple", 0.5)'],
                        ['${Height} >= 50', 'color("red")'],
                        ['true', 'color("blue")']
                    ]
                },
                show: '${Height} > 0',
                meta: {
                    description: '"Building id ${id} has height ${Height}."'
                }
            });


        });

        CreateTestBtn("tileset.properties", () => {
            console.log(cesium3DTileset.properties);
            var properties = cesium3DTileset.properties;
            if (Cesium.defined(properties)) {
                for (var name in properties) {
                    console.log(properties[name]);
                }
            }
        });
        CreateTestBtn("root", () => {
            console.log(cesium3DTileset.root);
            console.log(cesium3DTileset.root.content);//Cesium3DTile.content
        });

        CreateTestBtn("Cesium3DTile.children", () => {
            console.log(cesium3DTileset.root);
            console.log(cesium3DTileset.root.content);//Cesium3DTile.content
            console.log(cesium3DTileset.root.content.featuresLength);//Cesium3DTile.content
        });
        CreateTestBtn("getFeature", () => {


            content = cesium3DTileset.root.children[0];

            console.log(content);

            // content = cesium3DTileset.root.content;
            var featuresLength = content.featuresLength;
            console.log(featuresLength);
            for (var i = 0; i < featuresLength; ++i) {
                var feature = content.getFeature(i);
                callback(feature);
            }


        });


        CreateTestBtn("获取模型名称", () => {
            function processContentFeatures(content, callback) {
                var featuresLength = content.featuresLength;

                for (var i = 0; i < featuresLength; ++i) {
                    var feature = content.getFeature(i);

                    var name = feature.getProperty("name");
                    if (!Cesium.defined(name)) {
                        name = feature.getProperty("id");
                    }
                    console.log(name);
                    callback(feature);
                }

            }

            function processTileFeatures(tile, callback) {
                var content = tile.content;

                var innerContents = content.innerContents;

                if (Cesium.defined(innerContents)) {
                    var length = innerContents.length;

                    for (var i = 0; i < length; ++i) {
                        processContentFeatures(innerContents[i], callback);

                    }

                } else {
                    processContentFeatures(content, callback);

                }

            }

            cesium3DTileset.tileLoad.addEventListener(function (tile) {
                processTileFeatures(tile, function (data) {
                    console.log(data)

                });

            });

            cesium3DTileset.tileUnload.addEventListener(function (tile) {
                processTileFeatures(tile, unloadFeature);

            });

        });


        CreateTestBtn("获取模型属性", () => {
            function processContentFeatures(content, callback) {
                var featuresLength = content.featuresLength;

                for (var i = 0; i < featuresLength; ++i) {
                    var feature = content.getFeature(i);

                    let keys = feature.getPropertyNames();

                    // console.log(keys);
                    for (ff in keys) {
                        console.log(keys[ff] + ' - ' + feature.getProperty(keys[ff]));
                    }
                }
            }

            function processTileFeatures(tile, callback) {
                var content = tile.content;

                var innerContents = content.innerContents;

                if (Cesium.defined(innerContents)) {
                    var length = innerContents.length;

                    for (var i = 0; i < length; ++i) {
                        processContentFeatures(innerContents[i], callback);
                    }

                } else {
                    processContentFeatures(content, callback);

                }

            }

            cesium3DTileset.tileLoad.addEventListener(function (tile) {
                processTileFeatures(tile, function (data) {
                    console.log(data)

                });

            });

            cesium3DTileset.tileUnload.addEventListener(function (tile) {
                processTileFeatures(tile, unloadFeature);

            });

        });

        CreateTestBtn("获取所有的Feature和名称", () => {
            let 所有的Feature = [];


            //只是在首次加载的时候才会调用
            tileset.tileLoad.addEventListener(function (tile) {


                console.log("调用一次tileLoad");
                var featuresLength = tile.content.featuresLength;
                for (var i = 0; i < featuresLength; i += 1) {
                    tile.content.getFeature(i).color = Cesium.Color.LIME;

                    所有的Feature.push(tile.content.getFeature(i));


                    // if (需要高亮的模型名称.includes(content.getFeature(i).getProperty("name"))) {

                    //     content.getFeature(i).color = Cesium.Color.LIME;
                    // }
                }
            });
        });


    </script>
</body>

</html>