leaflet+PruneCluster插件使用demo

1.引入插件的js

<script type="text/javascript" src="../../js/leaflet/principalSheetMap.js"> </script>

var hybridActivation = L.icon({
    iconUrl: '../../img/mapIcon/hybridActivation.png',
    iconSize:     [36, 36],    //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
    iconAnchor:   [18, 36],  //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
    popupAnchor:  [1, -38] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
});

var wifiGPaths = [];    //存储地图上划线参数
var phoneGPaths = [];    //存储地图上划线参数
var videoGPaths = [];    //存储地图上划线参数
var licenGPaths = [];    //存储地图上划线参数
var faceGPaths = [];    //存储地图上划线参数

//定义全局聚合标点集合
var wifiLeafletView = new PruneClusterForLeaflet();
var phoneLeafletView = new PruneClusterForLeaflet();
var videoLeafletView = new PruneClusterForLeaflet();
var licenLeafletView = new PruneClusterForLeaflet();
var faceLeafletView = new PruneClusterForLeaflet();

//初始化地图
$(function() {
    var lng = 112.956841;
    var lat = 28.231173;
    //初始化 地图
    var map = L.map('container', {
        crs: L.CRS.Baidu,
        minZoom: 3,
        maxZoom: 18,
        attributionControl: false,
        center: [lat, lng],
        zoom: 12
    });
    L.tileLayer.baidu({ layer: 'vec' }).addTo(map);
    window.map = map; //将地图对象设为全局变量地图
    getLocationInfo(2);
});

//在地图上添加标点

function getLocationInfo(type) {
    //先清空地图上标点，在添加标点
    wifiLeafletView.RemoveMarkers();
    phoneLeafletView.RemoveMarkers();
    videoLeafletView.RemoveMarkers();
    licenLeafletView.RemoveMarkers();
    faceLeafletView.RemoveMarkers();
    $.ajax({
        type: "get",
        url: "/warning/getLocationInfo",
        data:{"type":type},
        cache: false,
        async: false,
        timeout: 60000,
        success: function(result) {
            debugger;
            var mapdata = result.data;
            var ss=result.countlist;
            for (var h = 0; h < mapdata.length; h++) {
                //添加经纬度
                var marker = new PruneCluster.Marker(mapdata[h].lat, mapdata[h].lng);
                //添加点击提示信息
                **如果要在地图上点击每一个点触发，可以在源码js里面加一个marker.click()**
                marker.data.popup = mapdata[h].locname+"<br/>地址:&nbsp;"+mapdata[h].detailadd+"<br/>经度:&nbsp;"+mapdata[h].lat+"<br/>纬度:&nbsp;"+mapdata[h].lng+"<br/>设备数:&nbsp;"+mapdata[h].status;
                //根据设备类型添加图标
                if (mapdata[h].placetype == 1 ) {
                    marker.data.icon = phoneBlue;
                    //将定义好的标点加入聚合标点
                    phoneLeafletView.RegisterMarker(marker);
                }else if (mapdata[h].placetype == 2 ) {
                    marker.data.icon = wifiBlue;
                    //将定义好的标点加入聚合标点
                    wifiLeafletView.RegisterMarker(marker);
                } else if (mapdata[h].placetype == 4 ) {
                    marker.data.icon = videoBlue;
                    //将定义好的标点加入聚合标点
                    licenLeafletView.RegisterMarker(marker);
                }else if (mapdata[h].placetype == 6 ) {
                    marker.data.icon = videoBlue;
                    //将定义好的标点加入聚合标点
                    faceLeafletView.RegisterMarker(marker);
                }
            }
            //获取每次地图操作后所有wifi聚合点位置,添加传输线
            wifiLeafletView.BuildLeafletClusterAll = function(clusterPositionList) {
                for (var i = 0; i < wifiGPaths.length; i++) {
                    map.removeLayer(wifiGPaths[i]);
                }
                wifiGPaths = [];
                for (var i = 0; i < clusterPositionList.length; i++) {
                    var clusterLat = clusterPositionList[i].lat;
                    var clusterLng = clusterPositionList[i].lng;
                    var sta = [clusterLat, clusterLng];
                    var end = [28.224922, 112.982138];
                    drawLine(sta, end ,'wifi');
                }
            };
            //获取每次地图操作后所有phone聚合点位置,添加传输线
            phoneLeafletView.BuildLeafletClusterAll = function(clusterPositionList) {
                for (var i = 0; i < phoneGPaths.length; i++) {
                    map.removeLayer(phoneGPaths[i]);
               }
                phoneGPaths = [];
                for (var i = 0; i < clusterPositionList.length; i++) {
                    var clusterLat = clusterPositionList[i].lat;
                    var clusterLng = clusterPositionList[i].lng;
                    var sta = [clusterLat, clusterLng];
                    var end = [28.224922, 112.982138];
                    drawLine(sta, end , 'phone');
                }
            };
            //获取每次地图操作后所有video聚合点位置,添加传输线
            videoLeafletView.BuildLeafletClusterAll = function(clusterPositionList) {
                for (var i = 0; i < videoGPaths.length; i++) {
                    map.removeLayer(videoGPaths[i]);
                }
                videoGPaths = [];
                for (var i = 0; i < clusterPositionList.length; i++) {
                    var clusterLat = clusterPositionList[i].lat;
                    var clusterLng = clusterPositionList[i].lng;
                    var sta = [clusterLat, clusterLng];
                    var end = [28.224922, 112.982138];
                    drawLine(sta, end , 'video');
                }
            };
            //获取每次地图操作后所有video聚合点位置,添加传输线
            licenLeafletView.BuildLeafletClusterAll = function(clusterPositionList) {
                for (var i = 0; i < licenGPaths.length; i++) {
                    map.removeLayer(licenGPaths[i]);
                }
                licenGPaths = [];
                for (var i = 0; i < clusterPositionList.length; i++) {
                    var clusterLat = clusterPositionList[i].lat;
                    var clusterLng = clusterPositionList[i].lng;
                    var sta = [clusterLat, clusterLng];
                    var end = [28.224922, 112.982138];
                    drawLine(sta, end , 'licenPlate');
                }
            };

            //获取每次地图操作后所有video聚合点位置,添加传输线
            faceLeafletView.BuildLeafletClusterAll = function(clusterPositionList) {

                for (var i = 0; i < faceGPaths.length; i++) {
                    map.removeLayer(faceGPaths[i]);

                }
                faceGPaths = [];
                for (var i = 0; i < clusterPositionList.length; i++) {
                    var clusterLat = clusterPositionList[i].lat;
                    var clusterLng = clusterPositionList[i].lng;
                    var sta = [clusterLat, clusterLng];
                    var end = [28.224922, 112.982138];

                    drawLine(sta, end , 'face');
                }
            };

            //加载聚合标点
            if(type == 0){
                map.addLayer(phoneLeafletView);
                map.addLayer(wifiLeafletView);
                map.addLayer(videoLeafletView);
                map.addLayer(licenLeafletView);
                map.addLayer(faceLeafletView);
            }else if(type == 1){
                map.addLayer(videoLeafletView);
                wifiLeafletView.RemoveMarkers();
                phoneLeafletView.RemoveMarkers();
                licenLeafletView.RemoveMarkers();
                faceLeafletView.RemoveMarkers();

                $('#licenPlate').attr('src','./img/homePage/homePage/car1.png');
                $('#pho').attr('src','./img/homePage/homePage/phone.png');
                $('#wifi').attr('src','./img/homePage/homePage/WIFI.png');
                $('#face').attr('src','./img/homePage/homePage/faces.png');

                $('#licenPlate').attr('width','52px;');
                $('#pho').attr('width','48px;');
                $('#wifi').attr('width','48px;');
                $('#face').attr('width','48px;');


            }else if(type == 2){
                map.addLayer(phoneLeafletView);
                videoLeafletView.RemoveMarkers();
                wifiLeafletView.RemoveMarkers();
                licenLeafletView.RemoveMarkers();
                faceLeafletView.RemoveMarkers();

                $('#pho').attr('src','./img/homePage/homePage/phone1.png');
                $('#wifi').attr('src','./img/homePage/homePage/WIFI.png');
                $('#licenPlate').attr('src','./img/homePage/homePage/car.png');
                $('#face').attr('src','./img/homePage/homePage/faces.png');

                $('#pho').attr('width','52px;');
                $('#wifi').attr('width','48px;');
                $('#licenPlate').attr('width','48px;');
                $('#face').attr('width','48px;');

            }else if(type == 4){
                map.addLayer(wifiLeafletView);
                videoLeafletView.RemoveMarkers();
                phoneLeafletView.RemoveMarkers();
                licenLeafletView.RemoveMarkers();
                faceLeafletView.RemoveMarkers();

                $('#wifi').attr('src','./img/homePage/homePage/WIFI1.png');
                $('#pho').attr('src','./img/homePage/homePage/phone.png');
                $('#licenPlate').attr('src','./img/homePage/homePage/car.png');
                $('#face').attr('src','./img/homePage/homePage/faces.png');

                $('#wifi').attr('width','52px;');
                $('#pho').attr('width','48px;');
                $('#licenPlate').attr('width','48px;');
                $('#face').attr('width','48px;');
            }else if(type == 6){
                map.addLayer(faceLeafletView);
                videoLeafletView.RemoveMarkers();
                phoneLeafletView.RemoveMarkers();
                wifiLeafletView.RemoveMarkers();
                licenLeafletView.RemoveMarkers();

                $('#wifi').attr('src','./img/homePage/homePage/WIFI.png');
                $('#pho').attr('src','./img/homePage/homePage/phone.png');
                $('#licenPlate').attr('src','./img/homePage/homePage/car.png');
                $('#face').attr('src','./img/homePage/homePage/face1.png');

                $('#wifi').attr('width','52px;');
                $('#pho').attr('width','48px;');
                $('#licenPlate').attr('width','48px;');
                $('#face').attr('width','48px;');
            }
            phoneLeafletView.ProcessView();
            wifiLeafletView.ProcessView();
            videoLeafletView.ProcessView();
            licenLeafletView.ProcessView();
            faceLeafletView.ProcessView();
        }
    });

}

//画线
function drawLine(start, end ,type) {
    var longLatList = [start, end]; //经纬度数组
    var antPath = L.polyline.antPath;
    var gPath = antPath(longLatList, {
        "paused": false, //暂停  初始化状态
        "reverse": false, //方向反转
        "delay": 1000, //延迟，数值越大效果越缓慢
        "dashArray": [4, 20], //间隔样式
        "weight": 0.8, //线宽
        "opacity": 0.5, //透明度
        "color": "#00FF00", //颜色
        "pulseColor": "#FFFFFF"　　 //块颜色
    });
    if(type == 'wifi'){
        wifiGPaths.push(gPath);
    }else if(type == 'phone'){
        phoneGPaths.push(gPath);
    }else if(type == 'video'){
        videoGPaths.push(gPath);
    }else if(type == 'licenPlate'){
        licenGPaths.push(gPath);
    }
    gPath.addTo(map);}