Листовка и выпуск d3SvgOverlay

Question

На моей листовой карте я отображаю наведение, как в этом примере: https://leafletjs.com/examples/choropleth/. Поэтому, когда я двигаю мышью, оно отображает название моего района и прихода.

У меня также есть два геойсона, которые накладывают мои карты. http://blockbuilder.org/renauld94/81500a71a32adaa4ee09a0b26d21ee89

Проблема в том, что когда я выбираю один из моих геоджонов (наложение), зависание перестает работать, потому что над «слоем наведения» находится геойсон.

Я хочу, чтобы мой ховер работал, даже если я выбираю один из моих геойсон

Возможно ли, что наведение работает, даже если слой «перекрывает» мой слой наведения?

 var info = L.control();

                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>Geography</h4>' +  (props ?
                        '<b>' + props.ADM2_NAME + '</b><br />'+ props.ADM3_NAME + '</b><br />' : 'Hover over a ward');
                };

                info.addTo(map);

    var geojson;

                    function resetHighlight(e) {
                        geojson.resetStyle(e.target);
                        info.update();
                    }

                    function zoomToFeature(e) {
                        map.fitBounds(e.target.getBounds());
                    }

                    function onEachFeature(feature, layer) {
                        layer.on({
                            mouseover: highlightFeature,
                            mouseout: resetHighlight,
                            click: zoomToFeature
                        });
                    }

                    geojson = L.geoJson(warddata, {
                        style: style,
                        onEachFeature: onEachFeature
                    }).addTo(map);



var ward = [];
            var wardOverlay = L.d3SvgOverlay(function(sel, proj) {

              var upd = sel.selectAll('path').data(ward);
              upd.enter()
                .append('path')
                .attr('d', proj.pathFromGeojson)
                .attr('stroke', 'red')
                .attr('fill-opacity', '0.2');
              upd.attr('stroke-width', 1 / proj.scale);
            });





  var district = [];
        var districtOverlay = L.d3SvgOverlay(function(sel, proj) {

          var upd = sel.selectAll('path').data(district);
          upd.enter()
            .append('path')
            .attr('d', proj.pathFromGeojson)
            .attr('stroke', 'black')
            .attr('fill-opacity', '0.1')
          upd.attr('stroke-width', 1 / proj.scale);

        }); 

        var mixed = {
          "districtOverlay": districtOverlay,       // OverlayMaps
          "wardOverlay": wardOverlay                // OverlayMaps      
        };



        L.control.layers(baseMaps, overlays).addTo(map);  
        L.control.layers(null, mixed).addTo(map);

Answer 1

Если я правильно понимаю, вам нужно отключить события указателя на district и ward

поэтому после каждого .attr('d', proj.pathFromGeojson) добавляйте .attr('pointer-events','none')

Что-то вроде

      var upd = sel.selectAll('path').data(district);
      upd.enter()
        .append('path')
        .attr('d', proj.pathFromGeojson)
        .attr('pointer-events','none') // add this line
        .attr('stroke', 'black')
        .attr('fill-opacity', '0.1')
      upd.attr('stroke-width', 1 / proj.scale);