java生成png热力图_openlayers4 入门开发系列之热力图篇（附源码下载）

前言

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

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

内容概览

1.基于 openlayers4 实现地图热力图

2.源代码 demo 下载

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

实现思路

热力图界面设计

//热力图

"

" +

"热力图" +

"

" +

'

' +

'

' +

'' +

'热力图' +

'

' +

'

' +

热力图点击事件

//加载热力图

$("#heatmapFeatureLayer input").bind("click", function () {

if (this.checked) {

if(!bxmap.olHeatMap.isLoad){

bxmap.olHeatMap.Init(bmap);

} else{

bxmap.olHeatMap.showHeatMapLayer();

}

//图例面板显示

$("#map_tl").css("display","block");

$("#map_tl>img").attr('src', getRootPath() +"js/main/olHeatMap/lend_dz.png");

$("#map_tl>img").css("width","165px");

$("#map_tl>img").css("height","165px");

}

else {

bxmap.olHeatMap.hideHeatMapLayer();

//图例面板隐藏

$("#map_tl").hide();

}

})

热力图初始化以及核心代码实现

```

Init:function(bmap){

//加载热力图

this.map = bmap.getMap();

this.isLoad = true;

this.initHeatMapLayer(dz);

},

/**初始化加载-热力图