Openlayers2中统计图的实现

最新推荐文章于 2024-04-22 10:01:25 发布

a18826265589

最新推荐文章于 2024-04-22 10:01:25 发布

阅读量129

点赞数

文章标签： javascript ViewUI

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

版权

概述：

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

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

a18826265589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Openlayers2中统计图的实现

概述：在前文中，介绍了Arcgis for js和Openlayers3中统计图的实现，在本文，书接上文，介绍在Openlayers2中，统计图的实现。实现：在Openlayers2中，popup的概念是：A popup is a small div that can opened and closed on the map. 所以，在OL2中，可以用popup来实...
复制链接

扫一扫