cesium-study
/
23.官网点击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>
        var imageryProvider = 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
        });


        // A simple demo of 3D Tiles feature picking with hover and select behavior
        var viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: imageryProvider,
            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 initialPosition = Cesium.Cartesian3.fromDegrees(
            116.3904715,
            39.90571,
            753
        );
        var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
            21.27879878293835,
            -21.34390550872461,
            0.0716951918898415
        );
        viewer.scene.camera.setView({
            destination: initialPosition,
            orientation: initialOrientation,
            endTransform: Cesium.Matrix4.IDENTITY,
        });

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


        // return;


        // 鼠标扫过，显示名称feature name，用的是html的方式
        var nameOverlay = document.createElement("div");
        viewer.container.appendChild(nameOverlay);
        nameOverlay.className = "backdrop";
        nameOverlay.style.display = "none";
        nameOverlay.style.position = "absolute";
        nameOverlay.style.bottom = "0";
        nameOverlay.style.left = "0";
        nameOverlay.style["pointer-events"] = "none";
        nameOverlay.style.padding = "4px";
        nameOverlay.style.backgroundColor = "white";

        //当前选中的元素
        var selected = {
            feature: undefined,
            originalColor: new Cesium.Color(),
        };

        // An entity object which will hold info about the currently selected feature for infobox display
        //一个实体对象，它将保存有关当前所选功能的信息以供信息框显示
        var selectedEntity = new Cesium.Entity();

        // Get default left click handler for when a feature is not picked on left click
        //看不懂英问
        var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
        );


        // silhouettes 轮廓 ，
        // If silhouettes are supported, silhouette features in blue on mouse over and silhouette green on mouse click.
        // If silhouettes are not supported, change the feature color to yellow on mouse over and green on mouse click.
        if (false && Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
            alert("支持轮廓显示");
            // Silhouettes are supported
            var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
            silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
            silhouetteBlue.uniforms.length = 0.01;
            silhouetteBlue.selected = [];

            var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
            silhouetteGreen.uniforms.color = Cesium.Color.LIME;
            silhouetteGreen.uniforms.length = 0.01;
            silhouetteGreen.selected = [];

            viewer.scene.postProcessStages.add(
                Cesium.PostProcessStageLibrary.createSilhouetteStage([
                    silhouetteBlue,
                    silhouetteGreen,
                ])
            );

            // Silhouette a feature blue on hover.
            viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
                // If a feature was previously highlighted, undo the highlight
                silhouetteBlue.selected = [];

                // Pick a new feature
                var pickedFeature = viewer.scene.pick(movement.endPosition);
                if (!Cesium.defined(pickedFeature)) {
                    nameOverlay.style.display = "none";
                    return;
                }

                // A feature was picked, so show it's overlay content
                nameOverlay.style.display = "block";
                nameOverlay.style.bottom =
                    viewer.canvas.clientHeight - movement.endPosition.y + "px";
                nameOverlay.style.left = movement.endPosition.x + "px";
                var name = pickedFeature.getProperty("BIN");
                nameOverlay.textContent = name;

                // Highlight the feature if it's not already selected.
                if (pickedFeature !== selected.feature) {
                    silhouetteBlue.selected = [pickedFeature];
                }
            },
                Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            // Silhouette a feature on selection and show metadata in the InfoBox.
            viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                // If a feature was previously selected, undo the highlight
                silhouetteGreen.selected = [];

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

                // Select the feature if it's not already selected
                if (silhouetteGreen.selected[0] === pickedFeature) {
                    return;
                }

                // Save the selected feature's original color
                var highlightedFeature = silhouetteBlue.selected[0];
                if (pickedFeature === highlightedFeature) {
                    silhouetteBlue.selected = [];
                }

                // Highlight newly selected feature
                silhouetteGreen.selected = [pickedFeature];

                // Set feature infobox description
                var featureName = pickedFeature.getProperty("name");
                selectedEntity.name = featureName;
                selectedEntity.description =
                    'Loading <div class="cesium-infoBox-loading"></div>';
                viewer.selectedEntity = selectedEntity;
                selectedEntity.description =
                    '<table class="cesium-infoBox-defaultTable"><tbody>' +
                    "<tr><th>BIN</th><td>" +
                    pickedFeature.getProperty("BIN") +
                    "</td></tr>" +
                    "<tr><th>DOITT ID</th><td>" +
                    pickedFeature.getProperty("DOITT_ID") +
                    "</td></tr>" +
                    "<tr><th>SOURCE ID</th><td>" +
                    pickedFeature.getProperty("SOURCE_ID") +
                    "</td></tr>" +
                    "</tbody></table>";
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        } else {
            // Silhouettes are not supported. Instead, change the feature color.
            alert("默认设置的不支持轮廓");
            // Information about the currently highlighted feature
            var highlighted = {
                feature: undefined,
                originalColor: new Cesium.Color(),
            };

            // Color a feature yellow on hover.
            viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
                //movement是鼠标的起始位置和终止位置。
                //alert(JSON.stringify(movement));
                // If a feature was previously highlighted, undo the highlight
                //如果元素还是老的，就取消高亮
                //Cesium.defined 有没有定义，或者说是不是空
                if (Cesium.defined(highlighted.feature)) {
                    highlighted.feature.color = highlighted.originalColor;
                    highlighted.feature = undefined;
                }
                // Pick a new feature
                //大部分时候pickedFeature 都是undefined
                var pickedFeature = viewer.scene.pick(movement.endPosition);
                //alert(!Cesium.defined(pickedFeature));
                if (!Cesium.defined(pickedFeature)) {
                    //如果
                    nameOverlay.style.display = "none";
                    return;
                }
                // A feature was picked, so show it's overlay content
                //如果选中了元素，就显示到上下文中
                nameOverlay.style.display = "block";
                nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";//这个计算位置参考一下。
                nameOverlay.style.left = movement.endPosition.x + "px";
                var name = pickedFeature.getProperty("name");
                if (!Cesium.defined(name)) {
                    name = pickedFeature.getProperty("id");
                }
                //这个可以隐藏，但是只能一层
                //pickedFeature.show = false;
                nameOverlay.textContent = name;
                console.log(name);
                // nameOverlay.textContent = pickedFeature;
                // nameOverlay.textContent = JSON.stringify(pickedFeature);
                // Highlight the feature if it's not already selected.
                if (pickedFeature !== selected.feature) {
                    highlighted.feature = pickedFeature;
                    Cesium.Color.clone(
                        pickedFeature.color,
                        highlighted.originalColor
                    );
                    pickedFeature.color = Cesium.Color.YELLOW;
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            // Color a feature on selection and show metadata in the InfoBox.
            //左键变绿色
            viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                // If a feature was previously selected, undo the highlight
                if (Cesium.defined(selected.feature)) {
                    selected.feature.color = selected.originalColor;
                    selected.feature = undefined;
                }
                // Pick a new feature
                var pickedFeature = viewer.scene.pick(movement.position);
                if (!Cesium.defined(pickedFeature)) {
                    clickHandler(movement);
                    return;
                }
                // Select the feature if it's not already selected
                if (selected.feature === pickedFeature) {
                    return;
                }
                selected.feature = pickedFeature;
                // Save the selected feature's original color
                if (pickedFeature === highlighted.feature) {
                    Cesium.Color.clone(
                        highlighted.originalColor,
                        selected.originalColor
                    );
                    highlighted.feature = undefined;
                } else {
                    Cesium.Color.clone(pickedFeature.color, selected.originalColor);
                }
                // Highlight newly selected feature
                pickedFeature.color = Cesium.Color.LIME;
                // Set feature infobox description
                var featureName = pickedFeature.getProperty("name");
                selectedEntity.name = featureName;
                selectedEntity.description =
                    'Loading <div class="cesium-infoBox-loading"></div>';
                viewer.selectedEntity = selectedEntity;
                selectedEntity.description =
                    '<table class="cesium-infoBox-defaultTable"><tbody>' +
                    "<tr><th>BIN</th><td>" +
                    pickedFeature.getProperty("BIN") +
                    "</td></tr>" +
                    "<tr><th>DOITT ID</th><td>" +
                    pickedFeature.getProperty("DOITT_ID") +
                    "</td></tr>" +
                    "<tr><th>SOURCE ID</th><td>" +
                    pickedFeature.getProperty("SOURCE_ID") +
                    "</td></tr>" +
                    "<tr><th>Longitude</th><td>" +
                    pickedFeature.getProperty("longitude") +
                    "</td></tr>" +
                    "<tr><th>Latitude</th><td>" +
                    pickedFeature.getProperty("latitude") +
                    "</td></tr>" +
                    "<tr><th>Height</th><td>" +
                    pickedFeature.getProperty("height") +
                    "</td></tr>" +
                    "<tr><th>Terrain Height (Ellipsoid)</th><td>" +
                    pickedFeature.getProperty("TerrainHeight") +
                    "</td></tr>" +
                    "</tbody></table>";
            },
                Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }


    </script>
</body>

</html>