css - 在 Leaflet 中使用 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()没有效果（这意味着地图中的覆盖元素）。

我不得不强制 Leaflet 将图块显示为嵌入式 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;
};

然后它起作用了！