Question

我将leafCluster用于Leaflet，并将showCoverageOnHover选项设置为true。但是，在Firefox（v 46.0.1）中，事件showCoverageOnHover未正确触发，这意味着不仅在鼠标悬停在群集上时显示群集区域，而且还显示群集区域是否远离该群集。基本上，我使用标准过程来创建markerClusterGroup，但使用自定义图标创建功能（使用d3绘制饼图）。我的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

#mapid {
    height: 60vh;
} 

</style>

<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<title>WorldMap</title>

<script type="text/javascript">

function defineClusterIcon(cluster) {

    var color = d3.scale.category20b();
    //some dummy json
    var myjson = '[{ "label":"Monday", "count": 15 },{ "label":"Tuesday", "count": 20 }]';
    var dataset = JSON.parse( myjson );
    var size = 40;
    var radius= size / 2;

    var svgres = document.createElementNS(d3.ns.prefix.svg, 'svg');
    var svg = d3.select(svgres).append('svg')
                .attr('width', size)
                .attr('height', size)
                .append('g')
                .attr('transform','translate(' + (size / 2) + ',' + (size / 2) + ')'); //center g 
    var arc = d3.svg.arc().outerRadius(radius);
    var pie = d3.layout.pie().value(function(d) {
        return d.count;
    }); 

    //create final chart
    svg.selectAll('path').data(pie(dataset)) //fill dataset into path
        .enter() //create placeholder for data
        .append('path') //fill placeholder with data in path
        .attr('d', arc) //define an attribute d
        .attr('fill', function(d, i) {
            return color(d.data.label);
        });

    var html = serializeXmlNode(svgres);

    var myIcon = new L.DivIcon({
        html : html,
        className : 'mycluster',
        iconSize : new L.Point(size, size)
    });
    return myIcon;
}

function serializeXmlNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

</script>
</head>
<body>

<div id="mapid"></div>

<script type="text/javascript">

var map = L.map('mapid', { 
    center: [40, 40], 
    maxZoom : 10,
    zoom: 2 
}); 

//create markercluster
var markers = new L.markerClusterGroup({
    showCoverageOnHover: true, 
    iconCreateFunction: defineClusterIcon          
});

//some example markers
var marker = new L.marker([40.0,10.0]);
markers.addLayer(marker);

var marker = new L.marker([42.0,-12.0]);
markers.addLayer(marker);

var marker = new L.marker([50.0,30.0]);
markers.addLayer(marker);
map.addLayer(markers);

</script> 
</body>
</html>

为什么在Firefox中没有正确触发showCoverageOnHover事件？

谢谢！

Answer 1

看起来您创建的SVG元素溢出了Leaflet图标。

只需在图标类上设置overflow: hidden CSS规则就可以解决您的问题。

.mycluster {
  overflow: hidden;
}

更新了JSFiddle：https://jsfiddle.net/sqeypmrn/1/

注意：问题也在Leaflet.markercluser GitHub页面上发布为issue #677。

Leaflet Markercluster showCoverageOnHover触发错误

1 个答案: