基于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) {//获取到返回的字符串中的tempervar 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) {//获取到返回的字符串中的tempervar humi = d.data.humi;//使用分割字符串方法获取到温度的数字var newHumi = humi.substr(0, humi.indexOf("%"))//新建一个数组，给option数据中对应的数组添加变化后的温度var array = [];array = option.series[1].data;array.push(parseInt(newHumi));option.series[1].data = array;//初始化}/*** 添加图表下标*/function addSubscript(d) {var timerTemp = [];timerTemp = option.xAxis[0].data;timerTemp.push(8 + ++count);//横坐标递增option.xAxis[0].data = timerTemp}

动态修改图表：

当Echarts图表修改结束，并且将ajax获取到的数据也传递到了图表之中后，我们就可以将更新后的echarts图表重新初始化，这样后台数据的变化就会同步显示到我们的图表之中，这样就完成了3D可视化场景结合图表进行的数据交互功能;

　/*** 动态修改图表*/function changeEcharts() {//初始化var mychart = window.echarts.init(document.getElementById('myId'));mychart.setOption(option);}

最后，总结一下，最基本的数据交互和引用图表都在ThingJS的官方示例中，需要注意的是echarts图表的动态修改需要使用到

var mychart = window.echarts.init(document.getElementById('myId'));mychart.setOption(option);

这两行代码，同时对于图表中的数据修改也要准确，当所有代码修改完成后，我们就可以开始调用对应的方法来实现我们的Echarts图表结合Ajax进行数据对接。

以下是完整代码：

//设置全局变量var count = 0;// 动态引入ECharts.jsTHING.Utils.dynamicLoad(['https://www.thingjs.com/guide/lib/echarts.min.js'], function () {/**var app = new THING.App()一直作为ThingJS的启动来使用的，其中有url等信息需要填写*url则是制作好的场景上传到ThingJS网站后的链接*/var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse', // 场景地址"skyBox": "BlueSky"});/**data : humi : "54%" id :"1606" power :"8kWh" temper :"16℃"*/app.on('load', function () {　　createChart();var car = app.query('.Thing');　　updateData(car[0]);})/*** 创建图表*/function createChart() {// 背景 divvar bottomBackground = document.createElement('div');bottomBackground.id = 'myId';// 标题 divvar bottomFont = document.createElement('div');// 图表 divvar bottomDom = document.createElement('div');// 设置背景样式、右下角对齐var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgbargba(40, 119, 98, 0.39);';// 标题字体样式var fontStyle = 'position: absolute;top:0px;right:0px;color:rgba(113,252,244,1);height:78px;width:600px;line-height: 45px;text-align: center;top: 20px;';// 图表DIV样式var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;';// 设置样式bottomBackground.setAttribute('style', backgroundStyle);bottomFont.setAttribute('style', fontStyle);bottomDom.setAttribute('style', chartsStyle);// 底部标题文字bottomFont.innerHTML = '车位温度监控';// echarts 初始化var bottomCharts = window.echarts.init(bottomDom);// 数据部分option = {title: {text: '气候表'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['温度', '湿度']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['6', '7', '8']}],yAxis: [{type: 'value'}],series: [{name: '温度',type: 'line',stack: '总量',areaStyle: {},data: [12, 32, 10]},{name: '湿度',type: 'line',stack: '总量',areaStyle: {},data: [44, 21, 18]}]};bottomCharts.setOption(option);bottomBackground.appendChild(bottomFont);bottomBackground.appendChild(bottomDom);// 添加到app dom下app.domElement.appendChild(bottomBackground);}})/*** 使用ajax更新数据*/function updateData(obj) {// 如果网站是 https 接口则对应 https 请求// 如果网站是 http 接口则对应 http 请求即可$.ajax({type: "get",url: "https://3dmmd.cn/getMonitorDataById",data: { "id": obj.id },dataType: "json", // 返回的数据类型 jsonsuccess: function (d) {console.log('第一次：' + option.xAxis[0].data.length);　　changeHumidity(d);　　changeTemperature(d);　　addSubscript(d);　　changeEcharts();// 每隔4s 请求一次数据var timer = setTimeout(function () {//当时间数组下标if (option.xAxis[0].data[option.xAxis[0].data.length - 1] == 24) {　　clearTimeout(timer);return;}　　updateData(obj);}, 4000)}});/*** 获取到温度变化值并且传入到echarts图表中去，同时修改图表展示。*/function changeTemperature(d) {//获取到返回的字符串中的tempervar 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) {//获取到返回的字符串中的tempervar humi = d.data.humi;//使用分割字符串方法获取到温度的数字var newHumi = humi.substr(0, humi.indexOf("%"))//新建一个数组，给option数据中对应的数组添加变化后的温度var array = [];array = option.series[1].data;array.push(parseInt(newHumi));option.series[1].data = array;//初始化}/*** 添加图表下标*/function addSubscript(d) {var timerTemp = [];timerTemp = option.xAxis[0].data;timerTemp.push(8 + ++count);//横坐标递增option.xAxis[0].data = timerTemp}/*** 动态修改图表*/function changeEcharts() {//初始化var mychart = window.echarts.init(document.getElementById('myId'));mychart.setOption(option);}}

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

bim 导入unity_一种基于BIM和Unity3d的3D物联网可视化人机交互方法与流程
本发明涉及到建筑工程领域和计算机软件领域,采用目前较为成熟的autodeskrevit平台进行3d模型的建立,unity3d平台进行交互设计,具体设计为一种基于unity3d和bim的3d物联网可视化 ...
基于WebGL、Cesium技术的三维空间可视化
真正的大师,永远都怀着一颗学徒的心! 一.项目简介今天给大家推荐一个开源的基于WebGL.Cesium技术的三维空间可视化项目. 项目文档齐全,API完善,教程让人热泪盈眶.满足三维gis开发的各种 ...
智慧港口——基于二三维一体化GIS的港口可视化监管平台
"智慧港口"是以现代化基础设施设备为基础,以云计算.大数据.物联网.移动互联网.智能控制等新一代信息技术与港口运输业务深度融合为核心,以港口运输组织服务创新为动力,以完善的体制机制 ...
基于瑞芯微RK3399Pro＋RK1608，盎锐科技发布一体化3D智能视觉开发平台
作为全球最大的移动通信行业展会,MWC 2019云集了各个优秀的通信设备厂,芯片厂和科技新秀.盎锐科技,全球3D智能视觉(3D Vision Intelligence)领域的领先企业,在MWC2019 ...
开源物联网应用开发平台列表
应用 Yìngyòng 开源物联网应用开发平台列表开源物联网应用开发平台列表: Kaa项目日食库拉 ThingSpeak物联网平台泽塔开放式混合动力节点红色 Wio Link Macchin ...
什么是可视化开发平台？拥有什么优势？
随着科技的进步和发展,可视化开发平台拥有广阔的市场前景,在提升企业办公企业效率.做好数据管理等方面具有自身的特色和优势.在办公自动化发展的年代,低代码开发平台是助力企业实现提质增效办公效率的得力助手, ...
实践解析可视化开发平台FlinkSever优势
摘要:华为Flink可视化开发平台FlinkServer作为自研服务,能够提供比原生flinksql接口更强的企业级特性,比如任务的集中管理,可视化开发,多数据源配置等. 本文分享自华为云社区< ...
可视化开发平台的内容介绍
在办公自动化发展的年代,做好数据管理是提升企业经营管理水平的重要依据.运用可视化开发平台可以提升企业的办公效率,沟通各部门之间的协作,实现数字化发展.那么,可视化开发平台的内容都有哪些?今天我们一起在 ...
PageNow企业级数据可视化开发平台
PageNow作为国内技术团队自主研发的大屏数据可视化开发平台,于2020年3月份正式上线以来,历经六个多月的更新迭代,现已收获大多数国内企业的青睐并将其作为大屏数据可视化项目开发的首选产品. 大屏数 ...

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

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

最新文章

热门文章