Openlayers记录（二）热力图heatmap。

Openlayers记录（二）热力图heatmap。

先来效果

可以调节热力图的半径大小跟模糊度

代码实现

//热力图
function heatmap() {
    layui.use('slider', function() {
        var slider = layui.slider;

        //渲染
        slider.render({
            elem: '#radius' //绑定元素
        });
    });

    var count = 400;
    var lon = new Array(count);
    var coordinates = new Array(count);
    var lat = new Array(count);
    var dataSource = new Array(count);
    $.ajax({
        url: "这里放url路径",
        type: 'get',
        data: {
            "参数"
        },

        dataType: 'json',
        async: false,
        success: function(results) {
          //  console.log(results);
            // alert(results);
            dataSource = results;

            for (var i = 0; i < results.length; i++) {
                 lat[i] = results[i][4];
                 lon[i] =  results[i][5]; 
         
            }
        }
    });

    var feas = [],
        heatData;
    for (var i = 0, len = dataSource.length; i < len; i++) {
        var provinceInfo = dataSource[i];
        //支持传入 GeoJSON 规范数据类型：
        var fea = {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [lat[i], lon[i]]
            }
        };
        feas.push(fea);
    }

    heatData = {
        "type": "FeatureCollection",
        "features": feas
    };

    var blur = document.getElementById('blur');
    var radius = document.getElementById('radius');
    //矢量图层 获取gejson数据
    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(heatData, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:4326'
        })
    });
    // Heatmap热力图             
    var vector = new ol.layer.Heatmap({
        source: vectorSource,
        blur: parseInt(blur.value, 10),
        radius: parseInt(radius.value, 10),
    });

    //分别为另个参数设置控件（input）添加事件监听，动态设置热点图的参数
    radius.addEventListener('input', function() {
        vector.setRadius(parseInt(radius.value, 10)); //设置热点图层的热点半径
    });
    blur.addEventListener('input', function() {
        vector.setBlur(parseInt(blur.value, 10)); //设置热点图层的模糊尺寸
    });

    map.addLayer(vector);

    $('#removeHeatMap').on('click', function() {
        map.removeLayer(vector);
    });
}

总结

返回的数据格式我用的是json，从数据库中读取坐标，返回到前台。