openlayers4 入门开发系列之聚合图篇（附源码下载）

时间：2023-03-08 20:11:40

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

内容概览

1.基于 openlayers4 实现地图聚合图效果
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现聚合图功能，效果图如下：
openlayers4 入门开发系列之聚合图篇（附源码下载）

实现思路

  • 界面设计
//聚合图

"<div style='height:25px;background:#30A4D5;margin-top:25px;width: 98%;margin-left: 3px;'>" +

"<span style='margin-left:5px;font-size: 13px;color:white;'>聚合图</span>" +

"</div>" +

'<div id="tool-ol-ClusterLayer" style="padding:5px;">' +

'<div style="float:left;">' +

'<input type="checkbox" name="tool-ol-ClusterLayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +

'<label style="font-weight: normal;vertical-align: middle;margin: auto;">聚合图</label>' +

'</div>' +

'</div>'
  • 点击事件
//加载聚合图

$("#tool-ol-ClusterLayer input").bind("click", function () {

if (this.checked) {

if(!bxmap.olClusterLayer.isLoad){

bxmap.olClusterLayer.Init(bmap);

}

else{

bxmap.olClusterLayer.showClusterLayer();

}

}

else {

bxmap.olClusterLayer.hideClusterLayer();

}

})
  • 初始化以及核心代码实现
var bxmap = bxmap || {};

bxmap.olClusterLayer = {

map:null,

isLoad:false,

layer: null,//聚合图图层

originalStyle:null,//聚合原始样式

selectStyleFunction:null,

Init:function(bmap){

//加载聚合图

this.map = bmap.getMap();

this.isLoad = true;

//设置原始样式

this.originalStyle = new ol.style.Style({

image: new ol.style.Circle({

radius: 5,

stroke: new ol.style.Stroke({

color: '#fff'

}),

fill: new ol.style.Fill({

color: '#3399CC'

})

})

});

this.initClusterLayer(qy);

},
……

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

相关文章