Openlayers3中统计图的实现：结合highcharts实现统计图

by · 2019-04-03

概述：

在前文中讲到了在Arcgis for js中统计图的实现，在本文，讲述在Openlayers3中结合highcharts实现统计图。

 

实现：

在Openlayers3中实现统计图比较方便，通过ol.Overlay即可。首先，了解下Overlay。在OL3的借口文档中，Overlay的描述如下：

An element to be displayed over the map and attached to a single map location。

大概意思就是一个有空间位置的可以在地图上展示的要素。

关键代码：

  1. $(“#addchart”).on(“click”,function(){  
  2.     for(var i=0;i<data.length;i++){  
  3.         var d = data[i];  
  4.         var pt = [d.x, d.y];  
  5.         var domid = “chart”+i;  
  6.         $(“#chart”).append(“<div id='”+domid+“‘></div>”);  
  7.         var chart = new ol.Overlay({  
  8.             position: pt,  
  9.             positioning: ol.OverlayPositioning.CENTER_CENTER,  
  10.             element: document.getElementById(domid)  
  11.         });  
  12.         map.addOverlay(chart);  
  13.         addChart(domid,d,100);  
  14.     }  
  15. });  
  1. function addChart(domid,data,size){  
  2.     $(‘#’+domid).highcharts({  
  3.         chart: {  
  4.             backgroundColor: ‘rgba(255, 255, 255, 0)’,  
  5.             plotBorderColor: null,  
  6.             plotBackgroundColor: null,  
  7.             plotBackgroundImage: null,  
  8.             plotBorderWidth: null,  
  9.             plotShadow: false,  
  10.             width: size,  
  11.             height: size  
  12.         },  
  13.         tooltip: {  
  14.             pointFormat: ‘<b>{point.percentage:.1f}%</b>’  
  15.         },  
  16.         credits:{  
  17.             enabled:false  
  18.         },  
  19.         title: {  
  20.             text: ”  
  21.         },  
  22.         plotOptions:{  
  23.             pie: {  
  24.                 dataLabels: {  
  25.                     enabled: false  
  26.                 }  
  27.             }  
  28.         },  
  29.         series: [{  
  30.             type: ‘pie’,  
  31.             name: data.name,  
  32.             data: data.data  
  33.         }]  
  34.     });  
  35. }  

上述代码运行后的效果如下：

上述示例的完整代码如下：

[html]
view plain
copy
print?在CODE上查看代码片派生到我的代码片
  1. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  2. <head>  
  3.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />  
  4.     <title>Ol3 wms</title>  
  5.     <link rel=“stylesheet” type=“text/css” href=“../../../plugin/ol3/css/ol.css”/>  
  6.     <style type=“text/css”>  
  7.         body, #map {  
  8.             border: 0px;  
  9.             margin: 0px;  
  10.             padding: 0px;  
  11.             width: 100%;  
  12.             height: 100%;  
  13.             font-size: 13px;  
  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: 100;  
  23.         }  
  24.     </style>  
  25.     <script type=“text/javascript” src=“../../../plugin/ol3/build/ol-debug.js”></script>  
  26.     <script type=“text/javascript” src=“../../../plugin/jquery/jquery-1.8.3.js”></script>  
  27.     <script src=“../../../plugin/highcharts/highcharts.js”></script>  
  28.     <script type=“text/javascript”>  
  29.         var data = [{name:”乌鲁木齐”,x:87.5758285931,y:43.7822116460,data:[  
  30.             {  
  31.                 name: ‘男’,  
  32.                 y: 40.0,  
  33.                 color:”#5ab1ef”  
  34.             },{  
  35.                 name: ‘女’,  
  36.                 y: 60.0,  
  37.                 color:”#d87a80″  
  38.             }  
  39.         ]},  
  40.             {name:”拉萨”,x:91.1629975040,y:29.7104204643,data:[  
  41.                 {  
  42.                     name: ‘男’,  
  43.                     y: 45.0,  
  44.                     color:”#5ab1ef”  
  45.                 },{  
  46.                     name: ‘女’,  
  47.                     y: 55.0,  
  48.                     color:”#d87a80″  
  49.                 }  
  50.             ]},  
  51.             {name:”北京”,x:116.4575803581078,y:40.04054437977018,data:[  
  52.                 {  
  53.                     name: ‘男’,  
  54.                     y: 35.0,  
  55.                     color:”#5ab1ef”  
  56.                 },{  
  57.                     name: ‘女’,  
  58.                     y: 65.0,  
  59.                     color:”#d87a80″  
  60.                 }  
  61.             ]},  
  62.             {name:”兰州”,x:103.584297498,y:36.1190864503,data:[  
  63.                 {  
  64.                     name: ‘男’,  
  65.                     y: 44.0,  
  66.                     color:”#5ab1ef”  
  67.                 },{  
  68.                     name: ‘女’,  
  69.                     y: 56.0,  
  70.                     color:”#d87a80″  
  71.                 }  
  72.             ]}];  
  73.         var map;  
  74.         function init(){  
  75.             var format = ‘image/png’;  
  76.             var bounds = [73.4510046356223, 18.1632471876417,  
  77.                 134.976797646506, 53.5319431522236];  
  78.             var tiled = new ol.layer.Tile({  
  79.                 visible: true,  
  80.                 source: new ol.source.TileWMS({  
  81.                     url: ‘http://localhost:8088/geoserver/lzugis/wms’,  
  82.                     params: {‘FORMAT’: format,  
  83.                         ‘VERSION’: ‘1.1.1’,  
  84.                         tiled: true,  
  85.                         LAYERS: ‘lzugis:province’,  
  86.                         STYLES: ”  
  87.                     }  
  88.                 })  
  89.             });  
  90.             var projection = new ol.proj.Projection({  
  91.                 code: ‘EPSG:4326’,  
  92.                 units: ‘degrees’  
  93.             });  
  94.             map = new ol.Map({  
  95.                 controls: ol.control.defaults({  
  96.                     attribution: false  
  97.                 }),  
  98.                 target: ‘map’,  
  99.                 layers: [  
  100.                     tiled  
  101.                 ],  
  102.                 view: new ol.View({  
  103.                     projection: projection  
  104.                 })  
  105.             });  
  106.             map.getView().fitExtent(bounds, map.getSize());  
  107.             var view =map.getView();  
  108.             $(“#addchart”).on(“click”,function(){  
  109.                 for(var i=0;i<data.length;i++){  
  110.                     var d = data[i];  
  111.                     var pt = [d.x, d.y];  
  112.                     var domid = “chart”+i;  
  113.                     $(“#chart”).append(“<div id=‘”+domid+”‘></div>”);  
  114.                     var chart = new ol.Overlay({  
  115.                         position: pt,  
  116.                         positioning: ol.OverlayPositioning.CENTER_CENTER,  
  117.                         element: document.getElementById(domid)  
  118.                     });  
  119.                     map.addOverlay(chart);  
  120.                     addChart(domid,d,100);  
  121.                 }  
  122.             });  
  123.         }  
  124.         function addChart(domid,data,size){  
  125.             $(‘#’+domid).highcharts({  
  126.                 chart: {  
  127.                     backgroundColor: ‘rgba(255, 255, 255, 0)’,  
  128.                     plotBorderColor: null,  
  129.                     plotBackgroundColor: null,  
  130.                     plotBackgroundImage: null,  
  131.                     plotBorderWidth: null,  
  132.                     plotShadow: false,  
  133.                     width: size,  
  134.                     height: size  
  135.                 },  
  136.                 tooltip: {  
  137.                     pointFormat: ‘<b>{point.percentage:.1f}%</b>’  
  138.                 },  
  139.                 credits:{  
  140.                     enabled:false  
  141.                 },  
  142.                 title: {  
  143.                     text: ”  
  144.                 },  
  145.                 plotOptions:{  
  146.                     pie: {  
  147.                         dataLabels: {  
  148.                             enabled: false  
  149.                         }  
  150.                     }  
  151.                 },  
  152.                 series: [{  
  153.                     type: ‘pie’,  
  154.                     name: data.name,  
  155.                     data: data.data  
  156.                 }]  
  157.             });  
  158.         }  
  159.     </script>  
  160. </head>  
  161. <body onLoad=“init()”>  
  162. <div id=“map”>  
  163.     <div class=“tool”>  
  164.         <button id=“addchart”>添加统计图</button>  
  165.     </div>  
  166.     <div style=“display: none;” id=“chart”>  
  167.     </div>  
  168. </div>  
  169. </body>  
  170. </html> 

转载自：https://blog.csdn.net/xiaohan2826/article/details/53860010

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序