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. 玲珑杯1147 - 最后你还是AK了

    1147 - 最后你还是AK了 Time Limit:5s Memory Limit:256MByte DESCRIPTION 今天HHHH遇到了一颗树,这个树有nn个点(nn为偶数),每条边都有一个 ...

  2. hdu 1273最大流

    #include<stdio.h> #include<string.h> #define inf 1000000000 #include<queue> #defin ...

  3. [转]十五天精通WCF——第一天 三种Binding让你KO80%的业务

    转眼wcf技术已经出现很多年了,也在.net界混的风生水起,同时.net也是一个高度封装的框架,作为在wcf食物链最顶端的我们所能做的任务已经简单的不能再简单了, 再简单的话马路上的大妈也能写wcf了 ...

  4. Linux(1):fork函数

    ps:每一篇博客不过为了记录学习的过程,并反思总结,如有错误,还望指正. 函数原型:extern __pid_t fork (void) __THROWNL; 该函数包括于头文件unistd.h中. ...

  5. hdu1595find the longest of the shortest 最短路

    //给一个无向图,问删除一条边,使得从1到n的最短路最长 //问这个最长路 //这个删除的边必定在最短路上,假设不在.那么走这条最短路肯定比其它短 //枚举删除这条最短路的边,找其最长的即为答案 #i ...

  6. Window下UDP（socket）接和收数据案例

     配置QT的环境变量,这台电脑à属性à高级系统设置à高级à环境变量à系统变量àpathàC:\Qt\Qt5.3.0\5.3\mingw482_32\bin;C:\Qt\Qt5.3.0\Tools\ ...

  7. UIScrollView滚动时隐藏底部导航栏问题

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滚动"); int currentPostio ...

  8. java wait 与 notify sleep

    来自:http://blog.csdn.net/zyplus/article/details/6672775 有适当的代码修改. 在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的 ...

  9. CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)

    网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...

  10. HTML导航 - 点击更改背景

    步骤一: 在须要添加效果的<li>标签中添加onclick事件:<li onclick="setcurrent(this)"> 步骤二: 加入JS代码: f ...