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

最新推荐文章于 2021-12-24 13:39:58 发布

a18826265589

最新推荐文章于 2021-12-24 13:39:58 发布

阅读量151

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hanhuibing/articles/5681303.html

版权

概述：

在前文中讲到了在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。

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

关键代码：

[javascript] view plain copy print ?

$("#addchart").on("click",function(){
for(var i=0;i<data.length;i++){
var d = data[i];
var pt = [d.x, d.y];
var domid = "chart"+i;
$("#chart").append("<div id='"+domid+"'></div>");
var chart = new ol.Overlay({
position: pt,
positioning: ol.OverlayPositioning.CENTER_CENTER,
element: document.getElementById(domid)
});
map.addOverlay(chart);
addChart(domid,d,100);
}
});

[javascript] view plain copy print ?

function addChart(domid,data,size){
$('#'+domid).highcharts({
chart: {
backgroundColor: 'rgba(255, 255, 255, 0)',
plotBorderColor: null,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: null,
plotShadow: false,
width: size,
height: size
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
credits:{
enabled:false
},
title: {
text: ''
},
plotOptions:{
pie: {
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: data.name,
data: data.data
}]
});
}

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

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

[html] view plain copy print ?

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://www.cnblogs.com/hanhuibing/articles/5681303.html

a18826265589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Openlayers3中统计图的实现：结合highcharts实现统计图

概述：在前文中讲到了在Arcgis for js中统计图的实现，在本文，讲述在Openlayers3中结合highcharts实现统计图。实现：在Openlayers3中实现统计图比较方便，通过ol.Overlay即可。首先，了解下Overlay。在OL3的借口文档中，Overlay的描述如下：An element to be displayed over the ...
复制链接

扫一扫