http://blog.csdn.net/gisshixisheng/article/details/46137015

概述：

在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示，在本文中讲述如何基于openlayers实现聚类统计的效果，Arcgis for js聚类统计的博文地址为：

http://blog.csdn.net/gisshixisheng/article/details/40867989

效果：

实现关键点：

实现代码：

1、数据格式

2、设置显示样式

  1. var style = new OpenLayers.Style({
  2. fillColor: "#ffcc66",
  3. strokeColor: "#ff9933",
  4. strokeWidth: 2,
  5. label: "${count}",
  6. fontColor: "#333333",
  7. fontFamily: "sans-serif",
  8. fontWeight: "bold"
  9. }, {
  10. rules: [
  11. new OpenLayers.Rule({
  12. minScaleDenominator: 100000000,
  13. symbolizer: {
  14. pointRadius: 7,
  15. fontSize: "9px"
  16. }
  17. }),
  18. new OpenLayers.Rule({
  19. maxScaleDenominator: 100000000,
  20. minScaleDenominator: 50000000,
  21. symbolizer: {
  22. pointRadius: 10,
  23. fontSize: "11px"
  24. }
  25. }),
  26. new OpenLayers.Rule({
  27. maxScaleDenominator: 50000000,
  28. symbolizer: {
  29. pointRadius: 13,
  30. fontSize: "13px"
  31. }
  32. })
  33. ]
  34. });

3、添加矢量图层

  1. var features = new Array();
  2. for (var i=0; i<data.length; i++) {
  3. features[i] = new OpenLayers.Feature.Vector(
  4. new OpenLayers.Geometry.Point(data[i].x, data[i].y),
  5. {
  6. count:data[i].count,
  7. name:data[i].name
  8. }
  9. );
  10. }
  11. var clusterLayer = new OpenLayers.Layer.Vector("Points", {
  12. styleMap: new OpenLayers.StyleMap(style)
  13. });
  14. clusterLayer.addFeatures(features);
  15. map1.addLayer(clusterLayer);

程序完整代码为；

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4. <meta charset="UTF-8">
    5. <title>openlayers map</title>
    6. <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
    7. <style>
    8. html, body{
    9. padding:0;
    10. margin:0;
    11. height:100%;
    12. width:100%;
    13. overflow: hidden;
    14. font-size: 12px;
    15. }
    16. #map1{
    17. width: 100%;
    18. height: 100%;
    19. float: left;
    20. border-right: 1px solid #000000;
    21. }
    22. </style>
    23. <script src="http://localhost/olapi/OpenLayers.js"></script>
    24. <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
    25. <script src="http://localhost/jquery/jquery-1.8.3.js"></script>
    26. <script>
    27. var map1, vectors;
    28. OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
    29. $(function(){
    30. var bounds = new OpenLayers.Bounds(
    31. 73.45100463562233, 18.16324718764174,
    32. 134.97679764650596, 53.531943152223576
    33. );
    34. var options = {
    35. controls: [],
    36. maxExtent: bounds,
    37. maxResolution: 0.2403351289487642,
    38. projection: "EPSG:4326",
    39. units: 'degrees'
    40. };
    41. map1 = new OpenLayers.Map('map1', options);
    42. map1.addLayer(getWms("china"));
    43. map1.addControl(new OpenLayers.Control.Zoom());
    44. map1.addControl(new OpenLayers.Control.Navigation());
    45. map1.zoomToExtent(bounds);
    46. addCluster();
    47. });
    48. function getWms(layer){
    49. return new OpenLayers.Layer.WMS(
    50. "Geoserver layers - Tiled",
    51. "http://localhost:8081/geoserver/lzugis/wms",
    52. {
    53. "LAYERS": layer,
    54. "STYLES": '',
    55. format: 'image/png'
    56. },
    57. {
    58. buffer: 0,
    59. displayOutsideMaxExtent: true,
    60. isBaseLayer: true,
    61. yx : {'EPSG:4326' : true}
    62. }
    63. );
    64. }
    65. function addCluster(){
    66. var style = new OpenLayers.Style({
    67. fillColor: "#ffcc66",
    68. strokeColor: "#ff9933",
    69. strokeWidth: 2,
    70. label: "${count}",
    71. fontColor: "#333333",
    72. fontFamily: "sans-serif",
    73. fontWeight: "bold"
    74. }, {
    75. rules: [
    76. new OpenLayers.Rule({
    77. minScaleDenominator: 100000000,
    78. symbolizer: {
    79. pointRadius: 7,
    80. fontSize: "9px"
    81. }
    82. }),
    83. new OpenLayers.Rule({
    84. maxScaleDenominator: 100000000,
    85. minScaleDenominator: 50000000,
    86. symbolizer: {
    87. pointRadius: 10,
    88. fontSize: "11px"
    89. }
    90. }),
    91. new OpenLayers.Rule({
    92. maxScaleDenominator: 50000000,
    93. symbolizer: {
    94. pointRadius: 13,
    95. fontSize: "13px"
    96. }
    97. })
    98. ]
    99. });
    100. var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,count:10},
    101. {name:"拉萨",x:91.1629975040,y:29.7104204643,count:30},
    102. {name:"西宁",x:101.797302689,y:36.5936423859,count:50},
    103. {name:"兰州",x:103.584297498,y:36.1190864503,count:70},
    104. {name:"成都",x:104.035508297,y:30.7141790950,count:90},
    105. {name:"重庆",x:106.519115206,y:29.4789248520,count:60},
    106. {name:"贵阳",x:106.668071385,y:26.4573115457,count:20}];
    107. var features = new Array();
    108. for (var i=0; i<data.length; i++) {
    109. features[i] = new OpenLayers.Feature.Vector(
    110. new OpenLayers.Geometry.Point(data[i].x, data[i].y),
    111. {
    112. count:data[i].count,
    113. name:data[i].name
    114. }
    115. );
    116. }
    117. var clusterLayer = new OpenLayers.Layer.Vector("Points", {
    118. styleMap: new OpenLayers.StyleMap(style)
    119. });
    120. clusterLayer.addFeatures(features);
    121. map1.addLayer(clusterLayer);
    122. }
    123. </script>
    124. </head>
    125. <body>
    126. <div id="map1"></div>
    127. </body>
    128. </html>

最新文章

  1. Google之Chromium浏览器源码学习——base公共通用库(一)
  2. ABP理论学习之缓存Caching
  3. 【总结】详细说说@Html.ActionLink()的用法
  4. 逐行读取txt文件，使用Linq与StreamReader的Readline方法
  5. java那些小事---用偶数做判断，不要用基数做判断
  6. LeetCode 01 Two Sum swift
  7. Java replace &amp; replaceAll
  8. 背景图片与 CSS的那些事
  9. mysql笔记02 创建高性能的索引
  10. JSF 2 radio buttons example
  11. 2015WF有感
  12. Linux是什么
  13. Grunt构建工具能做哪些事？
  14. iOS之内存分析
  15. Python爬虫从入门到放弃（十六）之 Scrapy框架中Item Pipeline用法
  16. day13
  17. Python科学计算学习之高级数组（二）
  18. struts2框架学习笔记2：配置详解
  19. CSS3动画详解(结合实例)
  20. flume 集群datanode节点失败导致hdfs写失败(转)

热门文章

  1. 【Codeforces 158C】Cd and pwd commands
  2. 敏捷开发系列学习总结（4）—Git管理工具sourcetree的安装
  3. hdu6096 String
  4. 2.1.5、SparkEnv中创建MapOutputTracker
  5. [cogs729] [网络流24题#5] 圆桌聚餐 [网络流，最大流，多重二分图匹配]
  6. Docker在Windows 7下安装
  7. 对SPI、IIC、IIS、UART、CAN、SDIO、GPIO的解释
  8. ELECTRON开发环境配置方法
  9. HPC2013小节
  10. [Angular] Using ngTemplateOutlet to create dynamic template