Openlayers2中统计图的实现
概述：
在前文中。介绍了Arcgis for js和Openlayers3中统计图的实现。在本文，书接上文。介绍在Openlayers2中，统计图的实现。
实现：
在Openlayers2中，popup的概念是：A popup is a small div that can opened and closed on the map. 所以，在OL2中，能够用popup来实现统计图的展示。首先。看看实现后的结果：
实现的代码例如以下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<style>
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
}
.tool{
position: absolute;
top:10pt;
right: 10pt;
padding: 5px;
background: #fff;
border: 1px solid #ff5500;
z-index: 1000;
}
</style>
<script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script src="../../../plugin/highcharts/highcharts.js"></script>
<script>
var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[
{
name: '男',
y: 40.0,
color:"#5ab1ef"
},{
name: '女',
y: 60.0,
color:"#d87a80"
}
]},
{name:"拉萨",x:91.1629975040,y:29.7104204643,data:[
{
name: '男',
y: 45.0,
color:"#5ab1ef"
},{
name: '女',
y: 55.0,
color:"#d87a80"
}
]},
{name:"北京",x:116.4575803581078,y:40.04054437977018,data:[
{
name: '男',
y: 35.0,
color:"#5ab1ef"
},{
name: '女',
y: 65.0,
color:"#d87a80"
}
]},
{name:"兰州",x:103.584297498,y:36.1190864503,data:[
{
name: '男',
y: 44.0,
color:"#5ab1ef"
},{
name: '女',
y: 56.0,
color:"#d87a80"
}
]}];
var map;
var tiled;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
$(window).load(function() {
var format = 'image/png';
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
var time = new Date();
time = time.getTime();
var url = "http://localhost:8081/lzugis/wms?t="+time;
tiled = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
url,
{
"LAYERS": '1,6',
"STYLES": '',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([tiled]);
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds); $("#addchart").on("click",function(){
for(var i=0;i<data.length;i++){
var d = data[i];
var size=100;
var domid = "chart"+i;
var content = "<div id='"+domid+"'></div>";
console.log(content);
var popup = new OpenLayers.Popup(domid,
new OpenLayers.LonLat(d.x,d.y),
new OpenLayers.Size(size,size),
content,
false);
popup.setBackgroundColor("transparent");
popup.setBorder("0px #0066ff solid");
map.addPopup(popup,false);
addChart(domid,d,size);
}
});
});
function addChart(domid,data,size){
$('#'+domid).highcharts({
chart: {
backgroundColor: 'rgba(255, 255, 255, 0)',
plotBorderColor: null,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: null,
plotShadow: false,
width: size,
height: size
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
credits:{
enabled:false
},
title: {
text: ''
},
plotOptions:{
pie: {
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: data.name,
data: data.data
}]
});
}
</script>
</head>
<body>
<div id="map">
<div class="tool">
<button id="addchart">加入统计图</button>
</div>
<div style="display: none;" id="chart">
</div>
</div>
</body>
</html>
Arcgis for js基础教程
Openlayers2中统计图的实现的更多相关文章
- OpenLayers2中的事件_以Popup为例
SATURDAY, 21 MARCH 1-Preface 前几天阅读学习了OpenLayers'Cookbook中的第四章——Working with events. 从AFDS系统的开发项目进行至今 ...
- 用FineReport报表系统构建资金监管平台
一.应用背景 计算机的应用已经渗透到日常工作的许多方面,无论是其自身还是所发挥的作用,计算机都标志着一种高科技,使工作高效率和高水平.为了能更方便,更轻松,更好的管理,信息化建设正在日益发展壮大,更加 ...
- 3月题外：关于JS实现图片缩略图效果的一些小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- 基于mapreduce实现图的三角形计数
源代码放在我的github上,想细致了解的可以访问:TriangleCount on github 一.实验要求 1.1 实验背景 图的三角形计数问题是一个基本的图计算问题,是很多复杂 ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- 3月题外：关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- Python开源框架
info:更多Django信息url:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC) ...
- 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...
- 动态切换 web 报表中的统计图类型
统计图在浏览器端展现时,不同的使用人员对图形的展现形式会有不同的要求,有的需要柱形图.有的想看折线图等,报表支持用户在浏览器端动态的选择统计图类型,关注乾学院,查看具体实现方法动态切换 web 报表中 ...
随机推荐
- Office 超级录屏如何旋转视频90度之后保存
打开视频转换专家 添加视频后点击编辑,然后在旋转的地方设置旋转,应用 输出可以正常播放
- 谷哥的小弟学前端(10)——JavaScript基础知识（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- spring MVC、mybatis配置读写分离，ReplicationDriver（转载）
参考:http://shift-alt-ctrl.iteye.com/blog/2271730c 环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现 ...
- 微软BI 之SSRS 系列 - 如何实现报表标签的本地化 - 中文和英文的互换
SSRS 中并没有直接提供本地化的配置方式,因此在 SSRS 中实现本地化,比如有英文标题还有可选的中文标题,就需要通过其它的方式来解决. 比如默认是这样的英文标题 - 但是本地中方用户可能比较喜欢看 ...
- poj - 1191 - 棋盘切割（dp)
题意:将一个8*8的棋盘(每一个单元正方形有个分值)沿直线(竖或横)割掉一块,留下一块,对留下的这块继续这样操作,总共进行n - 1次,得到n块(1 < n < 15)矩形,每一个矩形的分 ...
- Spring MVC 零配置 / Spring MVC JavaConfig
1. Spring MVC的核心就是DispatcherServlet类,Spring MVC处理请求的流程如下图所示: 2. Spring MVC中典型的上下文层次 当我们初始化一个Dispatch ...
- 〖Linux〗gun screen 配置文件
screen 默认使用 bash shell,一般情况下screen只用于android build,tmux则是我的日常使用多终端管理工具. # Default Shell shell " ...
- Spring Boot动态修改日志级别
1. pom中引入 org.springframework.boot spring-boot-starter-actuator 2. 发送POST请求: 地址: http://[服务地址] ...
- Arduino和C51开发DS1302时钟
技术:51单片机.Arduino.DS1302时钟.串口通信 概述 本文实现51单片机和Arduino串口实时显示时钟功能,让读者对DS1302能够更好的理解,这次功能也和上节课学到的串口通信运用 ...
- 查看tcp连接信息socket几个常用的命令
查看tcp连接几个常用的命令 1 ss ss 列出所有的连接,包括tcp连接.udp连接.unix socket.raw socket ss -t 列出所有tcp连接 ss -tl 列出所有处于监听状 ...