openlayers5之热力图heatmap附源码

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

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHAis initialing...