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

前言

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

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

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

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

本篇的重点内容是利用 openlayers4 实现聚合图功能，效果图如下：

image

实现思路

• 界面设计

//聚合图
"
" +
             "聚合图" +
        "
" +
       '
' +
            '
' +
            '' +
            '聚合图' +
            '
' +
'
'

• 点击事件

//加载聚合图
$("#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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式