#前端開發##3D可視化##物聯網#
- 明確虛擬場景的位置
- Citybuilder導出二次開發
- 基礎參數配置與修改
CityBuilder(城市級場景搭建工具)使用起來足夠簡單,非常符合設計人員的使用習慣,那麼,辛辛苦苦做好的城市級場景,如何交付給開發,在後續的環節中靈活使用?
ThingJS平臺早就考慮到了這個問題,統一了平臺數據,支持CityBuilder轉出url;平臺加載地圖組件之後,即可輕鬆二次開發。下面我們就來解析使用步驟,有任何問題請留言。
明確虛擬場景的位置
三維地球立足於世界座標系,城市級或園區級場景會選中實際地點進行加載,這裏需要開發人員修改app.background的三點座標,提供精準的地圖定位。
var app = new THING.App();
app.background = [0, 0, 0];
Citybuilder導出二次開發
動態加載地圖組件腳本之後,可以通過Citybuilder轉出的url創建地圖後進行二次開發,包括添加業務圖層、後臺修改對象參數,示例的說明簡單易懂,讓開發人員更加清楚瞭解功能的價值。更多demo查看進入官網註冊喲!
注意結合CityBuilder地圖工具來使用更方便,設計人員可以利用可視化組件進行圖層樣式設置,支持導入3D建築場景,之後生成項目url導入ThingJS( 物聯網3D可視化PaaS平臺 - 數字孿生可視化平臺),如下圖所示。
// 引用地圖組件腳本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
app.create({
type: 'Map',
// CityBuilder轉出的url
url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
complete: function (event) {
// 在這裏編寫業務代碼
var map = event.object;
// 獲取項目中的瓦片圖層
var baseLayers = map.baseLayers;
// 獲取項目中的業務圖層
var userLayers = map.userLayers;
var buildingLayer = app.query('building')[0];
buildingLayer.on(THING.EventType.DBLClick, function (e) {
let obj = e.object;
app.camera.earthFlyTo({
object: obj
});
});
var toolbarWidth = 250;
var toolbar = new THING.widget.Panel({
hasTitle: true, // 是否有標題
titleText: '圖層列表',
width: toolbarWidth
});
let clientWidth = app.domElement.clientWidth;
toolbar.position = [clientWidth - toolbarWidth - 10, 10];
userLayers.forEach(function (layer) {
var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 綁定回調
button.on('change', function (ev) {
layer.visible = ev;
});
});
基礎參數配置與修改
3D場景內的圖層對象一般在citybuilder提前配置,基礎參數包括名稱、長寬高、顏色等參數,導入thingjs平臺後,直接使用前端代碼進行修改,常見用於線寬度、點尺寸和建築高度。
citybuilder配置參數
ThingJS修改參數代碼
// 先根據名稱查詢圖層對象 名稱是在CityBuilder中配置的圖層的名稱
var primaryRoadLayer = app.query('primary')[0];
var originWidth = primaryRoadLayer.renderer.width;
new THING.widget.Button('修改線寬度', function () {
if (primaryRoadLayer.renderer.width === originWidth) {
primaryRoadLayer.renderer.width = 8;
}
else {
primaryRoadLayer.renderer.width = originWidth;
}
});
ThingJS使用url開發地球場景,結合CityBuilder更加輕鬆,無論是設計師還是開發,都能夠更好地合作,完成3D項目發佈!
關於ThingJS
ThingJS平臺提供物聯網3D可視化組件,讓3D開發更輕鬆!直接Javascript調用3D腳本,基於200個3D開發源碼示例,讓你全面瞭解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效,同20萬個開發者一起成爲數字孿生技術創新者!魔豆花花活動ing,歡迎點擊進入官網>>