Openlayers2中聚类的动态实现

by · 2019-04-03

概述：

前面的文章中，讲述了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> 

转载自：https://blog.csdn.net/xiaohan2826/article/details/53859991

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序