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>

（转）基于openlayers实现聚类统计展示的更多相关文章

  1. 聚类：层次聚类、基于划分的聚类（k-means）、基于密度的聚类、基于模型的聚类

    一.层次聚类 1.层次聚类的原理及分类 1)层次法(Hierarchicalmethods)先计算样本之间的距离.每次将距离最近的点合并到同一个类.然后,再计算类与类之间的距离,将距离最近的类合并为一 ...

  2. 基于密度的聚类之Dbscan算法

    一.算法概述 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法.与划分和层次 ...

  3. 【机器学习】DBSCAN Algorithms基于密度的聚类算法

    一.算法思想: DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法.与划分和层 ...

  4. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  5. DBSCAN聚类︱scikit-learn中一种基于密度的聚类方式

    一.DBSCAN聚类概述 基于密度的方法的特点是不依赖于距离,而是依赖于密度,从而克服基于距离的算法只能发现"球形"聚簇的缺点. DBSCAN的核心思想是从某个核心点出发,不断向密 ...

  6. PHP+jQuery中国地图热点数据统计展示实例

    一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...

  7. 简单易学的机器学习算法—基于密度的聚类算法DBSCAN

    简单易学的机器学习算法-基于密度的聚类算法DBSCAN 一.基于密度的聚类算法的概述 我想了解下基于密度的聚类算法,熟悉下基于密度的聚类算法与基于距离的聚类算法,如K-Means算法之间的区别.    ...

  8. 简单易学的机器学习算法——基于密度的聚类算法DBSCAN

    一.基于密度的聚类算法的概述     最近在Science上的一篇基于密度的聚类算法<Clustering by fast search and find of density peaks> ...

  9. jQuery+PHP+Ajax动态数字统计展示实例

    jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...

随机推荐

  1. 清北学堂模拟赛d2t6 分糖果(candy)

    题目描述总共有n颗糖果,有3个小朋友分别叫做L,Y,K.每个小朋友想拿到至少k颗糖果,但这三个小朋友有一个共同的特点:对3反感.也就是说,如果某个小朋友拿到3颗,13颗,31颗,333颗这样数量的糖果 ...

  2. 关于新世界的大门（新博客地址：BBBob.cf）

    更新:BBBob.cf 这个域名已经不用了(但是依旧可以访问),永久域名改为了BBBob.win 新博客地址为BBBob.cf,以后的博客都会在新博客更新,当然在新博客上我也会写得更用心些,不再像这里 ...

  3. CODEVS1187 Xor最大路径 （Trie树）

    由于权值是在边上,所以很容易发现一个性质:d(x,y)=d(x,root) xor d(y,root). 因为有了这个性质,那么就很好做了.对于每一个点统计到root的距离,记为f 数组. 将f数组里 ...

  4. nyoj_38_布线问题_201403121753

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  5. Lifting the Stone 计算几何 多边形求重心

    Problem Description There are many secret openings in the floor which are covered by a big heavy sto ...

  6. Train Problem II HDU 1023 卡特兰数

    Problem Description As we all know the Train Problem I, the boss of the Ignatius Train Station want ...

  7. [bzoj3192][JLOI2013]删除物品_树状数组_栈

    删除物品 bzoj-3192 JLOI-2013 题目大意:给你n个物品,分成2堆.所有的物品有不同的优先级.我只可以将一堆中的堆顶移动到另一个堆的堆顶.而如果当前物品是全局所有物品中优先级最高的,我 ...

  8. [Meteor] Meteor安装被墙问题

    我的系统安装地址是这个https://static-meteor.netdna-ssl.com/packages-bootstrap/1.3.2.4/meteor-bootstrap-os.osx.x ...

  9. 2014秋C++ 第8周项目 分支程序设计

    课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703.课程资源在云学堂"贺老师课堂"同步展示,使用的帐号请到课 ...

  10. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...