首先上個(gè)效果圖：
步驟講解：
一、處理數(shù)據(jù)/準(zhǔn)備數(shù)據(jù)
1. 使用cesiumlab2處理數(shù)據(jù)啄踊。
a.選取需要處理的shp文件
b. 簡(jiǎn)單設(shè)置貼圖效果
c. 點(diǎn)擊確定遭殉，開(kāi)始處理數(shù)據(jù)。
d. 當(dāng)數(shù)據(jù)處理完之后可在分發(fā)服務(wù)的瓦片服務(wù)中看到剛才的處理之后開(kāi)起的服務(wù)避凝。
e. 點(diǎn)擊對(duì)應(yīng)的服務(wù)路徑名稱舞萄，可以直接在cesiumlab2中的三維可視中打開(kāi)服務(wù)預(yù)覽。復(fù)制按鈕可以復(fù)制服務(wù)路徑的json文件管削。
（注）如果地圖影像太亮可以試一下在線的百度暗系影像效果更佳
f. 進(jìn)入三維可視界面之后可以縮放界面進(jìn)行查看操作泛光效果倒脓。如果需要查看實(shí)現(xiàn)代碼可以在左側(cè)的資源控制樹(shù)中選中一級(jí)目錄右鍵查看代碼。就會(huì)在示例中打開(kāi)含思。
g. 示例中查看剛才處理效果的代碼
左邊的代碼就是編寫右側(cè)效果的代碼崎弃「饰睿可以自己編寫修改參數(shù)進(jìn)行查看。
代碼如下：
```
<!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數(shù)據(jù)加載</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 創(chuàng)建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的相關(guān)變量放在vue中饲做，必須使用下劃線作為前綴线婚！
? ? ? ? ? ? ? ? };
? ? ? ? ? ? },
? ? ? ? ? ? // 1.1 資源加載
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? // 1.2.1 創(chuàng)建地球
? ? ? ? ? ? ? ? var earth = new XE.Earth(this.$refs.earthContainer);
? ? ? ? ? ? ? ? // 1.2.3 創(chuàng)建Tileset
? ? ? ? ? ? ? ? earth.xbsjFromJSON({
? ? "sceneTree": {
? ? ? ? "root": {
? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "title": "新建場(chǎng)景",
? ? ? ? ? ? ? ? ? ? "isSelected": true,
? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "czmObject": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "xbsjType": "Tileset",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "xbsjGuid": "206527cc-4611-4b77-85f8-cac3af4b0965",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "新建建筑物輪廓服務(wù)",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "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": "百度暗色風(fēng)格",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "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程序銷毀時(shí)，需要清理相關(guān)資源
? ? ? ? ? ? ? ? this._disposers.forEach(d => d());
? ? ? ? ? ? ? ? this._disposers.length = 0;
? ? ? ? ? ? ? ? this._earth = this._earth && this._earth.destroy();
? ? ? ? ? ? },
? ? ? ? }
? ? ? ? // 2 創(chuàng)建vue程序
? ? ? ? // XE.ready()用來(lái)加載Cesium.js等相關(guān)資源
? ? ? ? XE.ready().then(() => {
? ? ? ? ? ? var app = new Vue({
? ? ? ? ? ? ? ? el: '#vueApp',
? ? ? ? ? ? ? ? components: {
? ? ? ? ? ? ? ? ? ? EarthComp,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? });
? ? ? ? ? ? // only for Debug
? ? ? ? ? ? window.app = app;
? ? ? ? });
? ? </script>
</body>
</html>
```
如果想了解示例編輯器如果操作盆均，可以看下這篇文章的介紹：傳送門
到此泛光特效的制作和展示就講完了塞弊。
