Echart在Openlayers的应用

概述

echart，一个由百度前端发起的canvas国产类库（官网：http://echarts.baidu.com/index.html）。echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游等功能，不论是从使用便捷程度、美观程度等方面都是不错的选择，在本文讲述如何在Openlayers中结合echart实现地图统计图的展示。

效果

实现代码

1、piechart

<!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>

2、gaugechart

<!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: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '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发展

技术博客

http://blog.csdn.net/gisshixisheng

在线教程

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)

转载于:https://www.cnblogs.com/lzugis/p/6539776.html

Echart在Openlayers的应用相关推荐

Echart在Openlayers的应用-热力图
概述在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示.在本文,书接前文,讲述Openl ...
Echart在Openlayers的应用-航班的炫光特效
概述在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效展示. 效果实现代码: 1.Ec ...
geoservice地图openlayers图层+echart图表政区添加色块
先看效果图: openlayers案例+api: https://openlayers.org/en/latest/examples/ https://openlayers.org/en/latest ...
openlayers 结合echart 完成交互事件
前言:事先说明,以下相关代码实现了点击echart中的series line ,也就是那种标记点包括label,然后在地图中显示该数据.同时由于封装有相关的方法我也不想写的又臭又长,希望你们能从代码 ...
OpenLayers 动态添加标记（Marker）和信息窗（Popup）
方式一:使用marker方式 1.在地图上添加标记图层 var markers =newOpenLayers.Layer.Markers("Markers"); map.addLa ...
读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
echart 多柱图只显示部分数据标签_2分钟上手、3小时学会无代码软件开发---Echarts数据可视化...
1.引入 ECharts.min.js 库文件引入方式一:用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目) 引入方式二:库文件放于项目文件夹(本地部署项目及联网 ...
OpenLayers辅助函数Util.js（三）
Util.js文件包括了OpenLayers库中的辅助通用函数. Util.getElement 获取一个HTMLELement元素,类似prototype库中$函数.如果window.$不存在, ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...

Echart在Openlayers的应用

Echart在Openlayers的应用相关推荐

最新文章

热门文章