Cesium|xt3d发光线

作者：羊村懒王 | 2024-02-18 17:45:48
踩
Cesium|xt3d发光线
效果
代码
预览地址
效果

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium|xt3d</title>
    <!-- 引入Cesium -->
    <script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

    <!--  引入xt3d -->
    <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
    <style>
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.addData();
                this.setView();
            },

            //初始化viewer
            initViewer(el) {
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: false,
                    shouldAnimate: false,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                });
                this.viewer.imageryLayers.removeAll(true); //删除所有底图 
                //是否开启抗锯齿
                this.viewer.scene.fxaa = true;
                this.viewer.scene.postProcessStages.fxaa.enabled = true;

            },

            //添加数据
            addData() {
                this.loadBuildData();
                this.addPolyline2();
                this.addPolyline3();
            },

            addPolyline2() {
                let blueMaterial = new xt3d.PolylineObject.PolylineLightingMaterialProperty(Cesium.Color.BLUE);
                let promise = Cesium.GeoJsonDataSource.load('/data.xt3d.cn/assets/data/nanshan/nanshan-road2.geojson');
                promise.then((dataSource) => {
                    this.viewer.dataSources.add(dataSource);
                    let values = dataSource.entities.values;

                    for (let i = 0; i < values.length; i++) {
                        let line = values[i];
                        line.polyline.material = blueMaterial;
                        line.polyline.width = 12;
                    }
                }).otherwise(function(error) {
                    console.log(error)
                });
            },

            addPolyline3() {
                let yellowMaterial = new xt3d.PolylineObject.PolylineLightingMaterialProperty(Cesium.Color.GREEN);
                let promise = Cesium.GeoJsonDataSource.load('/data.xt3d.cn/assets/data/nanshan/nanshan-road3.geojson');
                promise.then((dataSource) => {
                    this.viewer.dataSources.add(dataSource);
                    let values = dataSource.entities.values;

                    for (let i = 0; i < values.length; i++) {
                        let line = values[i];
                        line.polyline.material = yellowMaterial;
                        line.polyline.width = 12;
                    }
                }).otherwise(function(error) {
                    console.log(error)
                });
            },

            //加载建筑物数据
            loadBuildData() {
                let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                    url: "/data.xt3d.cn/assets/data/nanshan/nanshan_buildings/tileset.json"
                }));
                tileset.readyPromise.then((tileset) => {
                    let cs = new xt3d.BuildingEffects.CustomShaderEffect(this.viewer, tileset, {

                        color: '0.2, 0.5, 1.0, 1.0', //颜色 rgba 浮点型 
                        glowRange: true, //是否显示光环
                        glowRangeHeight: '100.0', //光环范围 浮点型
                    });
                }).otherwise(function(error) {
                    console.error(error);
                });
            },


            setView() {
                this.viewer.scene.camera.setView({
                    duration: 1,
                    destination: {
                        x: -2393136.718688123,
                        y: 5388303.360535788,
                        z: 2427933.904642619
                    },
                    orientation: {
                        heading: 4.862410255922509,
                        pitch: -0.8475721912402765,
                        roll: 6.279642069706021
                    }
                });
            },

            destroy() {
                this.viewer.entities.removeAll();
                this.viewer.imageryLayers.removeAll(true);
                this.viewer.destroy();
            }
        }

        xt3dInit.init("map3d");
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
预览地址

xt3d 在线预览地址
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/109517