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

最新推荐文章于 2024-04-19 14:42:53 发布
最新推荐文章于 2024-04-19 14:42:53 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： WebGIS-Openlayers专题

效果：


实现关键点：



实现代码：

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> 
韩慧兵
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgis之openlayers全面解析pdf
09-21
OpenLayers作为业内使用*为广泛的地图引擎之一，已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能，可以实现与各个不同的WebGIS平台产品相结合，开发出各具特色的WebGIS应用系统。 本书主要内容涵盖：WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能，*后给出了OpenLayers之项目实战――水利信息在线分析服务系统。
数据可视化利器：OpenLayers 示例集锦
gitblog_00036的博客
06-04 341
数据可视化利器：OpenLayers 示例集锦 项目地址:https://gitcode.com/QingyaFan/data-visualization 1. 项目介绍 在大数据时代，数据可视化成为理解和探索信息的关键工具。为此，我们带来了这个开源项目 —— Data Visualization，它是一个集合了多种基于 OpenLayers 和 MapboxGL 的数据可视化示例。该项目由资深开...
OpenLayers实战（五）聚合，自定义聚合，特效聚合
BigBanana的博客
09-17 2077
地图提供的聚合能力 let vectorSorce = new ol.source.Vector({ // 图标数据 // 见（三）创建自定义图标 }); let clusterSource = new ol.source.Cluster({ // 聚合数据源 distance: 100, // 自动聚合距离（以像素为单位，默认20） source: vectorSorce, }); let clusterLayer = new ol.layer.Vector({ // 矢量图层
[openlayers06]——根据features的属性设置style
sheyueyu的博客
02-06 1932
我们会希望不同的要素展示成不用的样式（style），下面的内容：展示如何根据features自身的属性设置不同的样式，基础的样式设置看上面的链接。
OpenLayers 3 之 使用矢量图层（Vector）
热门推荐
研究与专注
03-27 3万+
摘要         矢量图层：矢量图层是用来渲染矢量数据的图层类型，在OpenLayers里，它是可以定制的，可以控制它的透明度，颜色，以及加载在上面的要素形状等。         常用于从数据库中请求数据，接受数据，并将接收的数据解析成图层上的信息。如将鼠标移动到中国，相应的区域会以红色高亮显示出来，高亮便是矢量图层的行为。 主要内容 1、 HTML文件的进化         这
openlayers动态聚类图
01-26
在"openlayers3动态聚类分析图"中，聚类技术被用于在地图上展示数据点。这种技术通常用于地理信息系统（GIS）中，当地图上有大量标记时，为了防止过度拥挤和提高视觉效果，会将相近的标记自动组合成一个“聚类”。当...
openlayers很多特效demo
07-01
"openlayers很多特效demo" 提供了一系列示例，展示了OpenLayers库在地图渲染、交互和视觉效果方面的各种功能。 1. 地图交互性：OpenLayers 提供了丰富的地图操作功能，如平移、缩放、旋转、测量距离和面积、拖拽...
openlayers 3 例子中文解析
04-30
### OpenLayers 3 示例中文解析 #### 1. 局部化OpenStreetMap与不同层级显示地图 - **知识点：** - **OpenStreetMap**：一个免费且开放的地图项目，用户可以贡献地理数据。 - **地图层级控制**：通过调整地图的...
openlayers5渲染百万级别点.zip
最新发布
06-19
OpenLayers提供了一个名为`ol.source.Cluster`的数据源，它可以根据距离自动聚合附近的点，形成更少的“聚类点”。 2. **动态分页（Dynamic Paging）**：当数据量过大时，可以使用动态分页策略。通过监听地图的视图...
dobbyscan一个非常快速基于密度的地理点聚类库
08-07
1. **基于密度的聚类**：这是一种聚类方法，与基于距离的聚类（如K-means）不同，它不依赖于预先设定的簇数量，而是根据数据点的密度来划分簇。常见的基于密度的聚类算法有DBSCAN（Density-Based Spatial Clustering...
WebGIS之OpenLayers 全面解析第2版示例代码
04-13
WebGIS之OpenLayers全面解析第2版（2019年出版）示例代码，比OpenLayers 官方的示例好用多了，基于 OpenLayers 5.x 编写（可用于 6.x），含国内各种地图的配合调用，各类扩展组件的开发示例，有了这个，就不要在在网上找零零碎碎的资料了，这些资料还有很多都是过时的会误导。
WebGIS之OpenLayers全面解析
08-29
Openlayers3详细讲解，OpenLayers是一个专为WebGIS客户端开发提供的JavaScript类库包，用于实现地图数据的网络访问。OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件
【Openlayers9】Openlayers图层探查
z_backlightin的博客
03-25 457
图层探查，就是裁剪部分上层图层，让下面的图层可见。用的是目前最新的Openlayers9
Openlayers9 项目实战训练（一）：初识地图控件
qq_30379395的博客
03-27 1615
OpenLayers使得在任何网页中放置动态地图变得很容易。它可以显示从任何来源加载的地图瓦片，矢量数据和标记。OpenLayers的开发是为了进一步利用各种地理信息。它是完全免费的，开源JavaScript，在2条款BSD许可证(也称为FreeBSD)下发布。地址上面这段话大家简单看下就行，就一句话，ol是免费的，可以自定义地图源，支持更多的定制化地图操作，支持内网开发，地图数据更安全，可以自己发布地图服务，坐标数据完全存储在本地。以上就是ol基础入门，ol下一节我们聊聊绘画;
OpenLayers9.1.0版本正式发布，OpenLayers9.1.0值得升级吗？9.1.0版相比9.0.0版本又更新了哪些内容？OpenLayers9相较于OpenLayers8更新了哪些内容？
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-19 1037
OpenLayers9.1.0版本正式发布，，最近OpenLayers大版本迭代很快，但是几乎没有什么重大的功能更新。比如这次的OpenLayers9.1.0几乎都是修修补补，没有功能更改和升级。
【Openlayers9】Openlayers修改控件的默认位置
z_backlightin的博客
03-16 543
然后就能实现啦，而且不会有那个灰色的条条，或者也可以重新复制个ol.css，在里面改也行。可见对overview不管用。要不然，直接修改ol.css，就行。可以看到全屏控件从右边移到左边，并且还有一条不透明灰色的条带。需要注意的是在map的div里面设置class=‘map’。缩放控件应该是OSM地图自带的。但是再尝试其他控件，例如再加上一个全屏控件。在style里面加入。
OpenLayers加载不同WMTS服务
SuperMap技术控
12-21 7238
作者：yyy 前言 WMTS，Web地图瓦片服务（Web Map Tile Service）当前版本是1.0.0。WMTS标准定义了一些操作，这些操作允许用户访问瓦片地图。WMTS可能是OGC首个支持RESTful访问的服务标准。SuperMap iServer支持发布WMTS 1.0.0标准的服务，同时提供一个兼容《地理信息公共服务平台电子地图数据规范》中地图分级标准的服务。 WMTS服务包含的信息介绍 在常规的WMTS服务中会包含以下参数和信息： <ows:Get...
【前端小记】--OpenLayers--1.点位图层动态聚合展示
am_xiao_hui的博客
09-01 1232
通常情况，我们在给地图添加图层时，会new一个VectorSource作为数据源，针对以上这种情况的的出现，OpenLayers给出了一个解决办法——聚类。
精通OpenLayers：WebGIS开发实战指南
8. **OpenLayers之项目实战**：以水利信息在线分析服务系统为例，实际项目中可能需要利用OpenLayers构建一个集数据展示、查询、分析于一体的Web应用。这涉及到数据库连接、服务器端处理、客户端交互逻辑等多个层面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值