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;

}

});

}

});

Cesium和thingjs有哪些关系？相关推荐

WebGL，Cesium以及GeoJSON数据的简单介绍
目录一.WebGL 二.Cesium (1)Cesium:一个用于显示三维地球和地图的开源js库. (2)Cesium的基本功能: (3)cesium的依赖性与技术标准 (4)Cesium与周边产品 ...
Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
进一步学习 Cesium 和 3D Tiles 数据相关
接此: https://blog.csdn.net/bcbobo21cn/article/details/112464630 如下一段代码:也能加载出3D Tiles数据:此段代码和前文的有些相似: ...
Cesium原理篇：7最长的一帧之Entity(上)
之前的最长的一帧系列,我们主要集中在地形和影像服务方面.简单说,之前我们都集中在地球是怎么造出来的,从这一系列开始,我们的目光从GLOBE上解放出来,看看球面上的地物是如何渲染的.本篇也是先开一个头, ...
Cesium应用篇：3控件（3）SelectionIndicator InfoBox
假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州, ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
cesium 知乎_Cesium 源码笔记[2] CesiumWidget模块的实例化过程 ver1.67
四叶小天使! 上承 CesiumWidget实际上和Viewer差不多.以下两句代码用于初始化,效果是差不多的. const widget = new Cesium.CesiumWidget('id选 ...
Cesium基础使用介绍
既然给我发了参与方式,不参加似乎有点不给人面子,反正也没多少人看我的博客,那我就试试吧,也欢迎大家自己参与:2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVo ...
cesium添加填充_cesium实现注记功能
首先,理解几个知识点 #PolygonGraphics(options)感谢以前还不算差的英语,考研71分好像,至少现在读英文API能大概知道什么意思...真的是大概 API的描述:Describes ...
Cesium中的儒略日JulianDate
在天文和卫星轨道计算中,有关儒略日的计算是一个绕不开的话题.本章阐述下Cesium中有关儒略日的处理方法. 涉及到的时间系统,如UTC,TAI等,这里不再详细阐述,读者自行阅读专业书籍或者网上查询. ...

Cesium和thingjs有哪些关系？

Cesium和thingjs有哪些关系？相关推荐

最新文章

热门文章