Cesium和thingjs有哪些关系？
一直以来thingjs网站很多用户都是通过搜索Cesium过来的，为何？Cesium和物联网可视化开大平台有什么关系呢？且听我一一道来~
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。
而可视化开发平台thingjs使用当今最热门的 Javascript语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发，搭载丰富插件后，也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。
物联网分为感知层、网络层、应用层。应用层涉及到 3D 界面的开发，对大部分企业来说都有一定挑战。ThingJS 可以极大降低 3D界面开发的成本。
ThingJS 基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
ThingJS提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
ThingJS提供如下相关组件和工具供用户使用：
CityBuilder：聚焦城市的 3D 地图搭建工具，打造你的 3D 城市地图。
CamBuilder：简单、好用、免费的 3D 场景搭建工具。
ThingPano：全景图制作工具，轻松制作并开发全景图应用，实现 3D 宏观场景和全景微观场景的无缝融合。
ThingDepot：上万种模型，数十个行业，自主挑选，一次制作多次复用。
thingjs的使命：人人都能用3D，即使小白一枚，也能通过拖拽模型，简单编写代码实现可视化开发，前端工程师更是目标人群。建议你大胆一试~
通过url创建Map .js
/**
* 该示例介绍了通过CityBuilder转出的url创建的地图如何进行二次开发
*/
var app = new THING.App();
app.background = [0, 0, 0];
// 引用地图组件脚本
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/upload/cjs/20190730100426198_24972',
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;
});
});
// 先根据名称查询图层对象 名称是在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;
}
});
// 根据名称查询图层对象
var bankLayer = app.query('bank')[0];
var originSize = bankLayer.renderer.size;
new THING.widget.Button('修改点尺寸', function () {
if (bankLayer.renderer.size === originSize) {
// 修改整个图层对象的尺寸
bankLayer.renderer.size = 30;
}
else {
bankLayer.renderer.size = originSize;
}
});
// 根据名称查询图层对象
var buildingLayer = app.query('building')[0];
var originHeight = buildingLayer.objects[0].height;
new THING.widget.Button('修改建筑高度', function () {
// 修改第一个对象的高度
if (buildingLayer.objects[0].height === originHeight) {
buildingLayer.objects[0].height = 500;
}
else {
buildingLayer.objects[0].height = originHeight;
}
});
}
});
});