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

by · 2019-04-02

效果：

实现关键点：

实现代码：

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);  

程序完整代码为；

[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> 

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

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序