openlayers5之热力图heatmap

代码

var map, view, heatmapL;
        $(function () {
            //热力图层
            heatmapL = new ol.layer.Heatmap({
                gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'],//热力图渲染色带，默认可不设置
                radius: 8,//每个像素渲染点半径，可根据实际数据效果进行调整
                blur: 15,//模糊度，可根据实际数据效果进行调整
                weight:'weight',//权重值，热力图根据这个值进行热力渲染；图层中每个feature都要有这个属性；属性名默认weight，可以改成自己的字段名；注：0~1之间。
                renderModed:'image',//图层渲染方式，image和vector分别为栅格和矢量，第一个渲染速度快；后者慢，ol5新增加的属性，对于大量数据渲染有利
                source: new ol.source.Vector({
                    url: '../data/kml/2012_Earthquakes_Mag5.kml',
                    format: new ol.format.KML({
                        extractStyles: false
                    })
                })//矢量source
            }),
            view = new ol.View({
                center: [0, 0],
                zoom: 2
            });
            map = new ol.Map({
                layers: [
                     new ol.layer.Tile({
                         source: new ol.source.Stamen({
                             layer: 'toner'
                         })
                     }),
                     heatmapL
                ],
                target: 'map',
                view:view
            })
        })

代码下载:

链接: https://pan.baidu.com/s/1hOENHS74hqfMQn1MO4DTbg 密码: 3aph