通过ol/layer/Heatmap实现
一、创建热力图层--以geojson数据为例，主要是需要点的经纬度信息
// 开始做热力图相关功能
let heatmapVector = new VectorSource({
url: "/heatmap.geojson",
format: new GeoJSON()
});
//定义热力图图层
let heatmapLayer = new Heatmap({
source: heatmapVector,
blur: 10, //模糊大小(像素为单位)
radius: 10, //半径大小(像素为单位)
gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//热图的颜色渐变
});
二、热力图层关于map的方法
//添加热力图层
map.addLayer(heatmapLayer)
//删除热力图层
map.removeLayer(heatmapLayer)
三、热力图自身方法
//获取-设置，模糊大小
heatmapLayer.getBlur()
heatmapLayer.setBlur(15)
//获取-设置，渲染范围
heatmapLayer.getExtent()
heatmapLayer.setExtent([100,30,104,40])
//获取-设置，热力图渐变色
heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00'])
//获取-设置，最大级别
heatmapLayer.getMaxZoom()
heatmapLayer.setMaxZoom(18)
//获取-设置，最小级别
heatmapLayer.getMinZoom()
heatmapLayer.setMinZoom(2)
//获取-设置，透明度
heatmapLayer.getOpacity()
heatmapLayer.setOpacity(0.5)
//获取-设置，半径
heatmapLayer.getRadius()
heatmapLayer.setRadius(5)
//获取-设置，热力源
heatmapLayer.getSource()
heatmapLayer.setSource(source)
//获取-设置，是否可见
heatmapLayer.getVisible()
heatmapLayer.setVisible(true)
//获取-设置，图层的Z-index
heatmapLayer.getZIndex()
heatmapLayer.setZIndex(2)
//绑定事件-取消事件 type事件类型，listener函数体
heatmapLayer.on(type,listener)
heatmapLayer.un(type,listener)
四、实现效果
项目地址：github.com/DLFouge/vue…
欢迎指正与star
