官方示例（十二）：網頁加載道路及Geoline開發ThingJS

#前端開發# #交通可視化# #Geoline#

簡介：智慧城市對於我們並不陌生，目前已經有600多個城市平臺智慧化，擁有空、天、地一體化的基礎網絡部署，針對城市交通物理實體對象的仿真模擬也有了長足發展。爲了更逼真的孿生技術應用於交通出行，ThingJS平臺結合物聯網專業領域應用經驗，構建智慧交通場景，加入定製化特效，讓城市交通也有機會展示最好的一面！

體驗見demo鏈接：http://www.thingjs.com/guide/?m=sample

1. 基礎圖層疊加

動態加載地球組件之後，基於地圖Map創建瓦片圖層、道路圖層，進行圖層疊加，主要在業務圖層（即ThingLayer）進行更靈活的二次開發。ThingJS將ThingLayer圖層命名爲roadLayer，指代道路，並將道路圖層添加到地圖Map。

2. 瓦片圖層創建

瓦片圖層是基於底圖的基礎信息，將渲染後的圖片，按照一定的規則結合比例尺切成小的瓦片圖形，最後動態加載瓦片以提升網絡加載效率，利用style參數設置瓦片圖層的樣式，效果更加炫酷哦！

// 創建一個瓦片圖層
    var tileLayer = app.create({
        type: 'TileLayer',
        name: 'tileLayer1',
        url: 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        style: {
            template: CMAP.TileLayerStyle.DARKBLUE // 設置瓦片圖層的樣式爲DARKBLUE
        }
    });

3. ajax開發解析

ThingJS 3D引擎獲取道路圖層後，利用ajax函數，一種創建交互式、快速動態網頁應用的網頁開發技術，在道路圖層創建不同類型的線要素，如像素線、管狀線、片狀線，提供不同的道路視覺，快速創建動態線要素。簡單來說，主要是通過讀取Geojason中的座標及屬性數據開發並渲染所需的線要素。

（1）遍歷地理數據

讀取geojason中的所有數據，根據線路規劃確定對應的線條類型，設置type分類之後，再細化樣式的表達方式。

（2）渲染道路圖層

通過渲染器renderer進行道路圖層渲染，定義貼圖材質Type、線類型lineType、貼圖路徑imageURL，ThingJS的開發邏輯輕鬆調用不用愁；加入動畫特效，設置是否發光以及流動速度，讓地圖更加生動、好看！
全部代碼請參考：http://www.thingjs.com/guide/?m=sample

// 根據不同的type設置不同的GeoLine的樣式
                    if (data.features[i].properties.type == '0') {
                        road = app.create({
                            type: 'GeoLine',
                            name: 'road' + i,
                            coordinates: data.features[i].geometry.coordinates,
                            renderer: {
                                type: 'image', // 貼圖材質
                                lineType: 'Line', // 普通線
                                imageUrl: '/guide/image/uGeo/path.png', // 貼圖路徑
                                effect: true, // 是否開啓發光特效
                                speed: 0.5 // 流動速度
                            }
                        });
                    }

ThingJS之3D場景加載道路融合了api能力，化繁爲簡，開發思路變得簡單！

關於ThingJS

ThingJS平臺提供物聯網3D可視化組件，讓3D開發更輕鬆！直接Javascript調用3D腳本，基於200個3D開發源碼示例，讓你全面瞭解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，同20萬個開發者一起成爲數字孿生技術創新者！