2016年上海SODA开放数据大赛进入复赛作品《安全橙子》网页源码（利用百度echart框架热力图展示城市安全信息）

最新推荐文章于 2022-08-26 11:52:45 发布
最新推荐文章于 2022-08-26 11:52:45 发布
阅读量3.1k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A784586/article/details/61415737
版权

2016年上海SODA开放数据大赛进入复赛作品《安全橙子》：


效果：





网页展示源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.js-tab{width: 100%;}
.js-tab li.js-click{float: left;width:50%;height: 50px;border: #000 solid 1px;color: #000;list-style: none;cursor: pointer;;color: #fff;background-color: #101734;}
.js-tab li.js-click2{float: right;width:50%;height: 50px;border: #000 solid 1px;color: #000;background-color:#5E5E5E;list-style: none;cursor: pointer;}
.js-div{border: #000 solid 1px;width: 100%;height: 970px;}
.display{display: none;}


	
	.leftdiv{
			position:absolute;
			z-index:20;
			bottom:0%;
			right:88%;
		   background:#4A4752;
		}
		
	.container{
		position:absolute;
			z-index:20;
			bottom:0%;
			right:0%;
			
		}
		
	.leftdiv2{
			position:absolute;
			z-index:20;
			bottom:0%;
			right:88%;
		   background:#4A4752;<!--url('./img/xing2.jpg');-->
		}
		
	.container2{
		position:absolute;
			z-index:20;
			top:0%;
			bottom:0%;
			left:100%;
		}
		
#logo1{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo1 img{
				width:50px;
				height:61px;
			}
			
			
#logo2{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo2 img{
				width:50px;
				height:61px;
			}
			
#logo3{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo3 img{
				width:50px;
				height:61px;
			}
			
#logo12{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo12 img{
				width:50px;
				height:61px;
			}
			
			
#logo22{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo22 img{
				width:50px;
				height:61px;
			}
			
#logo32{
				position:relative;
				width:100%;
				height:70px;
				z-index:100;
				top:0px;
				left:0px;
				text-align:left;
			}
		#logo32 img{
				width:50px;
				height:61px;
			}
</style>
</head>
<body>
<ul class="js-tab clearfix" id="js-tab">
    <li class="js-click"> <p align="left" style="font-family:Microsoft YaHei;color:#4ED3D3;font-size:28px; margin: 0;line-height:42px;">  城市公共安全综合态势图</p></li>
    <li class="js-click2"> <p align="right" style="font-family:Microsoft YaHei;color:#4ED3D3;font-size:28px; margin: 0;line-height:42px"><input size="45" style="font-family:Microsoft YaHei;width:180px;height:30px;" type="text" class="content" id="inputcontent" name="q" autocomplete="off" value="上海站" placeholder="输入感兴趣位置..."> <button style="font-family:Microsoft YaHei;width:100px;height: 30px;background:#1169EE;color:#FFFFFF;border:0;border-radius:20px ;cursor:pointer;font-size:14px;margin-right:15px;" type="submit" class="search-button"  οnclick="searchByStationName();"><span style="font-family:Microsoft YaHei;" class="hide-text">搜索</span><span class="sprite-global-icon-magnifier-dark"></span></button>     城市公共安全信息检索系统  </p></li>
</ul>



<div class="js-div" id="js-div">
		
		<div class="option1">
		
			<div class="leftdiv" style="height:95%;width:12%" >	
			
				 <div style="font-family:Microsoft YaHei;width:100%;height:40%;float:left">
						<div class="logo1" id="logo1" style="background:#3399cc;"><img style="vertical-align: middle;" src="img/logo1.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 社会治安</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="派出所出警" class="btn" id="chujing"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="交通事故" class="btn" id="jiaotong"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="企业不良记录" class="btn" id="qiyebuliang"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="乱晾晒车乱停" class="btn" id="luanting"/></br></br>
						</p>
				 </div>
				 
				 <div style="width:100%;height:25%;float:left">
						<div class="logo2" id="logo2" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo2.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 食品安全</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="餐饮处罚" class="btn2" id="canyin"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="摆摊占道" class="btn2" id="baitan"/></br></br>
						</p>
				 </div>
				
				 
				 <div style="width:100%;height:35%;float:left">
				        <div class="logo3" id="logo3" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo3.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 环境卫生</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="重污染" class="btn3" id="wuran"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="暴露垃圾乱涂写" class="btn3" id="baolvlaji"/></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="建筑工地污染" class="btn3" id="gongdi"/></br></br>
						</p>
				 </div>
				 
				 
			</div>
		
			<div class="container" id="container" style="height:95%; width:88%">

			</div>

			
		</div>

		<div class="option2" style="display: none;">
			<div class="leftdiv2" id="leftdiv2" style="font-family:Microsoft YaHei;height:95%;width:12%" >	
			 <div style="font-family:Microsoft YaHei;width:100%;height:40%;float:left">
						<div class="logo12" id="logo12" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo1.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 社会治安</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="派出所出警" class="btn4" id="chujing2"/><input type="checkbox" name="category" value="0" checked="true" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="交通事故" class="btn4" id="jiaotong2"/><input type="checkbox" name="category" value="1" checked="true" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="企业不良记录" class="btn4" id="qiyebuliang2"/><input type="checkbox" name="category" value="2" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="乱晾晒车乱停" class="btn4" id="luanting2"/><input type="checkbox" name="category" value="3" /></br></br>
						</p>
				 </div>
				 
				 <div style="font-family:Microsoft YaHei;width:100%;height:25%;float:left">
						<div class="logo22" id="logo22" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo2.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 食品安全</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="餐饮处罚" class="btn5" id="canyin2"/><input type="checkbox" name="category" value="4" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="摆摊占道" class="btn5" id="baitan2"/><input type="checkbox" name="category" value="5" /></br></br>
						</p>
				 </div>
				
				 
				 <div style="font-family:Microsoft YaHei;width:100%;height:35%;float:left">
				        <div class="logo32" id="logo32" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo3.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 环境卫生</span></div>
						 <p align="center">
						 </br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="重污染" class="btn6" id="wuran2"/><input type="checkbox" name="category" value="6" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="暴露垃圾乱涂写" class="btn6" id="baolvlaji2"/><input type="checkbox" name="category" value="7" /></br></br>
						<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="建筑工地污染" class="btn6" id="gongdi2"/><input type="checkbox" name="category" value="8" /></br></br>
						
						<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="全选" class="btn7" id="selectAll"/> 
						<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button"  value="全不选" class="btn7" id="unSelect"/>   
						<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button"  value="反选" class="btn7" id="reverse"/>
						
						</p>
						
						
				 </div>
				 
			<div class="container2" id="container2" style="height:100%; width:800%">
				
			</div>
			
			
		</div>

</div>





<!-- 引入 js -->
      <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	  
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iYwyAuGoB5PMQUewkUH30cmgxY05VMrw">//ZUONbpqGBsYGXNIYHicvbAbM</script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<!-- End -->	   
	   
<script type="text/javascript">	
/
//option2 jquery监控选择按钮
$(function () { 
	//全选   
    $("#selectAll").click(function () { 
         $("#leftdiv2 :checkbox,#all").prop("checked", true);   
    });   
    //全不选 
    $("#unSelect").click(function () {   
         $("#leftdiv2 :checkbox,#all").prop("checked", false);   
    });   
    //反选  
    $("#reverse").click(function () {  
         $("#leftdiv2 :checkbox").each(function () {   
              $(this).prop("checked", !$(this).prop("checked"));   
         }); 
         //allchk(); 
    }); 
})
//searchByStationName();
option2();
function option2()
最低0.47元/天 解锁文章
江说江湖
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
openlayers：实现热力图层绘制及加载（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 81
openlayers：实现热力图层绘制及加载（附完整源码）
2016年SODA大赛摩拜单车订单数据
01-05
2016年SODA上海开放数据创新应用大赛中摩拜单车提供的共享单车订单数据，数据由对在上海市发生的2016年8月1日到8月31日间的所有订单进行随机抽样得到，数据总量为10万条左右。数据字段包括：订单ID、车辆ID、用户ID...
热力图源码
10-15
本代码简单介绍python热力图如何绘制的，仅供大家分享和参考。
上海开放数据创新应用大赛・“SODA+浦东”启动
weixin_33716941的博客
05-15 247
9月19日，由上海市经济和信息化委员会、上海市浦东新区人民政府、上海市浦东新区科技和经济委员会指导，上海移动互联网应用促进中心、中国工业设计(上海)研究院股份有限公司主办，上海浦东智慧城市发展研究院、上海市浦东新区信息化协会、浦东新区商业信息中心协办的“上海开放数据创新应用大赛?‘SODA+浦东’启动仪式”在浦东金桥麦腾智慧天地成功举行。上海市经济和信息...
参加SODA数据比赛
leo_de_log的博客
08-26 1173
最近在忙着参加SODA（上海市开放数据大赛）。这个SODA比赛和kaggle比赛大不一样，Kaggle更加偏重算法能力而SODA更加像是一个创意赛。到今天为止已经有了１６１个参算队伍了，我觉得到９月３０号应该参赛队伍数量会翻倍吧。 官方发布的公开数据集真的不忍直视，好多的赞助单位都是用这个比赛来给自己赚名气的。像春雨医生的数据，怎么看怎么像是广告里面的数据直接拿出来放到官方网站上的。再像上海市公安...
热力图 heatmap winform版源码
03-22
最近项目需要做一个热力图显示功能，在网上找了很久，找到一些不错的源码，现在给大家分享出来！这个是winform办的。值得学习！！！
2016上海POI数据和共享单车完整数据集
04-08
共享单车数据：2016年8月1日至31日，订单ID、车辆ID、起始点经纬度、轨迹经纬度、起始点时间，csv文件格式，百万数据量(1023603)。POI数据：shp文件格式，wgs1984坐标，已分类(18)，科研需要可下载
SODASST.rar_Soda资料_sst_sst数据读取_sst绘图_读取SODA数据
07-14
在海洋学和气候研究中，SODA（Sea Surface Temperature and Oceanographic Data Assimilation，海洋表面温度与海洋学数据同化）是一个重要的数据集，它提供了全球海洋表面温度（SST）以及其它海洋参数的历史估计。...
soda:SODA开放数据框架和发行版。 （以前称为“发行版”）
03-19
SODA Project是多个项目的伞式数据框架集成，可为用户提供整体框架解决方案。所有的苏打粉都来自该项目。它由SODA Landscape的相应项目或存储库组成。 每个SODA版本都将提供结合了所选SODA项目的组合解决方案和用例...
基于Yolov7分叉改进（源码）.rar
04-15
1、资源内容：基于Yolov7分叉改进添加数据集配置使用SODA10M（完整源码+说明文档+报告+数据）.rar 2、代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 3、适用对象：计算机，电子信息工程、...
heatmap:移动端热力图系统
07-04
移动端热力图系统heatmap 什么是热力图监控？ 为什么要热力图监控？ 概要设计 什么是热力图监控？ 以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。例如 为什么要做热力图监控? 直观清楚地看到页面上每一个区域的访客兴趣焦点，无须报告数据分析，图形化展现，无需任何页面分析经验； 能够框出任意区域的访问详情，如来源、搜索引擎、搜索词、关键词、浏览器等在核心区域的点击情况一目了然，投资回报比清清楚楚 移动端有自身的特性：根据os、ua、屏幕大小导致页面功能模块、区域不一样，如果只存储坐标数据，导致页面热力图数据不准确，比如 移动端页面经常有spa的开发模式，需要以带hash的url为key来进行数据区分存储，但是ta只能也url为key存储，导致多个页面的热力数据混杂在一起，再比如 概要设计 我们怎么做能够解决上述问题？ 后台存储： 以带hash的全url为key进行存储；
echart全国热力图
07-24
本地自己存储的全国热力图算法，准备自己用的，下了你也不亏。
Cesium专栏-热力图（附源码下载）
weixin_30701521的博客
06-26 382
Cesium Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 热力图，从地理学角度看，是一种展示某种现象聚集程度的方法。热力图是地理位置可视化的一种表现方式，能够使得比平均发生概率更高的区域能够浮现出来...
SODA10M 数据集下载记录
weixin_51486807的博客
08-26 2009
官网打不开的，可以直接通过下方网盘链接下载，我就是把官网的下载链接复制到了下面。官网上还有2TB的未标注数据，需要请前往官网下载。总文件约5.6GB，百度云盘提取码为1234。
在Cesium中展示热力图heatmap
ztnhnr的专栏
08-25 4733
本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js，实现的原理是使用heatmap.js生成热力图后，再将图贴到Cesium的相应位置。 准备工作： 1. 首先下载heatmap.js插件，官网地址：https://www.patrick-wied.at/static/heatmapjs。 2. 然后初始化Cesium，准备展示环境 主要步骤： 1. 确定热力图画布的宽高 2....
Strom实时热力图展示项目
不清不慎的博客
09-20 3675
一、概述 本篇文章主要介绍如何使用Storm + Logstash + Kafka 实现实时数据的计算，并且使用高德地图API实现热力图的展示。 背景知识： 在有些场合，我们需要了解当前人口的流动情况，比如，需要实时监控一些旅游景点旅客的密集程度，这时可以使用GPS定位系统将该区域内旅客的IP数据进行计算，但是GPS定位系统也有一定的缺点，不是每个旅客都会GPS功能，这时可以使用“信令”来获取个人...
Echarts热力图和百度地图拓展
11-14 5404
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;     &lt;meta name="viewport" content="initial-scale=1.0,
关于C#中webbrower控件调用的浏览器不支持热力图功能的解决办法
buaazx1992的博客
08-29 896
本人再用webbrower控件调用百度API时，遇到了浏览器不支持百度地图的热力图功能，查阅一些资料，得到两个解决办法，大致概括如下，希望对各位有所帮助： 方法一：1)运行“regedit.exe”,打开注册器编辑器 2)一次选择如下：HKEY_LOCAL_MACHINE/SOFTWARE/WOW6432Node/Microsoft/Interne
AVISO的SODA数据的详细介绍
最新发布
06-07
AVISO是一个致力于海洋遥感数据处理和分析的组织，其SODA（Simple Ocean Data Assimilation）数据是一种用于海洋模拟和气候研究的海洋数据集。SODA数据集很大程度上依赖于卫星观测，并将这些观测数据与先进的海洋...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值