Openlayers2中聚类的动态实现

最新推荐文章于 2024-06-26 17:57:58 发布
最新推荐文章于 2024-06-26 17:57:58 发布
阅读量823 收藏
点赞数
分类专栏： WebGIS-Openlayers专题

概述：

前面的文章中，讲述了Arcgis for js中聚类分析与展示，在本文，讲述如何在Openlayers2中聚类分析的实现。

 

实现效果：

 

实现：

主要分为：1、点的聚类；2、聚类点随着地图缩放的更新；3、聚类点的详细。

1、点的聚类与更新

  1. var style = new OpenLayers.Style({  
  2.     pointRadius: "${radius}",  
  3.     fillColor: "#ff0000",  
  4.     label: "${name}",  
  5.     fontSize: "8px",  
  6.     cursor : "pointer",  
  7.     fontWeight:"bold",  
  8.     fontColor: "#ffffff",  
  9.     fontFamily:"sans-serif",  
  10.     fillOpacity: 0.8,  
  11.     strokeColor: "#ff0000",  
  12.     strokeWidth: "3",  
  13.     strokeOpacity: 1  
  14. }, {  
  15.     context: {  
  16.         width: function ( feature ) {  
  17.             return ( feature.cluster ) ? 2 : 1;  
  18.         },  
  19.         radius: function ( feature ) {  
  20.             var pix = 2;  
  21.             if ( feature.cluster ) {  
  22.                 pix = Math.min( feature.attributes.count, 7 ) + 5;  
  23.             }  
  24.             return pix;  
  25.         },  
  26.         name: function ( feature ) {  
  27.             var name;  
  28.             if ( feature.attributes.count > 1 ) {  
  29.                 name = feature.attributes.count;  
  30.             } else {  
  31.                 name = feature.cluster[0].attributes.name;  
  32.             }  
  33.             return name;  
  34.         }  
  35.     }  
  36. });  
  37. strategy = new OpenLayers.Strategy.Cluster();  
  38. clusters = new OpenLayers.Layer.Vector( "Clusters", {  
  39.     strategies: [strategy],  
  40.     styleMap: new OpenLayers.StyleMap( {  
  41.         "default": style,  
  42.         "select": {  
  43.             fillColor: "#0000ff",  
  44.             strokeColor: "#0000ff"  
  45.         }  
  46.     } )  
  47. });  
  48. map.addLayer(clusters);  
  49. var distance = 150;  
  50. var threshold = 1;  
  51. strategy.distance = distance || strategy.distance;  
  52. strategy.threshold = threshold || strategy.threshold;  
  53. clusters.addFeatures(features2);  


2、点的详细

  1. var vectors = new OpenLayers.Layer.Vector("select",{  
  2.     styleMap: new OpenLayers.StyleMap({  
  3.         "default": {  
  4.             fillColor: "#00ffff",  
  5.             strokeColor: "#00ffff",  
  6.             pointRadius: "2"  
  7.         }  
  8.     })  
  9. });  
  10. map.addLayer(vectors);  
  11. var select =  new OpenLayers.Control.SelectFeature(  
  12.         clusters,  
  13.         {  
  14.             clickout: true,  
  15.             toggle: false,  
  16.             multiple: false,  
  17.             hover: false,  
  18.             toggleKey: "ctrlKey", // ctrl key removes from selection  
  19.             multipleKey: "shiftKey", // shift key adds to selection  
  20.             box: false  
  21.         }  
  22. );  
  23. map.addControl(select);  
  24. select.activate();  
  25. clusters.events.on({  
  26.     'featureselected': function(feature) {  
  27.         vectors.removeAllFeatures();  
  28.         var cluster = feature.feature.cluster;  
  29.         vectors.addFeatures(cluster);  
  30.     },  
  31.     'featureunselected': function(feature) {  
  32.         vectors.removeAllFeatures();  
  33.     }  
  34. });  
  35. map.events.register("zoomend",map,function(){  
  36.     vectors.removeAllFeatures();  
  37. });  


详细代码如下：

[html] view plain copy print?在CODE上查看代码片派生到我的代码片
  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.             overflow: hidden;  
  13.         }  
  14.     </style>  
  15.     <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>  
  16.     <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>  
  17.     <script src="data/county.js"></script>  
  18.     <script>  
  19.         var map, strategy, clusters;  
  20.         var features2 = [];  
  21.         $(function(){  
  22.             var bounds = new OpenLayers.Bounds(  
  23.                     73.45100463562233, 18.16324718764174,  
  24.                     134.97679764650596, 53.531943152223576  
  25.             );  
  26.             var mapOptions = {  
  27.                 resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],  
  28.                 projection: new OpenLayers.Projection('EPSG:4326'),  
  29.                 maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),  
  30.                 units: "degrees",  
  31.                 controls: []  
  32.             };  
  33.             map = new OpenLayers.Map('map', mapOptions );  
  34.             map.addLayer(getWms("province"));  
  35.             map.addControl(new OpenLayers.Control.Zoom());  
  36.             map.addControl(new OpenLayers.Control.Navigation());  
  37.             map.zoomToExtent(bounds);  
  38.             addCluster();  
  39.         });  
  40.         function getWms(layer){  
  41.             return new OpenLayers.Layer.WMS(  
  42.                     "Geoserver layers - Tiled",  
  43.                     "http://localhost:8088/geoserver/lzugis/wms",  
  44.                     {  
  45.                         "LAYERS": layer,  
  46.                         "STYLES": '',  
  47.                         format: 'image/png'  
  48.                     },  
  49.                     {  
  50.                         buffer: 0,  
  51.                         displayOutsideMaxExtent: true,  
  52.                         isBaseLayer: true,  
  53.                         yx : {'EPSG:4326' : true}  
  54.                     }  
  55.             );  
  56.         }  
  57.         function addCluster(){  
  58.             if ( countydata != null ) {  
  59.                 for (var i = 0; i < countydata.length; i++) {  
  60.                     var county = countydata[i];  
  61.                     var point3 = new OpenLayers.Geometry.Point(county.x, county.y );  
  62.                     var geometry = point3.clone();  
  63.                     var pointFeature3 = new OpenLayers.Feature.Vector(geometry);  
  64.                     pointFeature3.attributes = {  
  65.                         name: county.name  
  66.                     };  
  67.                     features2.push(pointFeature3);  
  68.                 }  
  69.             }  
  70.             var style = new OpenLayers.Style({  
  71.                 pointRadius: "${radius}",  
  72.                 fillColor: "#ff0000",  
  73.                 label: "${name}",  
  74.                 fontSize: "8px",  
  75.                 cursor : "pointer",  
  76.                 fontWeight:"bold",  
  77.                 fontColor: "#ffffff",  
  78.                 fontFamily:"sans-serif",  
  79.                 fillOpacity: 0.8,  
  80.                 strokeColor: "#ff0000",  
  81.                 strokeWidth: "3",  
  82.                 strokeOpacity: 1  
  83.             }, {  
  84.                 context: {  
  85.                     width: function ( feature ) {  
  86.                         return ( feature.cluster ) ? 2 : 1;  
  87.                     },  
  88.                     radius: function ( feature ) {  
  89.                         var pix = 2;  
  90.                         if ( feature.cluster ) {  
  91.                             pix = Math.min( feature.attributes.count, 7 ) + 5;  
  92.                         }  
  93.                         return pix;  
  94.                     },  
  95.                     name: function ( feature ) {  
  96.                         var name;  
  97.                         if ( feature.attributes.count > 1 ) {  
  98.                             name = feature.attributes.count;  
  99.                         } else {  
  100.                             name = feature.cluster[0].attributes.name;  
  101.                         }  
  102.                         return name;  
  103.                     }  
  104.                 }  
  105.             });  
  106.             strategy = new OpenLayers.Strategy.Cluster();  
  107.             clusters = new OpenLayers.Layer.Vector( "Clusters", {  
  108.                 strategies: [strategy],  
  109.                 styleMap: new OpenLayers.StyleMap( {  
  110.                     "default": style,  
  111.                     "select": {  
  112.                         fillColor: "#0000ff",  
  113.                         strokeColor: "#0000ff"  
  114.                     }  
  115.                 } )  
  116.             });  
  117.             map.addLayer(clusters);  
  118.             var distance = 150;  
  119.             var threshold = 1;  
  120.             strategy.distance = distance || strategy.distance;  
  121.             strategy.threshold = threshold || strategy.threshold;  
  122.             clusters.addFeatures(features2);  
  123.   
  124.             var vectors = new OpenLayers.Layer.Vector("select",{  
  125.                 styleMap: new OpenLayers.StyleMap({  
  126.                     "default": {  
  127.                         fillColor: "#00ffff",  
  128.                         strokeColor: "#00ffff",  
  129.                         pointRadius: "2"  
  130.                     }  
  131.                 })  
  132.             });  
  133.             map.addLayer(vectors);  
  134.             var select =  new OpenLayers.Control.SelectFeature(  
  135.                     clusters,  
  136.                     {  
  137.                         clickout: true,  
  138.                         toggle: false,  
  139.                         multiple: false,  
  140.                         hover: false,  
  141.                         toggleKey: "ctrlKey", // ctrl key removes from selection  
  142.                         multipleKey: "shiftKey", // shift key adds to selection  
  143.                         box: false  
  144.                     }  
  145.             );  
  146.             map.addControl(select);  
  147.             select.activate();  
  148.             clusters.events.on({  
  149.                 'featureselected': function(feature) {  
  150.                     vectors.removeAllFeatures();  
  151.                     var cluster = feature.feature.cluster;  
  152.                     vectors.addFeatures(cluster);  
  153.                 },  
  154.                 'featureunselected': function(feature) {  
  155.                     vectors.removeAllFeatures();  
  156.                 }  
  157.             });  
  158.             map.events.register("zoomend",map,function(){  
  159.                 vectors.removeAllFeatures();  
  160.             });  
  161.         };  
  162.     </script>  
  163. </head>  
  164. <body>  
  165.     <div id="map"></div>  
  166. </body>  
  167. </html> 
韩慧兵
关注
专栏目录
openlayers动态聚类图
01-26
openlayers3动态聚类分析图，点击聚类 ，缩放到合适视图范围，聚类有持续过程
OpenLayers聚类优化，可基于要素属性聚类
最新发布
无可言喻的博客
08-23 1007
实现了基于属性（支持多个）和距离点聚类和样式更新
基于openlayers实现聚类统计展示
weixin_30256505的博客
05-28 155
概述： 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示，在本文中讲述如何基于openlayers实现聚类统计的效果，Arcgis for js聚类统计的博文地址为： http://blog.csdn.net/gisshixisheng/article/details/40867989 效果： 实现关键点： 实现代码： 1、...
（转）基于openlayers实现聚类统计展示
06-09 126
http://blog.csdn.net/gisshixisheng/article/details/46137015 概述： 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示，在本文中讲述如何基于openlayers实现聚类统计的效果，Arcgis for js聚类统计的博文地址为： http://blog.csdn.net/gisshixisheng/ar...
openlayers聚合效果效果下，渲染自定义样式，动态展示
weixin_45188172的博客
09-09 404
动作效果我想了很久，首先还是查看mdn文档，mdn上的例子大概是要用requestAnimationFrame () 方法，实际上方法是对的，但是我这里因为渲染聚合点，所以有多个返回的style，如果要调用渲染方法的话势必会造成无限递归，虽然渲染点位的增多，程序就卡死的越快，而且无法消除之前的递归事件，之后我在openlayer官网找到例子使用layer.on(‘postrender’, animate);这个动态效果想过很久，本来只是一个静态的，但是甲方爸爸不满意，那就得做动态，这个是最终的效果。
【前端小记】--OpenLayers--1.点位图层动态聚合展示
am_xiao_hui的博客
09-01 1365
通常情况，我们在给地图添加图层时，会new一个VectorSource作为数据源，针对以上这种情况的的出现，OpenLayers给出了一个解决办法——聚类。
openlayers很多特效demo
07-01
8. 数据源的动态加载和更新：OpenLayers 支持实时数据的加载和更新，这在处理动态数据如交通流量、天气预报等场景中非常有用。 9. 高级功能：如3D地图、地形剖面图、时间序列动画等，都是OpenLayers 强大的高级功能...
openlayers geoJson格式矢量点，用于测试基于要素属性聚类（数量：10000）
08-23
openlayers geoJson格式矢量点，用于测试基于要素属性聚类（数量：10000）
openlayers 聚类分析中预警marker 的位置在缩放过程中出现偏移
chpswg的专栏
04-07 1021
问题：在做疫情分析时，疫情点采用cluster动态聚集，对于有肺炎患者的地方，通过overlay的方式显示动态闪烁点，但是由于疫情点是动态聚集的，在不同的级别，聚集点不同，下一次聚集时，有肺炎患者的点被聚集到另一个聚集点中，但是预警闪烁点的位置还在原地，这样就造成预警点不在有肺炎患者的聚集点中。 解决办法：当新出现肺炎患者点，将其加入到聚集图层中，同时添加overlay 预警点，并将肺炎患者点的...
openlayers：实现对点要素进行聚类 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 67
openlayers：实现对点要素进行聚类 (附完整源码）
Openlayers实现扩散的动态点（水纹效果）
10-14
主要为大家详细介绍了Openlayers实现扩散的动态点，水纹效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers 要素聚合（cluster）、icon聚合
无心使然云中漫步
06-26 519
本篇介绍一下使用openlayers 要素聚合（cluster），icon聚合。
OpenLayers6入门，OpenLayers点聚合（聚散点）动态样式，根据周围聚集数量不同切换多种颜色显示，点击聚集点散开和地图放大后显示要素图片
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-16 524
OpenLayers入门，OpenLayers点聚合（聚散点）功能，地图缩小显示聚集数量，点击聚集点散开和地图放大后显示要素图片》，我们已经实现了简单的点聚合功能。本章在上一章基础上增加更多动态效果，如根据周围聚集数量不同切换多种颜色显示功能。
Openlayers实战，Openlayers实现呼吸光圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-01 1499
gis主要用来展示数据，所以动态效果是最重要的，本章实现类似呼吸灯一样的点位圆形光晕闪烁动画效果，可以用于选中或者警示等特别提醒的效果，比较醒目。
Openlayers中使用Cluster实现点位元素重合时动态聚合与取消聚合
BADAO_LIUMANG_QIZHI的博客
12-27 2042
场景 Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合： Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面实现缩放地图时元素在指定距离内实现聚合效果。 实际场景中点位是变化的，不是静态的点位，当多个点位在动态更新的过程中如果出现了重合则自动实现聚合效果 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,.
OpenLayers 5 实现动画方式移动和缩放，OpenLayers 4、OpenLayers 3 动画应用（OpenLayers View animate）
EnVon的专栏
10-23 8611
项目中要实现把OpenLayers的View移动到某点并放大到指定级别，参考 http://anzhihun.coding.me/ol3-primer/ch11/11-02.html ，发现大概代码如下： function backWithAnim() { var pan = ol.animation.pan({ duration: 2000, source: map.ge...
Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
BADAO_LIUMANG_QIZHI的博客
12-25 3147
场景 Openlayers中实现地图上打点并显示图标和文字： Openlayers中实现地图上打点并显示图标和文字_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 打点 上面实现加载显示离线地图并显示图标元素的效果后。 实现当多个元素堆积在一起时实现聚合显示效果。 并且伴随着地图的缩放实现自动聚合显示和取消聚合。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
OpenLayers开发中文手册：全面学习指南
实践中，开发者需要考虑地图设计、功能实现、性能优化和跨平台兼容性等多个方面。通过实际项目的开发，开发者可以进一步加深对OpenLayers的理解并积累宝贵的经验。 10. OpenLayers社区资源 OpenLayers拥有一个活跃...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值