泛光特效--制作详解

落日映苍穹つ 2023-06-04 12:54 354阅读 0赞

# 首先上个效果图： #

![效果图][1240]

步骤讲解：

### 一、处理数据/准备数据 ###

1.  使用cesiumlab2处理数据。  
    ![处理数据界面][1240 1]

a. 选取需要处理的shp文件

![选取输入文件（shp文件）][shp]

b. 简单设置贴图效果

![设置参数][1240 2]

c. 点击确定，开始处理数据。

![处理数据][1240 3]

d. 当数据处理完之后可在分发服务的瓦片服务中看到刚才的处理之后开起的服务。

![分发服务][1240 4]

e. 点击对应的服务路径名称，可以直接在cesiumlab2中的三维可视中打开服务预览。复制按钮可以复制服务路径的json文件。

![泛光效果][1240 5]

（注）如果地图影像太亮可以试一下在线的百度暗系影像效果更佳

![百度暗系影像泛光][1240 6]

f. 进入三维可视界面之后可以缩放界面进行查看操作泛光效果。如果需要查看实现代码可以在左侧的资源控制树中选中一级目录右键查看代码。就会在示例中打开。

![查看加载代码][1240 7]

g. 示例中查看刚才处理效果的代码

![示例编辑器中查看效果和代码][1240 8]

左边的代码就是编写右侧效果的代码。可以自己编写修改参数进行查看。

代码如下：

<!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">
        <meta name="xbsj-labels" content="Earth起步"></meta>
        <title>3dtiles数据加载</title>
        
        <script src="../../XbsjEarth/XbsjEarth.js"></script>
        <script src="scripts/vue.min.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <div id="vueApp" style="width:100%; height: 100%; background: grey; position: relative;">
            <earth-comp></earth-comp>
        </div>
        <script>
            // 1 创建Earth的vue组件
            var EarthComp = {
                template: `
                    <div style="width: 100%; height: 100%">
                        <div ref="earthContainer" style="width: 100%; height: 100%">
                        </div>
                    </div>
                `,
                data() {
                    return {
                       _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                   };
                },
                // 1.1 资源加载
                mounted() {
                    // 1.2.1 创建地球
                    var earth = new XE.Earth(this.$refs.earthContainer);
                    // 1.2.3 创建Tileset
                    earth.xbsjFromJSON({
        "sceneTree": {
            "root": {
                "children": [
                    {
                        "title": "新建场景",
                        "isSelected": true,
                        "children": [
                            {
                                "czmObject": {
                                    "xbsjType": "Tileset",
                                    "xbsjGuid": "206527cc-4611-4b77-85f8-cac3af4b0965",
                                    "name": "新建建筑物轮廓服务",
                                    "url": "http://localhost:9000/model/455fbd30ce1811e9a5d30b0117173168/tileset.json",
                                    "lightColor": null,
                                    "specularEnvironmentMaps": null,
                                    "xbsjPosition": [
                                        2.119000082934181,
                                        0.5436740766788617,
                                        -2.7152485655831642e-9
                                    ],
                                    "xbsjClippingPlanes": {}
                                }
                            },
                            {
                                "czmObject": {
                                    "xbsjType": "Imagery",
                                    "xbsjGuid": "be719366-30b7-4159-bfb2-eb072d6b8ea9",
                                    "name": "百度暗色风格",
                                    "rectangle": null,
                                    "xbsjImageryProvider": {
                                        "XbsjImageryProvider": {
                                            "url": "http://api0.map.bdimg.com/customimage/tile?=&x={x}&y={y}&z={z}&scale=1&customid=midnight",
                                            "srcCoordType": "BD09",
                                            "rectangle": null
                                        },
                                        "UrlTemplateImageryProvider": {
                                            "rectangle": null
                                        },
                                        "WebMapTileServiceImageryProvider": {
                                            "rectangle": null
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        },
        "cameraViewManager": {
            "lastView": {
                "position": [
                    2.1200531386907837,
                    0.5454337607889492,
                    427.0482324381678
                ],
                "rotation": [
                    2.0976764731786357,
                    -0.23562847749061233,
                    0.0026431274644371783
                ],
                "fov": 1.0471975511965976,
                "near": 0.1,
                "far": 10000000000
            }
        }
    });
                    window.earth = earth; // only for Debug
                    // 1.2.5 变量记录
                    this._earth = earth;
                },
                // 1.2 资源销毁
                beforeDestroy() {
                    // vue程序销毁时，需要清理相关资源
                    this._disposers.forEach(d => d());
                    this._disposers.length = 0;
                    this._earth = this._earth && this._earth.destroy();
                },
            }
            // 2 创建vue程序
            // XE.ready()用来加载Cesium.js等相关资源
            XE.ready().then(() => {
                var app = new Vue({
                    el: '#vueApp',
                    components: {
                        EarthComp,
                    },
                });
                // only for Debug
                window.app = app;
            });
        </script>
    </body>
    </html>

如果想了解示例编辑器如果操作，可以看下这篇文章的介绍：[传送门][Link 1]

到此泛光特效的制作和展示就讲完了。

转载于:https://www.cnblogs.com/justyouadmin/p/11453306.html

[1240]: /images/20230601/53456a9615674c40ad224732b4a49893.png
[1240 1]: /images/20230601/ef7f2e948cdb4611a9af45837c8d6fde.png
[shp]: /images/20230601/336a28f945dd4f0aa6505886a69a0dcf.png
[1240 2]: /images/20230601/c7457be316c143e09b67525769cfd6b0.png
[1240 3]: /images/20230601/636deef814e34c1185f76a681a29d4d0.png
[1240 4]: /images/20230601/4abe50e621114dd48b78fbb27d12cbf3.png
[1240 5]: /images/20230601/b1fb14ef6f874a98b6f874b9999e939b.png
[1240 6]: /images/20230601/7b785490c1064541bb7e3d9af23049be.png
[1240 7]: /images/20230601/1764aebbde904725a2410e51e3975afd.png
[1240 8]: /images/20230601/f0c8688d43e148968f9bca96874830e8.png
[Link 1]: https://github.com/cesiumlab/XbsjEarthUI/wiki/%E7%A4%BA%E4%BE%8B%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97