Openlayers2中统计图的实现

by · 2019-04-03

概述：

在前文中，介绍了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> 

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

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序