基于webgl、封装threejs的3d物联网可视化开发平台

webgl可视化平台,封装threejs进行快速数据对接，使用Echarts图表结合webgl可视化平台进行数据对接，3D物联网开发选哪个?前端人员能不能跑来搞3D可视化开发?用什么可以简单快速建模?开发中遇到问题不知道如何解决?别急，使用ThingJS物联网可视化平台就能解决这些问题!

　　CamBuilder： 专为小白建模使用，大多数的模型都内置了动画效果，使用代码即可自由操控;

CityBuilder： 专为智慧城市建造的在线开发工具，通过上传gis地图数据，生成对应城市目标区域模型，实现炫酷城市场景!

ChartBuilder：专为数据交互设置的图表拖拽工具，用户无需搭建html模板，直接开拖，即开即用，新松高效的与CamBuilder 搭建的园区场景或者是CityBuilder搭建的城市场景结合，通过图表实时监控相关数据!

ThingPano： 基于 ThingJS 平台推出的全景工具套件，可简单高效地将高清全景图应用到 3D 环境中，实现 3D 宏观场景和全 景微观场景的无缝融合，可快速调取、查看选定位置的全景图，以更加真实的环境，全视角覆盖场景!

开发平台： ThingJS在线开发平台，公开了大量的可直接运行查看的实例以及其源代码，且这些实例由易到难，从最初的如何使用ThingJS的API，到最后一个完整3D可视化项目，这些源码以及关键位置的注释都在其中!

使用ThingJS第一步是什么?充值?不不不!先注册登录，我懒，就直接用QQ登录了，好用再去花钱买他们的付费服务，这个也不亏_{当然，用的时候确实发现挺好用的，就是ThingJS平台更新的有些快，隔个十天半个月的，页面就出现变动，新增好多小功能那种，所以大家在用的时候会发现，咦，我的运行按钮去哪了(快捷键没变)?这里怎么多了个啥图表?点点看，还挺好用的哈}

好了，话不多说，如何使用Echarts图表进行数据对接?没有数据交互的3D可视化应用可不会受到BAT公司的关注，也不会专门成立相关部门去研究这个领域。

使用Echarts图表分以下五步：

第一步：在“在线开发”中引入Echarts图表代码;

第二步：在“在线开发”中引入数据对接代码;

第三步：修改Echarts图表样式(具体样式可以到Echarts官网上下载);

第四步：将数据对接后的数据引入到Echarts的json数据中;

第五步：加入Echarts初始化以及动态修改Echarts代码;

好了，就是这五步了，具体是如何操作的呢?

引入Echarts图表：

进入到ThingJS在线开发中新建一个项目，保存后，打开官方示例，找到“界面(2D)”，打开“整合Echarts”示例，将代码全部复制到新项目中，(全选后使用shift + alt + F可以格式化代码)，在这里面最为重要的是动态引入Echarts.js

　　THING.Utils.dynamicLoad(['lib/echarts.min.js'], function () {
   })

但是这个代码还需要修改要将dynamicLoad后面的url，要将其改为以下url：

　　https://www.thingjs.com/guide/lib/echarts.min.js

这样做的原因就是使得项目分享出去的链接能够展示echarts图表，否则是没有图表的。

引入数据对接：

保存当先项目，打开官方示例，找到“数据”，打开“数据对接_Ajax”示例，将app.on部分的代码以及updateData(obj)方法的代码全部复制到新项目下方，(全选后使用shift + alt + F可以格式化代码)，在这里面要先将timer定时给注释掉，同时将changeColor()以及createPanel()方法删掉，因为这里面没有引用该方法，有需要可以自己仿照示例写一个。

// 每隔3s 请求一次数据

　　//timer = setTimeout(function () {
   

　　//updateData(obj)

　　//}, 3000);

修改Echarts图表样式：

打开Echarts官网，打开官方实例，找到想要的图标样式目，打开官方示例，复制option处所有数据，将该数据替换掉项目中echartOption后的数据，这样图表则为我们选择的图表

// 数据部分

　　var echartOptions = {
   

　　//...

　　};

数据交互：

要改变的数据一般是option中series中的数据，进行相对应的替换即可。在这里我写了三个方法来替换series中的数据以及xAxis中代表横坐标的数据。

　/**

　　* 获取到温度变化值并且传入到echarts图表中去，同时修改图表展示。

　　*/

　　function changeTemperature(d) {
   

　　//获取到返回的字符串中的temper

　　var temper = d.data.temper;

　　//使用分割字符串方法获取到温度的数字

　　var newtemper = temper.substr(0, temper.indexOf("℃"))

　　//新建一个数组，给option数据中对应的数组添加变化后的温度

　　var array = [];

　　array = option.series[0].data;

　　array.push(parseInt(newtemper));

　　option.series[0].data = array;

　　}

　　/**

　　* 获取到湿度变化值并且传入到echarts中去，同时修改图表展示

　　*/

　　function changeHumidity(d) {
   

　　//获取到返回的字符串中的temper

　　var humi = d.data.humi;

　　//使用分割字符串方法获取到温度的数字

　　var newHumi = humi.substr(0, humi.indexOf("%"))

　　//新建一个数组，给option数据中对应的数组添加变化后的温度