LeaFlet学习之热力图

最新推荐文章于 2024-05-17 09:00:00 发布

weixin_30419799

最新推荐文章于 2024-05-17 09:00:00 发布

阅读量873

点赞数

文章标签： javascript 数据库 xhtml ViewUI

原文链接：http://www.cnblogs.com/tuboshu/p/10752332.html

版权

这两天一直在整这个热力图，官网给的插件用的heatmap.js打开插件，很恶心的是我并没有找到插件下载压缩包，无奈我就用给出的demo里面的js做的。

一、需要拖入的js

    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
        <style>
        #map{
            height: 1000px;
            width: 1500px;
        }
    </style>
    <script src="Script/leaflet/leaflet.js"></script>
    <script src="data/heatmap.min.js"></script>
    <script src="data/leaflet-heatmap.js"></script>

如果想省事可在这里下载

插件下载

二、配置中参数意思

        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背景
        };

三、全部源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>leaflet热力图</title>
    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
        <style>
        #map{
            height: 1000px;
            width: 1500px;
        }
    </style>
    <script src="Script/leaflet/leaflet.js"></script>
    <script src="data/heatmap.min.js"></script>
    <script src="data/leaflet-heatmap.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        //数据
        var testData = {
            max: 8,
            data: [{ lat: 24.6408, lng: 46.7728, count: 3 },
                { lat: 50.75, lng: -1.55, count: 1 },
                { lat: 51.55, lng: -1.55, count: 9 },
                { lat: 52.65, lng: -1.45, count: 8 },
                { lat: 53.45, lng: -1.35, count: 7 },
                { lat: 54.35, lng: -1.25, count: 6 },
                { lat: 5.25, lng: -1.15, count: 5 },
            ]
        };
        //配置
        var cfg = {       
            "radius": 2,
            "maxOpacity": .8, 
            "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('map', {
            center: new L.LatLng(25.6586, -80.3568),
            zoom: 4,
            layers: [baseLayer, heatmapLayer]
        });

        heatmapLayer.setData(testData);

    </script>
</body>
</html>

四、总结

这里的热力图效果，可以把这些经纬度，数量等信息放入到数据库，当需要的时候再通过ajax进行异步交互获取资源，进行渲染展示，该插件好像也有OL的插件，这样做起来，可以做到OL进行加载点进行渲染。demo参考官网代码

转载于:https://www.cnblogs.com/tuboshu/p/10752332.html