用js的方式使用ThingJS！

ThingJS代碼建立步驟

ThingJS中是如何建立代碼去開發物聯網可視化項目的呢？ThingJS的核心是什麼？寫代碼第一步應該是什麼呢？做爲一個可視化平臺，ThingJS在線開發平臺該如何去使用呢？

ThingJS做爲一個webgl協議標準庫，使用的是前端JavaScript語法，這使得JavaScript中的絕大部分方法在ThingJS中均可以使用，好比循環判斷、function等等，這些在JavaScript中怎麼寫的，在ThingJS中就怎麼寫，因此說ThingJS是面向前端開發人員的3D js 庫，只要會JavaScript，就能很是迅速的入門，尤爲是在JavaScript、java受衆很廣的狀況下，大部分的成尋緣入門ThingJS也會更加輕鬆。這樣不管是讓前端工做人員直接學習ThingJS仍是讓後端java人員來開發這個，都是極爲方便的。

ThingJS核心對象APP

ThingJS的核心對象APP建立方法以下：

var app = new THING.App();

固然，這個是核心對象的建立方法，具體還有加載園區的方式，經過url的方式將園區加載至ThingJS中：

var app = new THING.App({
    url: "models/storehouse"
});

其中的url則是咱們的場景地址，此處爲選填，該地址可寫絕對路徑也可寫相對路徑。有人可能會疑惑這個地址怎麼來的？只須要經過Ctrl + J 這個快捷鍵或者直接點擊園區按鈕，雙擊便可自動生成核心對象APP以及相關URL，固然也能夠不輸入路徑，在你須要的時候經過  app.create  建立園區物體，從而加載園區，以下例：

var app = new THING.App();
var obj = app.create({
    type: "Campus",
    url: "models/storehouse/",
    complete: function() {
    console.log("Campus created: " + this.id);
    }
});

 

除了園區的加載，地球的加載又是不一樣的代碼，可是使用起來是如出一轍的， 使用Ctrl + K 或者是直接點擊地圖按鈕，雙擊地圖便可引用對應場景，地圖與園區在引用上還有些不一樣，地球須要使用到插件：

https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js

具體引用方法以下：

// 加載地圖
var app = new THING.App();
// 設置app背景爲黑色
app.background = [0, 0, 0];
// 引用地圖組件腳本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js'], function () {
    app.create({
        type: 'Map',
        // 地圖場景名：test
        url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TkRBd01ERT1DaXR5QnVpbGRlckAyMDE5',
        complete: function (event) {
            console.log(event.object.userLayers.length);
        }
    });
});

其中URL則是咱們經過citybuilder搭建的3D城市地圖場景了，那麼是否可以既顯示園區場景又顯示三維城市地圖場景呢？這個是須要方法控制的，若是直接兩個合在一塊兒，那麼是不可能遺棄展現的，須要用到ThingJS官方示例的場景切換功能。下個文章咱們再來介紹如何結合園區與地圖！

 

ThingJS，用js去開發三維可視化場景！