cesium-study
/
78.简版点击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" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>

    <script>

        // A simple demo of 3D Tiles feature picking with hover and select behavior
        var viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=0702d09e30dca11ed07ba4cec6d6bdac',
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            }),
            animation: false, //动画控制，默认true （图中1）
            baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true  （图中6）
            fullscreenButton: true,//全屏按钮,默认显示true  （图中4）
            geocoder: false,//地名查找,默认true  （图中9）
            timeline: false,//时间线,默认true  （图中3）
            vrButton: false,//双屏模式,默认不显示false
            homeButton: true,//主页按钮，默认true  （图中8）
            infoBox: false,//点击要素之后显示的信息,默认true
            selectionIndicator: true//选中元素显示,默认true
        });
        //深度测试
        viewer.scene.globe.depthTestAgainstTerrain = true;


        // 设置瓦片
        var tileset = new Cesium.Cesium3DTileset({
            //   url: Cesium.IonResource.fromAssetId(75343),
            //  url: '测试辅助文件/测试小模型/tileset.json', //数据路径
            // url: '测试辅助文件/Lab导出的P3D模型/tileset.json', //数据路径
            url: '测试辅助文件/small3dtiles/tileset.json', //数据路径
        });
        viewer.scene.primitives.add(tileset);

        //定位模型
        var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), 10);
        viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 0.1 });

        let 需要高亮的模型名称 = [];

        // Silhouette a feature on selection and show metadata in the InfoBox.
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

            // Pick a new feature
            var pickedFeature = viewer.scene.pick(movement.position);
            if (!Cesium.defined(pickedFeature)) {
                // clickHandler(movement);
                return;
            }

            // Set feature infobox description
            var featureName = pickedFeature.getProperty("name");
            高亮(featureName);
            // 需要高亮的模型名称.push(featureName);
            // //颜色修改
            // pickedFeature.color = Cesium.Color.LIME;
            console.log(featureName);

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


        let 所有的Feature = [];


        tileset.tileLoad.addEventListener(function (tile) {
            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));
            }

        });


        function 高亮(modelName) {
            for (i in 所有的Feature) {
                if (所有的Feature[i].getProperty("name") == modelName) {
                    所有的Feature[i].color = Cesium.Color.LIME;
                }
            }
        }
        alert('四处查看并且点击模型');

    </script>
</body>

</html>