LeaFlet学习之聚合效果

leaflet实现聚合效果是通过插件进行的，虽然leaflet是轻量级的但是，许多功能都是没有依赖插件来完成，关于这有缺点也有有点，通过这几天对leaflet感觉一直都在依靠插件完成，本身就两个主题类，map和layer，如果是小型项目展示地图一类的，做一些基本的功能leaflet非常适合，给我最大的感觉leaflet生态环境很好。这里用的不是纯聚合插件，实在聚合插件基础上衍生出的动态移动的聚合插件，也能做静态插件下载：点我查看

一、js和css

这里需要引入的css样式:

    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
    <link href="Script/leaflet/LeafletStyleSheet.css" rel="stylesheet" />

js:

    <script src="Script/leaflet/leaflet.js"></script>
     <script src="Script/leaflet/PruneCluster.js"></script>

在这里我还用了一个加载中国地图插件该插件封装好集中地图加载

<script src="Script/leaflet/leaflet.ChineseTmsProviders.js"></script>

二、使用说明

1、声明一个PruneClusterForLeaflet类

var leafletView = new PruneClusterForLeaflet();

2、循环加载数据

    for (var i = 0; i < data.length; ++i) {
        //声明marker输入经纬度
        var marker = new PruneCluster.Marker(data[i].y, data[i].x);
        //给marker添加一个点击提示框
        marker.data.popup = data[i].attribute.proname +"省" +data[i].attribute.name;
        console.log(marker);
        //放到刚才声明的PruneClusterForLeaflet类对象中
        leafletView.RegisterMarker(marker);
    }

3、添加到地图

 map.addLayer(leafletView);

三、全部源码

<!DOCTYPE html>
<html>

<head>
    <title>天地图聚合</title>
    <meta charset="utf-8">
    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
    <link href="Script/leaflet/LeafletStyleSheet.css" rel="stylesheet" />
    <style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
    
    html,
    body,
    #map {
        height: 100%;
    }
    </style>
    <script src="Script/leaflet/leaflet.js"></script>
     <script src="Script/leaflet/PruneCluster.js"></script>
    <script src="Script/leaflet/leaflet.ChineseTmsProviders.js"></script>
   
    <script src="data/data.js"></script>
    
</head>

<body>
    <div id='map'></div>
</body>
<script type="text/javascript">
    

    var data = county.items;


   
        var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
        maxZoom: 18,
        minZoom: 1
    }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 1
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            maxZoom: 18,
            minZoom: 1
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 1
        });

    var normal = L.layerGroup([normalm, normala]);
    image = L.layerGroup([imgm, imga]);
    var leafletView = new PruneClusterForLeaflet();
    var baseLayers = {
        "地图": normal,
        "影像": image,
    }

    var overlayLayers = {

    }

    var map = L.map("map", {
        center: [31.59, 120.29],
        zoom: 12,
        layers: [normal],
        zoomControl: false

    });
   
    
    L.control.layers(baseLayers, overlayLayers).addTo(map);
    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
    }).addTo(map);

    
    var size = data.length;
    var markers = [];
    for (var i = 0; i < data.length; ++i) {
        var marker = new PruneCluster.Marker(data[i].y, data[i].x);
        marker.data.popup = data[i].attribute.proname +"省" +data[i].attribute.name;
        console.log(marker);
        markers.push(marker);
        leafletView.RegisterMarker(marker);
    }
    //window.setInterval(function () {
    //    for (i = 0; i < size / 2; ++i) {
    //        var coef = i < size / 8 ? 10 : 1;
    //        var ll = markers[i].position;
    //        ll.lat += (Math.random() - 0.5) * 0.00001 * coef;
    //        ll.lng += (Math.random() - 0.5) * 0.00002 * coef;
    //    }

        
    //}, 1000);
    //leafletView.ProcessView();
    map.addLayer(leafletView);
</script>

</html>

注释掉的部分实际是为了让marker动态移动，也是该插件的特色，有兴趣的可以试试。

四、效果图

五、总结

相比较arcgis api 和open layer实现聚合效果更为方便，样式图标都可以自定义，聚合效果一直有个问题就是点太多了就会出现加载时候的卡顿，不知道有什么改进措施。

LeaFlet学习之聚合效果

猜你喜欢