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 报表中 ...
随机推荐
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用一条sql取得第10到第20条的记录-Mssql数据库
因为id可能不是连续的,所以不能用取得10<id<20的记录的方法. 有三种方法可以实现: 一.搜索前20条记录,指定不包括前10条 语句: select top 20 * from tb ...
- linux cp 命令详解
/home/lee#cp --help 用法:cp [选项]... 来源 目的地 或:cp [选项]... 来源... 目录 或:cp [选项]... --target-directory=目录 来源 ...
- MySQL配置文件my.ini参数注释说明
mysqld程序--目录和文件basedir = path 使用给定目录作为根目录(安装目录).character-sets-dir = path 给出存放着字符集的目录.datadir = path ...
- 排序基础之非比较的计数排序、桶排序、基数排序(Java实现)
转载请注明原文地址: http://www.cnblogs.com/ygj0930/p/6639353.html 比较和非比较排序 快速排序.归并排序.堆排序.冒泡排序等比较排序,每个数都必须和其他 ...
- Ajax实现文件上传的临时垃圾文件回收策略
转载请注明原文出处:http://www.cnblogs.com/ygj0930/p/6126240.html 在我们web开发过程中,一个很重要的技术就是Ajax(异步传输).Ajax通过把数据从网 ...
- SWF运行时判断两个DisplayObject是否同个类型，属于flash professional库中的同一个元件
一般我们判断两个实例对象是否同样的类型,可以用typeof得到对象类型,然后用==号比较. typeof适用于原生类型. 而对于自定义类型,虽然typeof得到的都是Object,但还有更强的招数:g ...
- java json与map互相转换（一）
java json与map互相转换(一) CreationTime--2018年7月16日 Author:Marydon 1.准备工作 所需jar包:json-20180130.jar impor ...
- 给本地服务器配置py文件的下载功能
打开以下网址 http://localhost/Myservers/test/weibo.py //本地服务器,下载Myservers目录下的test目录中的weibo.py文件 错误提示: HTTP ...
- python str方法之ljust、rjust、center
# -*- coding: cp936 -*- #python 27 #xiaodeng #str方法之ljust.rjust.center #http://www.runoob.com/python ...