zoukankan      html  css  js  c++  java

  • （转）基于openlayers实现聚类统计展示

    http://blog.csdn.net/gisshixisheng/article/details/46137015

    概述：

    在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示，在本文中讲述如何基于openlayers实现聚类统计的效果，Arcgis for js聚类统计的博文地址为：

    http://blog.csdn.net/gisshixisheng/article/details/40867989

    效果：

    实现关键点：

    实现代码：

    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?
    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?
      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.             100%;  
      13.             overflow: hidden;  
      14.             font-size: 12px;  
      15.         }  
      16.         #map1{  
      17.              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>  
  • 相关阅读:
    protobuf lib库的使用
    protobuf的下载、编译和使用
    使用python和pygame绘制繁花曲线
    经典方块游戏-俄罗斯方块
    经典方块游戏-贪吃蛇
    经典方块游戏-基础
    经典方块游戏一
    Python脚本管理
    SublimeText3设置显示空格及Tab显示为4个空格
    域名解析记录类型
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972851.html
Copyright © 2011-2022 走看看