cesium-study
/
69.primitive操作.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.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        //     url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        //     layer: "tdtAnnoLayer",
        //     style: "default",
        //     format: "image/jpeg",
        //     tileMatrixSetID: "GoogleMapsCompatible"
        // }));
        ///////////////////////
        //添加文字
        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 carPrimitive = scene.primitives.add(Cesium.Model.fromGltf({
            url: '测试辅助文件/glTF/测试场景含BPR/1.gltf',
            modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransforms),
            minimumPixelSize: 0,
            scale: 1.0
        }));
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 200),
            duration: 1,
        });

        CreateTestBtn("show-scene.primitives-false", () => {
            scene.primitives.show = false;
        });

        CreateTestBtn("show-scene.primitives-true", () => {
            scene.primitives.show = true;
        });
        CreateTestBtn("获取 primitives 中的成员数量", () => {
            console.log(scene.primitives.length);
        });

        CreateTestBtn("销毁", () => {
            scene.primitives.destroy();
            console.log(scene.primitives.length);
        });
        CreateTestBtn("获取索引1中的元素-隐藏起来", () => {
            scene.primitives.get(1).show = !scene.primitives.get(1).show;
        });

        CreateTestBtn("移除 all", () => {
            scene.primitives.removeAll();
        });

        CreateTestBtn("隐藏 Primitive", () => {
            carPrimitive.show = !carPrimitive.show;
        });
        CreateTestBtn("销毁 Primitive", () => {
            carPrimitive.destroy();
        });

        CreateTestBtn("销毁 Primitive", () => {
            carPrimitive.destroy();
        });
    </script>
</body>

</html>