在GeoJSON Layer上使用背景图像

Question

我正在创建威斯康星州和郡的传单地图。我有一个整个美国的层，一个用于威斯康星州，一个用于每个县。我有3种不同的风格，我正在适当地设置它们。一切都按照您的想法运作。

function setStyle(feature) {
return {
    opacity: 1,
    color: "#fff",
    fillColor: "#c5050c",
    fillOpacity: 1
}
}
function setUS(feature) {
return {
    opacity: .5,
    color: "#a5a5a5",
    fillColor: "#ebebeb",
    fillOpacity: 0.2
}
}
function setState(feature) {
return {
    opacity: 1,
    color: "#fff",
    fillOpacity: .1
}
}
L.geoJson(state, { style: setState}).addTo(map);
L.geoJson(states, { style: setUS}).addTo(map);
L.geoJson(Adams, { style: setStyle}).addTo(map)

我想要做的是更新State图层以获得背景图片。我无法弄清楚如何使用GeoJSON层来做这个Leaflet。有没有人有什么建议？我尝试添加一个类并给它一个背景图像。我尝试使用imageOverlay，但只创建一个矩形。

这就是我想要的样子。

Answer 1

请注意，您可以轻松地在边框上使用带有透明度（Alpha通道）的PNG图像的图像叠加。

您可能也会对TileLayer.BoundaryCanvas插件感兴趣，尤其是如果您的背景图片可以作为图块提供。

  

BoundaryCanvas是Leaflet映射库的插件，用于绘制具有任意边界的平铺栅格图层。 HTML5 Canvas用于渲染。适用于Leaflet 0.7.x和1.0beta版本。

在插件提供的新Tile Layer中，您只需添加一个boundary选项，其中包含整体GeoJSON形状。