在传单中使用 CSS 设置 SVG 磁贴图层的样式

Question

我使用 Leaflet 显示矢量图块图层，如下所示：

var tiles = L.tileLayer('mytiles/{z}/{x}/{y}.svg', {
    renderer: L.svg(),
    continuousWorld: true,
    noWrap: true,
    minZoom: 0,
    maxZoom: 10,
})

我的磁贴的元素有 CSS 类，例如 <rect class="country-ES" ...></rect> ，所以我想在我的 CSS 中设置它们的样式：

.country-ES {
  fill: red !important;
}

但是，磁贴似乎不受这些 CSS 指令的影响。而且我不知道如何调试它，因为Chrome或Firefox的Web开发器工具无法检查这些磁贴。

知道如何实现吗？

Answer 1

在图块中设置renderer: L.svg()不起作用(这适用于地图中的叠加元素(。

我不得不强制传单将磁贴显示为嵌入式 SVG，如下所示：

tiles.createTile = function (coords, done) {
    var tile = document.createElement('div');
    tile.setAttribute('role', 'presentation');
    $.get(this.getTileUrl(coords),
         success=function(data) {
             tile.appendChild(data.firstChild);
             done(null, tile);
    }).fail(function(error) {
             done(error, tile);
    });
    return tile;
};

然后它奏效了！