首先上個效果圖：
步驟講解：
一、處理數據/准備數據
- 使用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>
如果想了解示例編輯器如果操作，可以看下這篇文章的介紹：傳送門
到此泛光特效的制作和展示就講完了。