devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Echart在Openlayers的应用_openlayers 使用echarts

作者：知新_RL | 2024-06-16 20:45:14

赞

踩

openlayers 使用echarts

概述

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


效果



实现代码

1、piechart

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>openlayers map</title>
  6.     <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  7.     <style>
  8.         html, body, #map{
  9.             padding:0;
  10.             margin:0;
  11.             height:100%;
  12.             width:100%;
  13.             overflow: hidden;
  14.         }
  15.         .tool{
  16.             position: absolute;
  17.             top:10pt;
  18.             right: 10pt;
  19.             padding: 5px;
  20.             background: #fff;
  21.             border: 1px solid #ff5500;
  22.             z-index: 1000;
  23.         }
  24.     </style>
  25.     <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
  26.     <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
  27.     <script src="../../../plugin/echart/build/dist/echarts.js"></script>
  28.     <script>
  29.         require.config({
  30.             paths: {
  31.                 echarts: '../../../plugin/echart/build/dist'
  32.             }
  33.         });
  34.         var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[
  35.             {
  36.                 name: '男',
  37.                 value: 40.0
  38.             },{
  39.                 name: '女',
  40.                 value: 60.0
  41.             }
  42.         ]},
  43.             {name:"拉萨",x:91.1629975040,y:29.7104204643,data:[
  44.                 {
  45.                     name: '男',
  46.                     value: 45.0
  47.                 },{
  48.                     name: '女',
  49.                     value: 55.0
  50.                 }
  51.             ]},
  52.             {name:"北京",x:116.4575803581078,y:40.04054437977018,data:[
  53.                 {
  54.                     name: '男',
  55.                     value: 35.0
  56.                 },{
  57.                     name: '女',
  58.                     value: 65.0
  59.                 }
  60.             ]},
  61.             {name:"兰州",x:103.584297498,y:36.1190864503,data:[
  62.                 {
  63.                     name: '男',
  64.                     value: 44.0
  65.                 },{
  66.                     name: '女',
  67.                     value: 56.0
  68.                 }
  69.             ]}];
  70.         var map;
  71.         var tiled;
  72.         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
  73.         OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
  74.         $(window).load(function() {
  75.             var format = 'image/png';
  76.             var bounds = new OpenLayers.Bounds(
  77.                     73.45100463562233, 18.16324718764174,
  78.                     134.97679764650596, 53.531943152223576
  79.             );
  80.             var options = {
  81.                 controls: [],
  82.                 maxExtent: bounds,
  83.                 maxResolution: 0.2403351289487642,
  84.                 projection: "EPSG:4326",
  85.                 units: 'degrees'
  86.             };
  87.             map = new OpenLayers.Map('map', options);
  88.             var url = "http://localhost:8088/geoserver/lzugis/wms";
  89.             tiled = new OpenLayers.Layer.WMS(
  90.                     "Geoserver layers - Tiled",
  91.                     url,
  92.                     {
  93.                         "LAYERS": 'lzugis:province',
  94.                         "STYLES": '',
  95.                         format: format
  96.                     },
  97.                     {
  98.                         buffer: 0,
  99.                         displayOutsideMaxExtent: true,
  100.                         isBaseLayer: true,
  101.                         yx : {'EPSG:4326' : true}
  102.                     }
  103.             );
  104.             map.addLayers([tiled]);
  105.             map.addControl(new OpenLayers.Control.Zoom());
  106.             map.addControl(new OpenLayers.Control.Navigation());
  107.             map.zoomToExtent(bounds);
  108.  
  109.             $("#addchart").on("click",function(){
  110.                 addMapChart();
  111.                 map.events.register("zoomend", map, function(){
  112.                     addMapChart();
  113.                 });
  114.             });
  115.         });
  116.  
  117.         function addMapChart(){
  118.             $(".olPopup").remove();
  119.             var zoom = map.getZoom();
  120.             for(var i=0;i<data.length;i++){
  121.                 var d = data[i];
  122.                 var size=30+(zoom-1)*10;
  123.                 var domid = "chart"+i;
  124.                 var content = "<div class='mapChart' id='"+domid+"' ></div>";
  125.                 var popup = new OpenLayers.Popup(domid,
  126.                         new OpenLayers.LonLat(d.x,d.y),
  127.                         new OpenLayers.Size(size,size),
  128.                         content,
  129.                         false);
  130.                 popup.setBackgroundColor("transparent");
  131.                 popup.setBorder("0px #0066ff solid");
  132.                 popup.keepInMap = false;
  133.                 map.addPopup(popup,false);
  134.                 addChart(domid,d);
  135.             }
  136.             var pops = $(map.div).find(".olPopup");
  137.             for(var i=0;i<pops.length;i++){
  138.                 var pop = $(pops[i]);
  139.                 var top = pop.position().top,
  140.                         left = pop.position().left;
  141.                 pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
  142.             }
  143.         }
  144.         function addChart(domid,data){
  145.             require(
  146.             [
  147.                 'echarts',
  148.                 'echarts/chart/pie'
  149.             ],
  150.                 function (ec) {
  151.                     // 基于准备好的dom，初始化echarts图表
  152.                     var myChart = ec.init(document.getElementById(domid));
  153.                     var option = {
  154.                         // renderAsImage:true,
  155.                         animation:true,
  156.                         tooltip : {
  157.                             trigger: 'item',
  158.                             formatter: "{b}:{c}"
  159.                         },
  160.                         series : [
  161.                             {
  162.                                 type:'pie',
  163.                                 radius : '100%',
  164.                                 center: ['50%', '50%'],
  165.                                 itemStyle:{
  166.                                     normal: {
  167.                                         labelLine:{show: false}
  168.                                     },                        
  169.                                 },
  170.                                 data:data.data,
  171.                                 line:false
  172.                             }
  173.                         ]
  174.                     };
  175.                     // 为echarts对象加载数据
  176.                     myChart.setOption(option);
  177.                 }
  178.             );
  179.         }
  180.     </script>
  181. </head>
  182. <body>
  183. <div id="map">
  184.     <div class="tool">
  185.         <button id="addchart">添加统计图</button>
  186.     </div>
  187. </div>
  188. </body>
  189. </html>

2、gaugechart

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>openlayers map</title>
  6.     <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  7.     <style>
  8.         html, body, #map{
  9.             padding:0;
  10.             margin:0;
  11.             height:100%;
  12.             width:100%;
  13.             overflow: hidden;
  14.         }
  15.         .tool{
  16.             position: absolute;
  17.             top:10pt;
  18.             right: 10pt;
  19.             padding: 5px;
  20.             background: #fff;
  21.             border: 1px solid #ff5500;
  22.             z-index: 1000;
  23.         }
  24.     </style>
  25.     <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
  26.     <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
  27.     <script src="../../../plugin/echart/build/dist/echarts.js"></script>
  28.     <script>
  29.         require.config({
  30.             paths: {
  31.                 echarts: '../../../plugin/echart/build/dist'
  32.             }
  33.         });
  34.         var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,value:22},
  35.             {name:"拉萨",x:91.1629975040,y:29.7104204643,value:-10},
  36.             {name:"北京",x:116.4575803581078,y:40.04054437977018,value:32},
  37.             {name:"兰州",x:103.584297498,y:36.1190864503,value:25}];
  38.         var map;
  39.         var tiled;
  40.         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
  41.         OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
  42.         $(window).load(function() {
  43.             var format = 'image/png';
  44.             var bounds = new OpenLayers.Bounds(
  45.                     73.45100463562233, 18.16324718764174,
  46.                     134.97679764650596, 53.531943152223576
  47.             );
  48.             var options = {
  49.                 controls: [],
  50.                 maxExtent: bounds,
  51.                 maxResolution: 0.2403351289487642,
  52.                 projection: "EPSG:4326",
  53.                 units: 'degrees'
  54.             };
  55.             map = new OpenLayers.Map('map', options);
  56.             var url = "http://localhost:8088/geoserver/lzugis/wms";
  57.             tiled = new OpenLayers.Layer.WMS(
  58.                     "Geoserver layers - Tiled",
  59.                     url,
  60.                     {
  61.                         "LAYERS": 'lzugis:province',
  62.                         "STYLES": '',
  63.                         format: format
  64.                     },
  65.                     {
  66.                         buffer: 0,
  67.                         displayOutsideMaxExtent: true,
  68.                         isBaseLayer: true,
  69.                         yx : {'EPSG:4326' : true}
  70.                     }
  71.             );
  72.             map.addLayers([tiled]);
  73.             map.addControl(new OpenLayers.Control.Zoom());
  74.             map.addControl(new OpenLayers.Control.Navigation());
  75.             map.zoomToExtent(bounds);
  76.  
  77.             $("#addchart").on("click",function(){
  78.                 addMapChart();
  79.                 map.events.register("zoomend", map, function(){
  80.                     addMapChart();
  81.                 });
  82.             });
  83.         });
  84.  
  85.         function addMapChart(){
  86.             $(".olPopup").remove();
  87.             var zoom = map.getZoom();
  88.             for(var i=0;i<data.length;i++){
  89.                 var d = data[i];
  90.                 var size=60+(zoom-1)*10;
  91.                 var domid = "chart"+i;
  92.                 var content = "<div class='mapChart' id='"+domid+"' ></div>";
  93.                 var popup = new OpenLayers.Popup(domid,
  94.                         new OpenLayers.LonLat(d.x,d.y),
  95.                         new OpenLayers.Size(size,size),
  96.                         content,
  97.                         false);
  98.                 popup.setBackgroundColor("transparent");
  99.                 popup.setBorder("0px #0066ff solid");
  100.                 popup.keepInMap = false;
  101.                 map.addPopup(popup,false);
  102.                 addChart(domid,d);
  103.             }
  104.             var pops = $(map.div).find(".olPopup");
  105.             for(var i=0;i<pops.length;i++){
  106.                 var pop = $(pops[i]);
  107.                 var top = pop.position().top,
  108.                         left = pop.position().left;
  109.                 pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
  110.             }
  111.         }
  112.         function addChart(domid,data){
  113.             require(
  114.             [
  115.                 'echarts',
  116.                 'echarts/chart/gauge'
  117.             ],
  118.                 function (ec) {
  119.                     // 基于准备好的dom，初始化echarts图表
  120.                     var myChart = ec.init(document.getElementById(domid));
  121.                     var option = {
  122.                         tooltip : {
  123.                             formatter: "{c}℃"
  124.                         },
  125.                         series : [
  126.                             {                                
  127.                                 type:'gauge',
  128.                                 radius:'80%',
  129.                                 min:-20,
  130.                                 max:40,
  131.                                 axisLine: {            // 坐标轴线
  132.                                     lineStyle: {       // 属性lineStyle控制线条样式
  133.                                         color: [[0.33, '#48b'],[0.8, '#228b22'],[1, '#ff4500']], 
  134.                                         width: 4
  135.                                     }
  136.                                 },
  137.                                 axisTick: {            // 坐标轴小标记
  138.                                     splitNumber: 2,   // 每份split细分多少段
  139.                                     length :12,        // 属性length控制线长
  140.                                     lineStyle: {       // 属性lineStyle控制线条样式
  141.                                         color: 'auto'
  142.                                     }
  143.                                 },
  144.                                 axisLabel: { 
  145.                                     show:false,
  146.                                     interval:'auto',
  147.                                     textStyle: {
  148.                                         color: 'auto',
  149.                                         fontFamily:'微软雅黑',
  150.                                         fontSize: '10'
  151.                                     }
  152.                                 },
  153.                                 splitLine: {
  154.                                     show: true,
  155.                                     length :16,   
  156.                                     lineStyle: {       // 属性lineStyle控制线条样式
  157.                                         color: 'auto'
  158.                                     }
  159.                                 },
  160.                                 detail : {
  161.                                     formatter:'{value}℃',
  162.                                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  163.                                         color: 'auto',
  164.                                         fontWeight: 'bolder',
  165.                                         fontSize: '15'
  166.                                     }
  167.                                 },
  168.                                 data:[{value: data.value}]
  169.                             }
  170.                         ]
  171.                     };
  172.                     // 为echarts对象加载数据
  173.                     myChart.setOption(option);
  174.                 }
  175.             );
  176.         }
  177.     </script>
  178. </head>
  179. <body>
  180. <div id="map">
  181.     <div class="tool">
  182.         <button id="addchart">添加统计图</button>
  183.     </div>
  184. </div>
  185. </body>
  186. </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)




声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/728207
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号