Листовка Markercluster showCoverageOnHover сработала неправильно

Я использую markerCluster для 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>

Любые идеи, почему событие showCoverageOnHover не запускается правильно в Firefox?

Спасибо!

Источник

1 ответ

Решение

Похоже, созданный вами элемент SVG переполняет значок Leaflet.

Просто настройка overflow: hidden Правило CSS в вашем классе иконок, похоже, решает вашу проблему.

.mycluster {
  overflow: hidden;
}

Обновленный JSFiddle: https://jsfiddle.net/sqeypmrn/1/

Примечание: вопрос также размещен на странице GafHub Leaflet.markercluser как выпуск № 677.

Источник
Другие вопросы по тегам