【08】openlayers 熱力圖層

效果：

 

 創建地圖：

//創建地圖
var map = new ol.Map({
    //設置顯示地圖的視圖
    view: new ol.View({
        projection:'EPSG:4326',//投影方式
        center: [108, 34],//定義初始顯示位置
        zoom: 3 ,//定義地圖顯示層級
    }),
    //創建地圖圖層
    layers: [
        //創建一個使用Open Street Map地圖源的瓦片圖層
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    //讓id為map的div作為地圖的容器
    target: 'map',
    //控件初始默認不顯示
    controls:ol.control.defaults({
        attribution: false,
        zoom: false
    }).extend([])
});

創建熱力圖層：

//創建熱力圖層
let source = new ol.source.Vector({
        url: '../data/2012_Earthquakes_Mag5.kml',
        format: new ol.format.KML({
          extractStyles: false
        })
    })
var heatmapLayer = new ol.layer.Heatmap({
    source: source,//熱力圖資源
    opacity:1,//透明度，默認1
    visible:true,//是否顯示，默認trur
    zIndex:1,//圖層渲染的Z索引,默認按圖層加載順序疊加
    gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//熱圖的顏色漸變
    blur: 15,//模糊大小(像素為單位)
    radius: 8,//半徑大小默認為8(像素為單位)
    extent:[100,30,104,40],//渲染范圍，可選值，默認渲染全部
});
map.addLayer(heatmapLayer)

熱力圖層關於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)