leaflets + heatmap 加载地图

leaflets + heatmap 加载地图

leaflets
- 简单友好轻量级的互动地图，开源的 JavaScript 库
- 官网：http://leafletjs.com/
- 源码下载：http://leafletjs.com/download.html
Heatmap
- heatmap.js是一个轻量级的，易于使用的JavaScript库来帮助你可视化你的三维数据，有一个和leaflets 搭配的插件 leaflets heatmap.js
- 官网： https://www.patrick-wied.at/static/heatmapjs/
- 源码下载：https://github.com/Leaflet/Leaflet.heat

简单的热力图实现实现

直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>leaflet</title>
    <link rel="stylesheet" href="/static/map/css/leaflet.css" type="text/css">

    <style>
        html,body,#map{
            <!--指定地图的高宽-->
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id = 'map'>

    </div>
    <script type="text/javascript" src="/static/map/js/leaflet-src.js"></script>
    <script type="text/javascript" src="/static/map/js/leaflet.js"></script>
    <script type="text/javascript" src="/static/map/js/heatmap.min.js"></script>
    <script type="text/javascript" src="/static/map/js/leaflet-heatmap.js"></script>
    <script type="text/javascript" src="/static/map/js/mapConfig.js"></script>
</body>
</html>

配置

var url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//z表示地图的缩放级别
//x表示地图瓦片的横向坐标
//y表示地图瓦片的纵向坐标
//其中的路径就是保存地图瓦片的的路径
var tilemap = new L.TileLayer(url);
//加载地图的底层对象
var mapcenter = new L.latLng(26.65, 106.65);
//地图的中心点的对象
map = new L.Map("map", {    //"map"为需要插入地图的div的id
            //CRS:'Simple',   //离线地图加载规则
            center:mapcenter,   //地图中心点
            zoom: 11,           //默认展示的缩放级别
            layers: [tilemap],  //插入的地图的图层
            minZoom: 0,         //最小缩放级别
            maxZoom: 18,        //最大缩放级别
            opacity: 0.1,       //图层的不透明度
            maxBounds: [        //地图的东西南北最大边界，
                                //在缩放级别和是的情况下，地图只会展示在当前的区域内
                //south west
                [26.4, 106.4],
                //north east
                [26.9, 106.98]
            ]
        });
var heatmapLayer = null;

// 热力图层
function setHeatMap(){
    /**
     * 创建热力图的方法
     * 传一个参数，从后台获取到的热力图的点的数据
     * 数据结构
     */
    $.getJSON("./getDevice",function(data){

        // alert(heatmapData[0].fields.device_desc);
        var heatmapData= {
            max: 4,
            data: data
        };

        if(heatmapLayer != null){
            /*这个方法是在每一次刷新热力图之前把前一次创建的热力图对象清除,
             *如果不对这个对象进行重置，会在每一刷新的时候给这个对象添加数据上去，
             *会导致这个对象内存增长
             */
            map.removeLayer(heatmapLayer);
        }
        var config = {
            //热力图的配置项
            // radius: 'radius',       //设置每一个热力点的半径
            radius: 0.002,       //设置每一个热力点的半径
            maxOpacity: 0.6,        //设置最大的不透明度
            // minOpacity: 0.3,     //设置最小的不透明度
            scaleRadius: true,      //设置热力点是否平滑过渡
            blur: 0.95,             //系数越高，渐变越平滑，默认是0.85,
                                    //滤镜系数将应用于所有热点数据。
            useLocalExtrema: true,  //使用局部极值
            // latField: 'latitude',   //维度
            // lngField: 'lngField',  //经度
            // valueField: 'count',    //热力点的值
            latField: 'fields.baidu_y',   //维度  106.
            lngField: 'fields.baidu_x',  //经度   26.
            valueField: 'fields.direction',    //热力点的值
            gradient: {
                 //过渡，颜色过渡和过渡比例,范例：
                "0.99": "rgba(255,0,0,1)",
                "0.75": "rgba(255,255,0,1)",
                "0.5": "rgba(0,255,0,1)",
                "0.25": "rgba(0,255,255,1)",
                "0": "rgba(0,0,255,1)"
                }
            // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
        };
        heatmapLayer = null;                        //重置热力图对象为null
        heatmapLayer = new HeatmapOverlay(config);  //重新创建热力图对象
        $(".leaflet-overlay-pane").empty();         //清空热力图的空间
        map.addLayer(heatmapLayer);                 //将热力图图层添加在地图map对象上
        heatmapLayer.setData(heatmapData);          //设置热力图的的数据
    });
}
setHeatMap();

leaflets + heatmap 加载地图

猜你喜欢