智能交通IoT大数据平台

最近，公司做一个项目“智能交通IoT大数据平台”，前端WEB界面酷炫的效果特分享给大家。

项目名称：智能交通IoT大数据平台

技术标签：Html5、Css、JavaScript、Echarts（世界地图、柱状图）

支持平台：PC端浏览器

说明：通过Html5、Css、JavaScript、Echarts等前端技术展示酷炫的界面效果。

以下为代码：

<!doctype html><head><meta charset="utf-8" /><title>智能交通IoT大数据平台</title><style type="text/css">*{margin: 0;padding: 0;}body{width: 100%;height: 100%;}#box{                width: 1200px;height: 980px;left:15%;top:5%;position: absolute;}</style></head>
<link href="css/style.css"  rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>
<script src="js/jquery-3.2.0.min.js" charset="utf-8"></script>
<script src="beijing.js"></script><body>
<div class="wpbox">
<div class="bnt"><div class="topbnt_left fl"><ul></ul></div><h1 class="tith1 fl">智能交通IoT大数据平台</h1><div class=" fr topbnt_right"><ul></ul></ul></div>
</div>
<!-- bnt end -->
<div class="left1"><div class="aleftboxttop pt1"><h2 class="tith2">设备数国家排名TOP5</h2><div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" ><ul><li class="hot1">1</li><li class="hot2">2</li><li class="hot3">3</li><li class="hot4">4</li><li class="hot5">5</li></ul><div id="pleftbox2bott_cont"class="lpeftb2otcont"  style="height:100%;"></div></div><!-- lefttoday_number end --></div><div class="aleftboxtmidd"><h2 class="tith2 pt2">设备数城市排名TOP5</h2><div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" ><ul><li class="hot1">1</li><li class="hot2">2</li><li class="hot3">3</li><li class="hot4">4</li><li class="hot5">5</li></ul><div id="pleftbox2bott_cont2" class="lpeftb2otcont"  style="height:100%;"></div></div></div><div class="aleftboxtbott"><h2 class="tith2">故障分类</h2><!-- <div class="lefttoday_tit height"><p class="fl">状态：已调节.æl,kmo</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div> --><div id="aleftboxtmidd" class="aleftboxtbott_cont2" ></div>
</div>
</div>
<!--  left1 end -->
<div class="mrbox"><div class="mrbox_topmidd" style="width: 69%;"><div class="amiddboxttop"><h2 class="tith2 pt1">全球分布图</h2><div class="hot_map" id="topmap"   ><p>总数：<span style="color:rgb(0,176,240)">10000</span> </p><p>在线：<span style="color:rgb(0,176,80)">9675</span> </p><p>离线：<span style="color:rgb(255,196,0)">53</span> </p><p>故障：<span style="color:red">32</span></p></div></div></div><!-- mrbox_top end --><div class="mrbox_top_right"><div class="arightboxtop"><h2 class="tith2">消息通知</h2><div class="lefttoday_tit"><p class="fl">消息通知内容</p><p class="fr">发生时间</p></div><div class="left2_table"><ul><li><p class="fl"><b>LED显示屏电量不足</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED右转指示标致电路异常</b><br>中山路与人民路交叉口。<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li><p class="fl"><b>LED右转指示标致断开网络</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致位置统称</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li><p class="fl"><b>LED路程指示标致振动异常</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致维修完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致安装完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致安装完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口，<br></p><p class="fr pt17">2018-06-22 10:00</p></li></ul></div></div><div class="arightboxbott"><h2 class="tith2 ">设备信息</h2><div id="aleftboxtmiddr" class="arightboxbottcont2"><table width="100%" height="100%" ><tr><td><p>设备编号：LED-902</p><p>设备名称：右转指示灯</p><p>类别：LED灯</p><p>状态：电量不足</p><p>电压：10V</p><p>温度：12℃</p><p>湿度：10%</p><p>位置：中山路人民路交XXXXXXXXXXXXXXX叉口</p><p>经纬度：22222,555555</p></td><td ><img src="./img/device.png"></img></td></tr></table></div></div></div><!-- mrbox_top_right end --></div></div>
</div><div id="box" class="box"></div><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script><script src="js/china.js" type="text/javascript" charset="utf-8"></script><script src="js/world.js" type="text/javascript" charset="utf-8"></script><script src="js/data-1499132667476-ry7ZXuu4Z.js" type="text/javascript" charset="utf-8"></script>  <script type="text/javascript">var config = {color: '#750be8',levels: 1,intensity: 4,threshold: 0.01}var canvas = document.createElement('canvas');canvas.width = 2048;canvas.height = 1024;context = canvas.getContext("2d");context.lineWidth = 0.5;context.strokeStyle = config.color;context.fillStyle = config.color;context.shadowColor = config.color;           $.when($.getScript('./js/world-gl-map/d3-contour.js'),$.getScript('./js/world-gl-map/d3_geo.js'),$.getScript('./js/world-gl-map/d3_timer.js')).done(function () {image('img/8.png').then(function(image) {var m = image.height,n = image.width,values = new Array(n * m),contours = d3.contours().size([n, m]).smooth(true),projection = d3.geoIdentity().scale(canvas.width / n),path = d3.geoPath(projection, context);//   StackBlur.R(image, 5);for (var j = 0, k = 0; j < m; ++j) {for (var i = 0; i < n; ++i, ++k) {values[k] = image.data[(k << 2)] / 255;}}var opt = {image: canvas}var results = [];function update(threshold, levels) {context.clearRect(0, 0, canvas.width, canvas.height);var thresholds = [];for (var i = 0; i < levels; i++) {thresholds.push((threshold + 1 / levels * i) % 1);}results = contours.thresholds(thresholds)(values);redraw();}function redraw() {results.forEach(function (d, idx) {context.beginPath();path(d);context.globalAlpha = 1;context.stroke();if (idx > config.levels / 5 * 3) {context.globalAlpha = 0.01;context.fill();}});opt.onupdate();}d3.timer(function(t) {var threshold = (t % 10000) / 10000;update(threshold, 1);});initCharts(opt);update(config.threshold, config.levels);});        function image(url) {return new Promise(function(resolve) {var image = new Image();image.src = url;image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width / 8;canvas.height = image.height / 8;var context = canvas.getContext("2d");context.drawImage(image, 0, 0, canvas.width, canvas.height);resolve(context.getImageData(0, 0, canvas.width, canvas.height));};});}function initCharts(opt) {var myChart = echarts.init(document.getElementsByClassName("box")[0])let canvas2 = document.createElement('canvas');let mapChart = echarts.init(canvas2, null, {width: 2048,height: 1024});var contourChart = echarts.init(document.createElement('canvas'), null, {width: 2048,height: 1024});var img = new echarts.graphic.Image({style: {image: opt.image,x: -1,y: -1,width: opt.image.width + 2,height: opt.image.height + 2}});contourChart.getZr().add(img);opt.onupdate = function () {img.dirty();};mapChart.setOption({series: [{type: 'map',map: 'world',// 绘制完整尺寸的 echarts 实例top: 0,left: 0,right: 0,bottom: 0,boundingCoords: [[-180, 90],[180, -90]]}]});var canvas1 = document.createElement('canvas');var mapChart1 = echarts.init(canvas1, null, {width: 2048,height: 1024});mapChart1.setOption({backgroundColor: 'transparent',series: [{type: 'map',map: 'china',left: 0,top: 0,right: 0,bottom: 0,//   environment: '#000',boundingCoords: [[-180, 90],[180, -90]],label: {normal: {show: false,fontSize: 4,lineHeigh: 4,color: '#000',}},itemStyle: {normal: {areaColor: 'transparent',borderWidth: 1,borderType: 'solid',borderColor: '#a85000'}},}]});       var option = {title: {text: '点击地球获取该区域地图',textStyle: {color: '#fff'}},tooltip: {show: true},//         visualMap: [{//             // show: false,//               type: 'continuous',//             seriesIndex: 0,//               text: ['scatter3D'],//                textStyle: {//                  color: '#fff'//               },//                calculable: true,//             max: 3000,//                inRange: {//                    color: ['#87aa66', '#eba438', '#d94d4c']//                }//         }],globe: {//               baseTexture: mapChart,environment:'none',//背景//environment:'img/charity_top.png',heightTexture: 'img/bathymetry_bw_composite_4k-back.jpg',baseTexture: 'img/8.png',shading: 'lambert',light: { // 光照阴影main: {color: 'blue', // 光照颜色intensity: 14.2, // 光照强度shadowQuality: 'ultra', //阴影亮度shadow: true, // 是否显示阴影alpha: 40,beta: -30},ambient: {intensity: 4.6}},viewControl: {alpha: 30,beta: 160,
//                      targetCoord: [116.46, 39.92],autoRotate: true,autoRotateAfterStill: 10,distance: 240,autoRotateSpeed:4},postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果enable: true, //是否开启SSAO: {//环境光遮蔽radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然intensity: 1,//环境光遮蔽的强度enable: true}},layers: [{type: 'blend',blendTo: 'emission',texture: contourChart,intensity: config.intensity}]},series: [{name: 'lines3D',type: 'lines3D',coordinateSystem: 'globe',effect: {show: true,period: 2,trailWidth: 3,trailLength: 0.5,trailOpacity: 1,trailColor: '#0087f4'},blendMode: 'lighter',lineStyle: {width: 1,color: '#0087f4',opacity: 0.2},data: [],//             data: [{//                  from: 'A',//                  to: 'B',//                    coords: [//                     [-83.69501541554166, -75.76453333240994],//                     [105.18, 37.51]//                   ],//                    value:"2013.48"//             }, {//                  from: 'A',//                  to: 'C',//                    coords: [//                     [118.377173, 31.337123],//                      [105.18, 37.51]//                   ],//                    value:"2013.48"//             }],silent: false},{ //点name: '景区',//              type: 'effectScatter',//              coordinateSystem: 'bmap',type: 'scatter3D',blendMode: 'lighter',coordinateSystem: 'globe',showEffectOn: 'render',zlevel: 2,effectType:"ripple", symbolSize: 15,rippleEffect: {period: 4,scale: 4,brushType: 'fill'},//                showEffectOn: 'hover',hoverAnimation: true,label: {normal: {show: true,position: 'right',
//                          formatter: '{b}',formatter:function(params){if(params.dataIndex == 1){return '中国-无锡'}else if(params.dataIndex == 2){return '韩国'}else if(params.dataIndex == 3){return '印度'}else if(params.dataIndex == 4){return '日本'}else if(params.dataIndex == 5){return '台湾'}else if(params.dataIndex == 0){return '泰国'}else if(params.dataIndex == 6){return '缅甸'}},textStyle: {fontSize: 18,color: '#f5d909',fontWeight:'bold',
//                              backgroundColor:'rgba(255,255,255,0.2)'backgroundColor:'transparent'}}},itemStyle: {normal: {color: 'rgb(29,183,255)'}},//                data: [{//                  'name': 'A',//                  'value': [105.18, 37.51, 1500]//              }, {//                  'name': 'B',//                  'value': [118.393252, 31.15576, 1500]//               }, {//                  'name': 'C',//                  'value': [117.989662, 31.293115, 1500]//              }]data:[[102.58, 15.01],[120.58, 32.01],[127.38, 35.8],[80.58, 21.01],[139.46, 35.42],[121.68, 24.50],[95.90, 20.31]]}]}// 随机数据option.series[0].data = [{coords:[[102.58, 15.01],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[123.38, 41.8],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[127.38, 35.8],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[139.46, 35.42],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)}, {coords:[[121.68, 24.50],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},    {coords:[[102.90, 25.31],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)}]for (let i = 0; i < 10; i++) {option.series[0].data = option.series[0].data.concat(rodamData())}function rodamData() {let name = '随机点' + Math.random().toFixed(5) * 100000// let longitude = Math.random() * 62 + 73let longitude = 118.58let longitude2 = Math.random() * 360 - 180// let latitude = Math.random() * 50 + 3.52let latitude = 32.01let latitude2 = Math.random() * 180 - 90return {coords: [[longitude2, latitude2],[longitude, latitude]],value: (Math.random() * 3000).toFixed(2)}}            myChart.setOption(option)   //点击事件,根据点击某个省份计算出这个省份的数据myChart.on('click', function (params) {console.log(params);//逻辑控制alert(params);});}})            </script><script type="text/javascript">var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));option = {color:['#7ecef4'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:45,right:20,top:25,bottom:0,containLabel: true},xAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,0)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,0)'}},axisLabel:{color:"rgba(255,255,255,0)"},boundaryGap: [0, 0.01]},yAxis: {type: 'category',axisLine:{lineStyle:{color:'rgba(255,255,255,.5)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.5)"},data: ['缅甸','印度','日本','泰国','中国']},series: [{name: '',type: 'bar',barWidth :20,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1,[{offset: 0, color: 'rgba(230,253,139,.7)'},{offset: 1, color: 'rgba(41,220,205,.7)'}])}},data: [18203, 23489, 29034, 104970, 131744]}]};myChart.setOption(option);</script><script type="text/javascript">var myChart = echarts.init(document.getElementById('pleftbox2bott_cont2'));option = {color:['#7ecef4'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:45,right:20,top:17,bottom:10,containLabel: true},xAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,0)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,0)'}},axisLabel:{color:"rgba(255,255,255,0)"},boundaryGap: [0, 0.01]},yAxis: {type: 'category',axisLine:{lineStyle:{color:'rgba(255,255,255,.5)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.5)"},data: ['无锡','上海','杭州','苏州','南京']},series: [{name: '',type: 'bar',barWidth :20,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1,[{offset: 0, color: 'rgba(230,253,139,.7)'},{offset: 1, color: 'rgba(41,220,205,.7)'}])}},data: [18203, 23489, 29034, 104970, 131744]}]};myChart.setOption(option);</script><script type="text/javascript">
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
option = {
color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {left:60,right:60,top:20,bottom:0,containLabel: true},legend: {left: 10,top: 5,textStyle:{fontSize:10,color:'rgba(255,255,255,.6)'},data: ['电量不足','位置偏移','振动异常','电路异常','设备离线']},calculable : true,series : [{name:'面积模式',type:'pie',radius : [20, 70],center : ['50%', '55%'],roseType : 'area',data:[{value:187650, name:'电量不足'},{value:145896, name:'位置偏移'},{value:148920, name:'振动异常'},{value:148920, name:'电路异常'},{value:148920, name:'设备离线'},]}]};
myChart.setOption(option);
</script>
</body>
</html>

智能交通IoT大数据平台相关推荐

详解智能交通应用大数据“三重门”
文章讲的是详解智能交通应用大数据"三重门",武汉市悬在路口立杆上的金属小盒子--超级电子眼3个月抓了13万起交通违法,逆行.压线.套牌一眼识别,并能自动报警. 只需10秒,重庆市凭 ...
数据可视化分析教学课件——FineBI实验册节选====公共交通管理大数据平台
数据可视化分析课程教学,0基础也能掌握,本节讲述的是交通运输及物流管理等专业的数据可视化分析案例:公共交通管理大数据平台 a.实验背景近些年对国家公共交通管理的数据信息化建设非常重视,特别是 ...
利用智领云BDOS构建智能楼宇物联网大数据平台
智领云赋能智能建筑技术升级 --利用BDOS大数据操作系统构建智能楼宇物联网大数据平台随着云计算.大数据和物联网等先进技术逐渐融入到智能建筑中,"智能建筑"的概念已经不再局限于传 ...
微软环境智能大数据平台掘金1.6万亿数据红利
以SQL Server 2014带来的全面性能提升为契机,微软致力于面向"移动与云为先"的世界,打造基于环境智能的完整大数据平台.微软SQL Server 2014是全球部署最广泛 ...
VR线上智能园区3D可视化电子沙盘工厂大数据平台
随着"一带一路"的成功建设以及"全球科技化4.0"的到来.使得我国经济快速发展,同时VR线上3D展示与电子沙盘3D可视化技术随着高兴技术产业的不断发展,商迪3D ...
大数据平台常用组件_这款大数据智能服务平台火了！全自动化配置30+款开源大数据组件...
在互联网市场的头部效应下,企业所面临的竞争压力越来越大,如何有效解决获客成本高.用户黏性低.变现能力弱等问题,正是越来越多的企业开始构建大数据平台的初衷.但由于大数据解决方案所涉及的组件错综复杂.技术 ...
33页政务大数据平台-数据智能治理子平台建设方案
按照S市大数据中心对市区两级大数据资源平台建设统一标准规范的要求下,以实际需求为导向,搭建m区大数据资源平台,加快推进与承接S市大数据资源平台的落地数据资源,归集区内各单位公共数据资源,按需实现共享交 ...
【数据架构系列-03】数据仓库、大数据平台、数据中台... 我不太认同《DataFun数据智能知识地图》中的定义
关注DataFunTalk有2年多了,DataFun确实像创始人王大川讲的那样,践行选择.努力和利他原则,专注于大数据.人工智能技术应用的分享与交流,秉承着开源开放的精神,免费的共享了很多有营养的行业 ...
TDengine：开源、高效的物联网大数据平台
目录一.物联网介绍二.市场上主流平台 1.亚马逊云科技(aws) 2.阿里云 3.腾讯云 4.华为云三.TDengine 1.简介 2.使用教程 3.应用场景 4.优势 5.使用案例一.物联网 ...

智能交通IoT大数据平台

智能交通IoT大数据平台相关推荐

最新文章

热门文章