cesium-study
/
16.官网化工厂案例.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>
        // Power Plant design model provided by Bentley Systems
        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
        });
        var scene = viewer.scene;

        var tileset = scene.primitives.add(
            new Cesium.Cesium3DTileset({
                url: Cesium.IonResource.fromAssetId(8564),
               // url: '测试辅助文件/测试小模型/tileset.json', //数据路径
            })
        );

        tileset.readyPromise
            .then(function (tileset) {
                viewer.zoomTo(
                    tileset,
                    new Cesium.HeadingPitchRange(
                        0.5,
                        -0.2,
                        tileset.boundingSphere.radius * 4.0
                    )
                );
            })
            .otherwise(function (error) {
                console.log(error);
            });

        tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;

        var selectedFeature;
        var picking = true;

        //Sandcastle.addToggleButton("Per-feature selection", false, function (
        //    checked
        //) {
        //    picking = checked;
        //    if (!picking) {
        //        unselectFeature(selectedFeature);
        //    }
        //});

        function selectFeature(feature) {
            var element = feature.getProperty("element");
            setElementColor(element, Cesium.Color.YELLOW);
            selectedFeature = feature;
        }

        function unselectFeature(feature) {
            if (!Cesium.defined(feature)) {
                return;
            }
            var element = feature.getProperty("element");
            setElementColor(element, Cesium.Color.WHITE);
            if (feature === selectedFeature) {
                selectedFeature = undefined;
            }
        }

        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        handler.setInputAction(function (movement) {
            if (!picking) {
                return;
            }

            var feature = scene.pick(movement.endPosition);

            unselectFeature(selectedFeature);

            if (feature instanceof Cesium.Cesium3DTileFeature) {
                selectFeature(feature);
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // In this tileset every feature has an "element" property which is a global ID.
        // This property is used to associate features across different tiles and LODs.
        // Workaround until 3D Tiles has the concept of global batch ids: https://github.com/CesiumGS/3d-tiles/issues/265
        var elementMap = {}; // Build a map of elements to features.
        var hiddenElements = [
            112001,
            113180,
            131136,
            113167,
            71309,
            109652,
            111178,
            113156,
            113170,
            124846,
            114076,
            131122,
            113179,
            114325,
            131134,
            113164,
            113153,
            113179,
            109656,
            114095,
            114093,
            39225,
            39267,
            113149,
            113071,
            112003,
            39229,
            113160,
            39227,
            39234,
            113985,
            39230,
            112004,
            39223,
        ];

        function getElement(feature) {
            return parseInt(feature.getProperty("element"), 10);
        }

        function setElementColor(element, color) {
            var featuresToColor = elementMap[element];
            var length = featuresToColor.length;
            for (var i = 0; i < length; ++i) {
                var feature = featuresToColor[i];
                feature.color = Cesium.Color.clone(color, feature.color);
            }
        }

        function unloadFeature(feature) {
            unselectFeature(feature);
            var element = getElement(feature);
            var features = elementMap[element];
            var index = features.indexOf(feature);
            if (index > -1) {
                features.splice(index, 1);
            }
        }

        function loadFeature(feature) {
            var element = getElement(feature);
            var features = elementMap[element];
            if (!Cesium.defined(features)) {
                features = [];
                elementMap[element] = features;
            }
            features.push(feature);

            if (hiddenElements.indexOf(element) > -1) {
                feature.show = false;
            }
        }

        function processContentFeatures(content, callback) {
            var featuresLength = content.featuresLength;
            for (var i = 0; i < featuresLength; ++i) {
                var feature = content.getFeature(i);
                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);
            }
        }

        tileset.tileLoad.addEventListener(function (tile) {
            processTileFeatures(tile, loadFeature);
        });

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


    </script>
</body>
</html>