在 Leaflet 中使用 CSS 设置 SVG tile 层的样式

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;
};

然后成功了！

在 Leaflet 中使用 CSS 设置 SVG tile 层的样式

Styling an SVG tile layer with CSS in Leaflet

css

svg

leaflet

vector-tiles