Openlayers2中聚类的动态实现

概述：

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

 

实现效果：

 

实现：

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

1、点的聚类与更新

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  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、点的详细

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  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> 
posted @ 2016-07-18 15:08  韩慧兵  阅读(931)  评论(0)  编辑  收藏  举报