在 Leaflet 中设置矢量网格层的样式

Question

我正在尝试为 leafletJS 地图设置地图图层的样式并使用以下代码，但它似乎根本没有颜色：

var vectorTileOptions = {
    rendererFactory: L.canvas.tile,
    vectorTileLayerStyles: {
                            weight: 2,
                            color: 'yellow',
                            },
};

var mapLayer = L.vectorGrid.protobuf("/tiles/admin_countries/{z}/{x}/{y}", vectorTileOptions)

它只是呈现标准蓝色，我不确定我做错了什么，任何建议都很好。

Answer 1

这样做就可以了：

.setStyle({fillColor: '#dd0000', color: '#dd0000', weight: 1, opacity: 0.8, fillOpacity: 0.8});

实际上，不，我认为您只需要调整那里的内容即可：

vectorTileLayerStyles: {
                        weight: 2,
                        fillColor: '#9bc2c4'
                        },

这里有很多关于它的内容：https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids

Answer 2

答案可以是 found here，通过单击日志 e.layer 控制台，您可以获得属性，它用作 vectorTileOptions 的密钥，并且然后根据需要设置样式。

在 Leaflet 中设置矢量网格层的样式

Styling Vectorgrid Layer in Leaflet

leaflet

styling

vector-tiles