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实现聚合效果更为方便，样式图标都可以自定义，聚合效果一直有个问题就是点太多了就会出现加载时候的卡顿，不知道有什么改进措施。

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

LeaFlet学习之聚合效果相关推荐

Leaflet中使用markerCluster实现点聚合效果
场景 Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标: Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
Leaflet学习教程+笔记(Mars2D)
Leaflet学习(Mars2D) 一快速开始中文教程–小白必备中文API文档–学会查阅文档准备工作-引入文件 <link rel="stylesheet" href ...
机器学习系列笔记十三: 集成学习/模型聚合
机器学习系列笔记十三: 集成学习/模型聚合文章目录机器学习系列笔记十三: 集成学习/模型聚合什么是集成学习 Voting Hard Voting 模拟实现Hard Voting 集成学习使用V ...
我在互联网上买了很多课程，但是感觉在互联网学习没有什么效果很多买的课我都不想学了
最近有一个朋友问我一个问题:我在互联网上买了很多课程,但是感觉在互联网学习没有什么效果很多买的课我都不想学了. 我说,这个很正常,就像我们日常培训一样,纯面授式的只能吸收10%的内容. 而且纯靠互联网 ...
vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
c语言或运算怎么没起作用,C语言学不会? 这样学习, 才有效果!
原标题:C语言学不会? 这样学习, 才有效果! 学习C语言,首先要明确地告诉自己:C语言是世界上最值得学习的语言. 大家学完C语言后都会很迷茫,面对复杂的指针对象不知道干些什么,这是大多同学所面临的问 ...
深度学习100问之提高深度学习模型训练效果（调参经验）
声明 1)本文仅供学术交流,非商用.所以每一部分具体的参考资料并没有详细对应.如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主删除. 2)博主才疏学浅,文中如有不当之处,请各位指出,共同进步,谢 ...
vue+openlayer实现地图聚合效果和撒点效果
前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入o ...
[联邦学习] FedAvg聚合算法详解及代码实现
该文章首发于若绾 [联邦学习] FedAvg聚合算法详解及代码实现,转载请标注出处. 论文原文:Communication-Efficient Learning of Deep Networks fr ...

LeaFlet学习之聚合效果

LeaFlet学习之聚合效果相关推荐

最新文章

热门文章