泛光特效--制作详解
首先上个效果图：
步骤讲解：
一、处理数据/准备数据
- 使用cesiumlab2处理数据。
a. 选取需要处理的shp文件
b. 简单设置贴图效果
c. 点击确定，开始处理数据。
d. 当数据处理完之后可在分发服务的瓦片服务中看到刚才的处理之后开起的服务。
e. 点击对应的服务路径名称，可以直接在cesiumlab2中的三维可视中打开服务预览。复制按钮可以复制服务路径的json文件。
（注）如果地图影像太亮可以试一下在线的百度暗系影像效果更佳
f. 进入三维可视界面之后可以缩放界面进行查看操作泛光效果。如果需要查看实现代码可以在左侧的资源控制树中选中一级目录右键查看代码。就会在示例中打开。
g. 示例中查看刚才处理效果的代码
左边的代码就是编写右侧效果的代码。可以自己编写修改参数进行查看。
代码如下：
<!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>
<!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
<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>
如果想了解示例编辑器如果操作，可以看下这篇文章的介绍：传送门
到此泛光特效的制作和展示就讲完了。
