openlayers系列之基于openlayers实现聚类统计展示

效果：


实现关键点：



实现代码：

1、数据格式


2、设置显示样式

[javascript] view plain copy print?
  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、添加矢量图层

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


程序完整代码为；

[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="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.   
    43.             map1.addLayer(getWms("china"));  
    44.             map1.addControl(new OpenLayers.Control.Zoom());  
    45.             map1.addControl(new OpenLayers.Control.Navigation());  
    46.             map1.zoomToExtent(bounds);  
    47.   
    48.             addCluster();  
    49.         });  
    50.   
    51.         function getWms(layer){  
    52.             return new OpenLayers.Layer.WMS(  
    53.                     "Geoserver layers - Tiled",  
    54.                     "http://localhost:8081/geoserver/lzugis/wms",  
    55.                     {  
    56.                         "LAYERS": layer,  
    57.                         "STYLES": '',  
    58.                         format: 'image/png'  
    59.                     },  
    60.                     {  
    61.                         buffer: 0,  
    62.                         displayOutsideMaxExtent: true,  
    63.                         isBaseLayer: true,  
    64.                         yx : {'EPSG:4326' : true}  
    65.                     }  
    66.             );  
    67.         }  
    68.   
    69.         function addCluster(){  
    70.             var style = new OpenLayers.Style({  
    71.                 fillColor: "#ffcc66",  
    72.                 strokeColor: "#ff9933",  
    73.                 strokeWidth: 2,  
    74.                 label: "${count}",  
    75.                 fontColor: "#333333",  
    76.                 fontFamily: "sans-serif",  
    77.                 fontWeight: "bold"  
    78.             }, {  
    79.                 rules: [  
    80.                     new OpenLayers.Rule({  
    81.                         minScaleDenominator: 100000000,  
    82.                         symbolizer: {  
    83.                             pointRadius: 7,  
    84.                             fontSize: "9px"  
    85.                         }  
    86.                     }),  
    87.                     new OpenLayers.Rule({  
    88.                         maxScaleDenominator: 100000000,  
    89.                         minScaleDenominator: 50000000,  
    90.                         symbolizer: {  
    91.                             pointRadius: 10,  
    92.                             fontSize: "11px"  
    93.                         }  
    94.                     }),  
    95.                     new OpenLayers.Rule({  
    96.                         maxScaleDenominator: 50000000,  
    97.                         symbolizer: {  
    98.                             pointRadius: 13,  
    99.                             fontSize: "13px"  
    100.                         }  
    101.                     })  
    102.                 ]  
    103.             });  
    104.             var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,count:10},  
    105.                 {name:"拉萨",x:91.1629975040,y:29.7104204643,count:30},  
    106.                 {name:"西宁",x:101.797302689,y:36.5936423859,count:50},  
    107.                 {name:"兰州",x:103.584297498,y:36.1190864503,count:70},  
    108.                 {name:"成都",x:104.035508297,y:30.7141790950,count:90},  
    109.                 {name:"重庆",x:106.519115206,y:29.4789248520,count:60},  
    110.                 {name:"贵阳",x:106.668071385,y:26.4573115457,count:20}];  
    111.             var features = new Array();  
    112.             for (var i=0; i<data.length; i++) {  
    113.                 features[i] = new OpenLayers.Feature.Vector(  
    114.                         new OpenLayers.Geometry.Point(data[i].x, data[i].y),  
    115.                         {  
    116.                             count:data[i].count,  
    117.                             name:data[i].name  
    118.                         }  
    119.                 );  
    120.             }  
    121.             var clusterLayer = new OpenLayers.Layer.Vector("Points", {  
    122.                 styleMap: new OpenLayers.StyleMap(style)  
    123.             });  
    124.             clusterLayer.addFeatures(features);  
    125.             map1.addLayer(clusterLayer);  
    126.         }  
    127.     </script>  
    128. </head>  
    129. <body>  
    130.     <div id="map1"></div>  
    131. </body>  
    132. </html> 
posted @ 2016-07-18 14:51  韩慧兵  阅读(546)  评论(1)  编辑  收藏  举报