Echart在Openlayers的应用
概述css
echart，一个由百度前端发起的canvas国产类库（官网：http://echarts.baidu.com/index.html）。echart实际上是在canvas类库zrender的基础上作的主题图库，优势有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游等功能，不管是从使用便捷程度、美观程度等方面都是不错的选择，在本文讲述如何在Openlayers中结合echart实现地图统计图的展现。html
效果前端
实现代码jquery
一、piechartgit
<!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/echart/build/dist/echarts.js"></script>
<script>
require.config({
paths: {
echarts: '../../../plugin/echart/build/dist'
}
});
var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[
{
name: '男',
value: 40.0
},{
name: '女',
value: 60.0
}
]},
{name:"拉萨",x:91.1629975040,y:29.7104204643,data:[
{
name: '男',
value: 45.0
},{
name: '女',
value: 55.0
}
]},
{name:"北京",x:116.4575803581078,y:40.04054437977018,data:[
{
name: '男',
value: 35.0
},{
name: '女',
value: 65.0
}
]},
{name:"兰州",x:103.584297498,y:36.1190864503,data:[
{
name: '男',
value: 44.0
},{
name: '女',
value: 56.0
}
]}];
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 url = "http://localhost:8088/geoserver/lzugis/wms";
tiled = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
url,
{
"LAYERS": 'lzugis:province',
"STYLES": '',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([tiled]);
map.addControl(new OpenLayers.Control.Zoom());
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds);
$("#addchart").on("click",function(){
addMapChart();
map.events.register("zoomend", map, function(){
addMapChart();
});
});
});
function addMapChart(){
$(".olPopup").remove();
var zoom = map.getZoom();
for(var i=0;i<data.length;i++){
var d = data[i];
var size=30+(zoom-1)*10;
var domid = "chart"+i;
var content = "<div class='mapChart' id='"+domid+"' ></div>";
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");
popup.keepInMap = false;
map.addPopup(popup,false);
addChart(domid,d);
}
var pops = $(map.div).find(".olPopup");
for(var i=0;i<pops.length;i++){
var pop = $(pops[i]);
var top = pop.position().top,
left = pop.position().left;
pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
}
}
function addChart(domid,data){
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(domid));
var option = {
// renderAsImage:true,
animation:true,
tooltip : {
trigger: 'item',
formatter: "{b}:{c}"
},
series : [
{
type:'pie',
radius : '100%',
center: ['50%', '50%'],
itemStyle:{
normal: {
labelLine:{show: false}
},
},
data:data.data,
line:false
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
}
</script>
</head>
<body>
<div id="map">
<div class="tool">
<button id="addchart">添加统计图</button>
</div>
</div>
</body>
</html>
二、gaugechartgithub
<!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/echart/build/dist/echarts.js"></script>
<script>
require.config({
paths: {
echarts: '../../../plugin/echart/build/dist'
}
});
var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,value:22},
{name:"拉萨",x:91.1629975040,y:29.7104204643,value:-10},
{name:"北京",x:116.4575803581078,y:40.04054437977018,value:32},
{name:"兰州",x:103.584297498,y:36.1190864503,value:25}];
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 url = "http://localhost:8088/geoserver/lzugis/wms";
tiled = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
url,
{
"LAYERS": 'lzugis:province',
"STYLES": '',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([tiled]);
map.addControl(new OpenLayers.Control.Zoom());
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds);
$("#addchart").on("click",function(){
addMapChart();
map.events.register("zoomend", map, function(){
addMapChart();
});
});
});
function addMapChart(){
$(".olPopup").remove();
var zoom = map.getZoom();
for(var i=0;i<data.length;i++){
var d = data[i];
var size=60+(zoom-1)*10;
var domid = "chart"+i;
var content = "<div class='mapChart' id='"+domid+"' ></div>";
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");
popup.keepInMap = false;
map.addPopup(popup,false);
addChart(domid,d);
}
var pops = $(map.div).find(".olPopup");
for(var i=0;i<pops.length;i++){
var pop = $(pops[i]);
var top = pop.position().top,
left = pop.position().left;
pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
}
}
function addChart(domid,data){
require(
[
'echarts',
'echarts/chart/gauge'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(domid));
var option = {
tooltip : {
formatter: "{c}℃"
},
series : [
{
type:'gauge',
radius:'80%',
min:-20,
max:40,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.33, '#48b'],[0.8, '#228b22'],[1, '#ff4500']],
width: 4
}
},
axisTick: { // 坐标轴小标记
splitNumber: 2, // 每份split细分多少段
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
show:false,
interval:'auto',
textStyle: {
color: 'auto',
fontFamily:'微软雅黑',
fontSize: '10'
}
},
splitLine: {
show: true,
length :16,
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
detail : {
formatter:'{value}℃',
textStyle: { // 其他属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder',
fontSize: '15'
}
},
data:[{value: data.value}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
}
</script>
</head>
<body>
<div id="map">
<div class="tool">
<button id="addchart">添加统计图</button>
</div>
</div>
</body>
</html>
传播GIS知识 | 交流GIS经验 | 分享GIS价值 | 专一GIS发展web
技术博客canvas
http://blog.csdn.net/gisshixishengecharts
在线教程dom
http://edu.csdn.net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:niujp08@qq.com
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)