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 报表中 ...
随机推荐
- JAVA Eclipse打开报错failed to load the jni shared library怎么办
JRE是64位的,但是Eclipse是32位的 一般都用绿色版的了,可以直接解压运行
- C语言常见问题 如何用Visual Studio编写C语言程序测试
新建Win32控制台应用程序 勾选控制台空项目 右击源文件,添加cpp文件 输入范例代码,可以正常运行#include <stdio.h> int main(void) { i ...
- iOS 获取APP相关信息 私有API
/* Generated by RuntimeBrowser Image: /System/Library/Frameworks/MobileCoreServices.framework/Mobile ...
- Python在线dlib库地址
一.地址 https://pypi.python.org/pypi/dlib/18.17.100
- Java中创建访问HTTPS的自签名证书的方法
一.问题: 常常在用java访问https的请求时,总是出现SSL禁止的异常.这里给大家教下怎么创建与添加证书. 二.工具 : 1.创建一个目录 2.去Github上搜索InstallCert,然后随 ...
- 安装MySQL-python报错：_mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory或者 build\lib.win-amd64-2.7\_mysql.pyd : fatal error LNK1120: 56 unresolved externa
解决办法1: 直接下载MySQL-python-1.2.5.win-amd64/32-py2.7.exe,点击安装 此处要注意自己安装的Python和MySQL版本是64位还是32位,否则在进行安装M ...
- notepad++一键运行python
打开notepad++,找到菜单栏的run菜单. 子菜单选中run 弹出的小窗口中,输入cmd /k python "$(FULL_CURRENT_PATH)" & ...
- Python实现微信扫码支付模式二（NativePay）
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7649207.html 核心代码github地址:https://github.com/ygj0930/Pyth ...
- 在 Vim 中使用 pydiction 对 Python 进行代码补全
Pydiction 允许你在 Vim 中实现 TAB 代码补全, 可以补全的内容包括:标准的.自定义的,以及第三方模块和包.外加关键字.BIFs,和字符串. Pydiction 由 3 个主要文件构成 ...
- java 读取clob
java 读取clob CreationTime--2018年7月1日09点41分 Author:Marydon 1.说明 jdbc 数据类型为Clob,与java的String类型相对应. 2. ...