JavaScript Leaflet - 将自定义图标图像添加到图层控件

Question

我创建了几个地图叠加层，并且 legend/layer 控件是自动为按钮创建的。理想情况下，我想用我的自定义图标代替文本“紫色”等。有没有办法做到这一点？我添加了带有图像源文件和图标变量名称的注释。

//<img src="Images/purple.jpeg">  
//var purpleIcon = 'Images/purple.jpeg'

// Create an overlays object to add to the layer control
let overlayMaps = {
    "Up to 0K - purple": layers.one,
    "0K - 0K- blue": layers.two,
    "0K - 0K - green": layers.three,
    "0K - M - yellow": layers.four,
    "Over M - red": layers.five,
    "School Quality": layers.six
};

Answer 1

根据 Control.Layers section of the Leaflet Docs:

The baseLayers and overlays parameters are object literals with layer names as keys and Layer objects as values:

{
    "<someName1>": layer1,
    "<someName2>": layer2
}

The layer names can contain HTML, which allows you to add additional styling to the items:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

假设您正在使用 Font-Awesome 的图标。您可以像这样设置您的控件：

L.control.layers(null, {
  '<i class="fas fa-bus"></i>': layer
}).addTo(map);

（示例取自 this answer on gis.stackexchange）

Answer 2

谢谢！我最终得到了这个，它有效:):

let overlayMaps = {
                "<img src='Images/purple.jpeg' width = 15 /> <span>Up to 0K</span>": layers.one,
                "<img src='Images/blue.jpeg' width = 15 /> <span>0K - 0K</span>": layers.two,
                "<img src='Images/green.jpeg' width = 15 /> <span>0K - 0K</span>": layers.three,
                "<img src='Images/yellow.jpeg' width = 15 /> <span>0K - M</span>": layers.four,
                "<img src='Images/pink.jpeg' width = 15 /> <span>M+</span>": layers.five,
                "School Quality": layers.six
            };

JavaScript Leaflet - 将自定义图标图像添加到图层控件

JavaScript Leaflet - Adding custom icon images to Layer Control

javascript

leaflet