leaflet地图热力图

作者: 新世纪好青年 | 来源:发表于2019-08-23 16:07 被阅读0次

leaflet地图热力图
功能博客备份
heatmap.js来绘制热力图
Overview For Cesium 地图鹰眼功能
【Leaflet 开发】热力图
leaflet使用百度地图
vue+leaflet加载超图显示不完全
leaflet地图介绍
3.leaflet热力图
Leaflet加载OSM、MapBox地图

最近一段时间老大让用OpenStreetMap 做地图，然后从中选择了leaflet这个切片，并实现了类似百度地图的热力图（谷歌地图的热图）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="leaflet.css" />
        <script src="leaflet.js"></script>
        <script src="heatmap.min.js"></script>
        <script src="leaflet-heatmap.js"></script>
        <style>
            #mapid {
                width: 1000px;
                height: 1000px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="mapid"></div>
        <script>
            //数据
            var testData = {
                max: 8,
                data: [{
                        lat: 24.6408,
                        lng: 46.7728
                        //count:10 //权重
                    }, {
                        lat: 50.75,
                        lng: -1.55
                    }, {
                        lat: 51.55,
                        lng: -1.55
                    },
                    {
                        lat: 52.65,
                        lng: -1.45
                    },
                    {
                        lat: 53.45,
                        lng: -1.35
                    },
                    {
                        lat: 54.35,
                        lng: -1.25
                    },
                    {
                        lat: 5.25,
                        lng: -1.15
                    }
                ]
            };
            //配置
            var cfg = {
                "radius": 2,
                "maxOpacity": .4,
                "scaleRadius": true,
                "useLocalExtrema": true,
                latField: 'lat',
                lngField: 'lng',
                valueField: 'count'
            };
            var heatmapLayer = new HeatmapOverlay(cfg);
            //图层
            var baseLayer = L.tileLayer(
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '...',
                    maxZoom: 18
                }
            );
            var map = new L.Map('mapid', {
                center: new L.LatLng(24.6408, 46.7728),
                zoom: 4,
                layers: [baseLayer, heatmapLayer]
            });
            heatmapLayer.setData(testData);
        </script>

    </body>

</html>

二、配置中参数意思
        var config = {  //热力图的配置项
            radius: 'radius',      //设置每一个热力点的半径
            maxOpacity: 0.9,        //设置最大的不透明度
            // minOpacity: 0.3,    //设置最小的不透明度
            scaleRadius: true,      //设置热力点是否平滑过渡
            blur: 0.95,            //系数越高，渐变越平滑，默认是0.85,
                                    //滤镜系数将应用于所有热点数据。
            useLocalExtrema: true,  //使用局部极值
            latField: 'latitude',  //维度
            lngField: 'longitude',  //经度
            valueField: 'count',    //热力点的值
            gradient: {  "0.99": "rgba(255,0,0,1)",
                    "0.9": "rgba(255,255,0,1)",
                    "0.8": "rgba(0,255,0,1)",
                    "0.5": "rgba(0,255,255,1)",
                    "0": "rgba(0,0,255,1)"
                },
            //过渡，颜色过渡和过渡比例,范例：
            /*
                {  "0.99": "rgba(255,0,0,1)",
                    "0.9": "rgba(255,255,0,1)",
                    "0.8": "rgba(0,255,0,1)",
                    "0.5": "rgba(0,255,255,1)",
                    "0": "rgba(0,0,255,1)"
                }
            */
            // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
        }