在 Leaflet 中使用 CSS 设计 SVG 平铺层答案

【问题标题】：Styling an SVG tile layer with CSS in Leaflet在 Leaflet 中使用 CSS 设计 SVG 平铺层
【发布时间】：2017-06-15 09:58:11
【问题描述】：

我使用 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 开发工具无法检查磁贴。

知道如何实现吗？

【问题讨论】：

将 CSS 放入 SVG 文件或将 SVG 文件链接到 CSS 文件。
我希望能够通过向我的地图添加 CSS 类来动态更改样式。例如，我可以使用.highlight-country .country-ES { fill: red !important; }，这样只有当我的地图具有highlight-country 类时才会应用该样式。
内联 SVG 会更容易，否则你必须在运行时将 CSS 注入 SVG。
是的，确切地说，我希望 Leaflet 将我的图块显示为内联 SVG……但我还没有弄清楚如何做到这一点。我正在尝试重载 createTiles 方法，以便它下载磁贴并将其放入 <svg> 元素中，如果可行，我将发布答案……

标签： css svg leaflet vector-tiles

【解决方案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;
};

然后它起作用了！

【讨论】：

这是一个非常好的方法！您实际上可以创建一个小插件，将其包装在 L.TileLayer.SVG = L.TileLayer.extend({ createTile: function(coords, tile){...} }) 之类的东西中。创建L.TileLayer 的子类有助于更好地组织代码。
@IvanSanchez ：是的，我正在考虑，但该方法仍有一些缺点：让浏览器管理<img> 元素的加载和缓存可以提供更流畅的渲染。我会努力克服这些。