Openlayers2中统计图的实现

概述：

在前文中，介绍了Arcgis for js和Openlayers3中统计图的实现，在本文，书接上文，介绍在Openlayers2中，统计图的实现。

 

实现：

在Openlayers2中，popup的概念是：A popup is a small div that can opened and closed on the map.   所以，在OL2中，可以用popup来实现统计图的展示。首先，看看实现后的结果：

实现的代码如下：

[html] view plain copy print?在CODE上查看代码片派生到我的代码片
    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/highcharts/highcharts.js"></script>  
    28.     <script>  
    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.         var tiled;  
    75.         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;  
    76.         OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;  
    77.         $(window).load(function() {  
    78.             var format = 'image/png';  
    79.             var bounds = new OpenLayers.Bounds(  
    80.                     73.45100463562233, 18.16324718764174,  
    81.                     134.97679764650596, 53.531943152223576  
    82.             );  
    83.             var options = {  
    84.                 controls: [],  
    85.                 maxExtent: bounds,  
    86.                 maxResolution: 0.2403351289487642,  
    87.                 projection: "EPSG:4326",  
    88.                 units: 'degrees'  
    89.             };  
    90.             map = new OpenLayers.Map('map', options);  
    91.             var time = new Date();  
    92.             time = time.getTime();  
    93.             var url = "http://localhost:8081/lzugis/wms?t="+time;  
    94.             tiled = new OpenLayers.Layer.WMS(  
    95.                     "Geoserver layers - Tiled",  
    96.                     url,  
    97.                     {  
    98.                         "LAYERS": '1,6',  
    99.                         "STYLES": '',  
    100.                         format: format  
    101.                     },  
    102.                     {  
    103.                         buffer: 0,  
    104.                         displayOutsideMaxExtent: true,  
    105.                         isBaseLayer: true,  
    106.                         yx : {'EPSG:4326' : true}  
    107.                     }  
    108.             );  
    109.             map.addLayers([tiled]);  
    110.             map.addControl(new OpenLayers.Control.Navigation());  
    111.             map.zoomToExtent(bounds);  
    112.   
    113.             $("#addchart").on("click",function(){  
    114.                 for(var i=0;i<data.length;i++){  
    115.                     var d = data[i];  
    116.                     var size=100;  
    117.                     var domid = "chart"+i;  
    118.                     var content = "<div id='"+domid+"'></div>";  
    119.                     console.log(content);  
    120.                     var popup = new OpenLayers.Popup(domid,  
    121.                             new OpenLayers.LonLat(d.x,d.y),  
    122.                             new OpenLayers.Size(size,size),  
    123.                             content,  
    124.                             false);  
    125.                     popup.setBackgroundColor("transparent");  
    126.                     popup.setBorder("0px #0066ff solid");  
    127.                     map.addPopup(popup,false);  
    128.                     addChart(domid,d,size);  
    129.                 }  
    130.             });  
    131.         });  
    132.         function addChart(domid,data,size){  
    133.             $('#'+domid).highcharts({  
    134.                 chart: {  
    135.                     backgroundColor: 'rgba(255, 255, 255, 0)',  
    136.                     plotBorderColor: null,  
    137.                     plotBackgroundColor: null,  
    138.                     plotBackgroundImage: null,  
    139.                     plotBorderWidth: null,  
    140.                     plotShadow: false,  
    141.                     width: size,  
    142.                     height: size  
    143.                 },  
    144.                 tooltip: {  
    145.                     pointFormat: '<b>{point.percentage:.1f}%</b>'  
    146.                 },  
    147.                 credits:{  
    148.                     enabled:false  
    149.                 },  
    150.                 title: {  
    151.                     text: ''  
    152.                 },  
    153.                 plotOptions:{  
    154.                     pie: {  
    155.                         dataLabels: {  
    156.                             enabled: false  
    157.                         }  
    158.                     }  
    159.                 },  
    160.                 series: [{  
    161.                     type: 'pie',  
    162.                     name: data.name,  
    163.                     data: data.data  
    164.                 }]  
    165.             });  
    166.         }  
    167.     </script>  
    168. </head>  
    169. <body>  
    170. <div id="map">  
    171.     <div class="tool">  
    172.         <button id="addchart">添加统计图</button>  
    173.     </div>  
    174.     <div style="display: none;" id="chart">  
    175.     </div>  
    176. </div>  
    177. </body>  
    178. </html> 
posted @ 2016-07-18 15:11  韩慧兵  阅读(345)  评论(0)  编辑  收藏  举报