对于leaflet使用聚合时出现一个坐标点下有多个标记时处理的方式
2018-01-20 10:23
806 查看
1.首先使用聚合函数时会在自己的js中编写如下代码:
var clusterMarkers = L.markerClusterGroup({
showCoverageOnHover : false,
spiderfyOnMaxZoom : true,
disableClusteringAtZoom : 18
});然后再在获取相关标记时clusterMarkers.addLayer(markerT
);最后添加到地图;map.addLayer(clusterMarkers);
但是这样的聚合再出现标题中的情况时会出现如下的情况
(1):disableClusteringAtZoom : 18和function initMap(){
map = L.map('mapDiv', {
minZoom : 7,
maxZoom : 18,
crs : L.CRS.EPSG4326,
zoomControl : false,
attributionControl : false
}).setView([23.16,113.28], (6-2)+10);}}与初始化map时出现maxZoom为18时这样的聚合在最大级别时所有展开最后同一个点的多个标记都会一层一层被覆盖。
(2):disableClusteringAtZoom : 19和maxZoom : 18时这时候会发现虽然最大级别时还是出现聚合但是有很多不是同一个点的标记也存在聚合中。
解决方案:
修改disableClusteringAtZoom : 19,然后在源代码leaflet.markercluster.js中查找disableClusteringAtZoom 属性,这时候的js进了加密和压缩可以使用在线格式化js的方式获取更易读的js文件。
这时候if (this.options.disableClusteringAtZoom) {
e = this.options.disableClusteringAtZoom - 1
}以及下方的 for (var g = e; g >= 0; g--) {
this._gridClusters[g] = new L.DistanceGrid(f(g));
this._gridUnclustered[g] = new L.DistanceGrid(f(g));
}通过网页的断点调试发现g取得的值无论多少f(g)都是80这时候查看
L.MarkerClusterGroup = L.FeatureGroup.extend({
4000
options: {
maxClusterRadius: 80,
iconCreateFunction: null,
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
singleMarkerMode: false,
disableClusteringAtZoom: null,
removeOutsideVisibleBounds: true,
animateAddingMarkers: false,
spiderfyDistanceMultiplier: 1,
chunkedLoading: false,
chunkInterval: 200,
chunkDelay: 50,
chunkProgress: null,
polygonOptions: {}
}中maxClusterRadius的值当你修改为1后运行可以看到意想不到的效果。
但是却不能直接修改这儿的 信息,需要修改
for (var g = e; g >= 0; g--) {
if(g==e){
this._gridClusters[g] = new L.DistanceGrid(1);
this._gridUnclustered[g] = new L.DistanceGrid(1);
}else{
this._gridClusters[g] = new L.DistanceGrid(f(g));
this._gridUnclustered[g] = new L.DistanceGrid(f(g));
}
}这样就可以在最后一个级别时让其聚合的范围缩小到一定这样就可以达到同一点多个标记的效果。
var clusterMarkers = L.markerClusterGroup({
showCoverageOnHover : false,
spiderfyOnMaxZoom : true,
disableClusteringAtZoom : 18
});然后再在获取相关标记时clusterMarkers.addLayer(markerT
);最后添加到地图;map.addLayer(clusterMarkers);
但是这样的聚合再出现标题中的情况时会出现如下的情况
(1):disableClusteringAtZoom : 18和function initMap(){
map = L.map('mapDiv', {
minZoom : 7,
maxZoom : 18,
crs : L.CRS.EPSG4326,
zoomControl : false,
attributionControl : false
}).setView([23.16,113.28], (6-2)+10);}}与初始化map时出现maxZoom为18时这样的聚合在最大级别时所有展开最后同一个点的多个标记都会一层一层被覆盖。
(2):disableClusteringAtZoom : 19和maxZoom : 18时这时候会发现虽然最大级别时还是出现聚合但是有很多不是同一个点的标记也存在聚合中。
解决方案:
修改disableClusteringAtZoom : 19,然后在源代码leaflet.markercluster.js中查找disableClusteringAtZoom 属性,这时候的js进了加密和压缩可以使用在线格式化js的方式获取更易读的js文件。
这时候if (this.options.disableClusteringAtZoom) {
e = this.options.disableClusteringAtZoom - 1
}以及下方的 for (var g = e; g >= 0; g--) {
this._gridClusters[g] = new L.DistanceGrid(f(g));
this._gridUnclustered[g] = new L.DistanceGrid(f(g));
}通过网页的断点调试发现g取得的值无论多少f(g)都是80这时候查看
L.MarkerClusterGroup = L.FeatureGroup.extend({
4000
options: {
maxClusterRadius: 80,
iconCreateFunction: null,
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
singleMarkerMode: false,
disableClusteringAtZoom: null,
removeOutsideVisibleBounds: true,
animateAddingMarkers: false,
spiderfyDistanceMultiplier: 1,
chunkedLoading: false,
chunkInterval: 200,
chunkDelay: 50,
chunkProgress: null,
polygonOptions: {}
}中maxClusterRadius的值当你修改为1后运行可以看到意想不到的效果。
但是却不能直接修改这儿的 信息,需要修改
for (var g = e; g >= 0; g--) {
if(g==e){
this._gridClusters[g] = new L.DistanceGrid(1);
this._gridUnclustered[g] = new L.DistanceGrid(1);
}else{
this._gridClusters[g] = new L.DistanceGrid(f(g));
this._gridUnclustered[g] = new L.DistanceGrid(f(g));
}
}这样就可以在最后一个级别时让其聚合的范围缩小到一定这样就可以达到同一点多个标记的效果。
相关文章推荐
- 一个关于php使用pdo方式进行数据库连接和处理的类
- 电脑出现IE已经阻止此站点以不安全的方式使用ActiveX控件,因此该网页无法正确显示”的处理办法
- 在ruby 2 和rails 4 里面使用send_file 下载文件的时候。在IE下面中文名出现乱码的处理方式
- 对于一个有序数组,我们通常采用二分查找的方式来定位某一元素,请编写二分查找的算法,在数组中查找指定元素。 给定一个整数数组A及它的大小n,同时给定要查找的元素val,请返回它在数组中的位置(从0开始),若不存在该元素,返回-1。若该元素出现多次,请返回第一次出现的位置。
- C#和Qt实现的对于异常处理的一个使用策略
- 金牌信通V6无法打开,报错,出现问题,不能使用,更新失败,请求失败等问题处理方式
- 一个关于php使用pdo方式进行数据库连接和处理的类
- 打印不同的数(编写一个程序,使用指针访问数组方式,读入十个数,输出其中不同的数,即一个数如果出现多次,只打印一次)
- EasyUI>同一界面多个ComboTree使用同一个数据源处理方式!
- idea 使用maven编译项目时出现源码版本警告的处理方式
- android中Thread对于Adapter出现的报错情况的处理以及如何正确使用Spinner与SimpleCurosorAdapter
- Java的图形处理中经常使用坐标方式
- 关于httpcontext实际使用时出现的一个问题
- 在使用Oracle9Ii时出现的一个问题~~
- 实战一个故障问题:出现打开方式拒绝访问这样的问题
- 如何解决ADO.NET访问Access数据库出现"操作必须使用一个可更新的查询"的问题
- 多个Button使用同一个事件处理方法时判断是哪个Button发生了事件
- 关于存储过程中一个参数表示多个查询条件使用方法的简单处理
- 一个ajax的公共类以及他的使用方式和应该注意的地方
- 使用 Anthem.NET 的常见回调(Callback)处理方式小结