Echart在Openlayers的应用
生活随笔
收集整理的這篇文章主要介紹了
Echart在Openlayers的应用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
echart，一個(gè)由百度前端發(fā)起的canvas國(guó)產(chǎn)類庫(kù)（官網(wǎng)：http://echarts.baidu.com/index.html）。echart其實(shí)是在canvas類庫(kù)zrender的基礎(chǔ)上做的主題圖庫(kù)，優(yōu)點(diǎn)有數(shù)據(jù)驅(qū)動(dòng)，圖例豐富，功能強(qiáng)大，支持?jǐn)?shù)據(jù)拖拽重計(jì)算，數(shù)據(jù)區(qū)域漫游等功能，不論是從使用便捷程度、美觀程度等方面都是不錯(cuò)的選擇，在本文講述如何在Openlayers中結(jié)合echart實(shí)現(xiàn)地圖統(tǒng)計(jì)圖的展示。
效果
實(shí)現(xiàn)代碼
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) {// 基于準(zhǔn)備好的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對(duì)象加載數(shù)據(jù)myChart.setOption(option);});}</script> </head> <body> <div id="map"><div class="tool"><button id="addchart">添加統(tǒng)計(jì)圖</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) {// 基于準(zhǔn)備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById(domid));var option = {tooltip : {formatter: "{c}℃"},series : [{ type:'gauge',radius:'80%',min:-20,max:40,axisLine: { // 坐標(biāo)軸線lineStyle: { // 屬性lineStyle控制線條樣式color: [[0.33, '#48b'],[0.8, '#228b22'],[1, '#ff4500']], width: 4}},axisTick: { // 坐標(biāo)軸小標(biāo)記splitNumber: 2, // 每份split細(xì)分多少段length :12, // 屬性length控制線長(zhǎng)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: { // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: 'auto',fontWeight: 'bolder',fontSize: '15'}},data:[{value: data.value}]}]};// 為echarts對(duì)象加載數(shù)據(jù)myChart.setOption(option);});}</script> </head> <body> <div id="map"><div class="tool"><button id="addchart">添加統(tǒng)計(jì)圖</button></div> </div> </body> </html>傳播GIS知識(shí) | 交流GIS經(jīng)驗(yàn) | 分享GIS價(jià)值 | 專注GIS發(fā)展
技術(shù)博客
http://blog.csdn.net/gisshixisheng
在線教程
http://edu.csdn.net/course/detail/799
Github
https://github.com/lzugis/
聯(lián)系方式
q ? ? ? q:1004740957
e-mail:niujp08@qq.com
公眾號(hào):lzugis15
Q Q 群:452117357(webgis)
? ? ? ? ? ? ?337469080(Android)
轉(zhuǎn)載于:https://www.cnblogs.com/lzugis/p/6539776.html
總結(jié)
以上是生活随笔為你收集整理的Echart在Openlayers的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我爱工程化 之 gulp 使用（一）
- 下一篇： (十三)洞悉linux下的Netfilt