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

Question

我已经创建了几个地图叠加层，按钮的图例/图层控制是自动创建的。理想情况下，我希望在"紫色"等文本的位置上使用我的自定义图标。有没有办法实现这一点？我在注释中添加了图片源文件和图标变量名。

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

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

- Wolfe

---

这是一个网页链接，指向一个关于Leaflet.js的教程。我已经翻译了很多类似的内容，所以我甚至不需要问问题。哦等等...原来没有问题？ - undefined

@StackSlave - 我正在学习JavaScript。我不知道如何将我的图标添加到准传说中...请好心帮助我。我请求帮助。 - undefined

https://codepen.io/haakseth/pen/KQbjdO 这个网址是一个代码示例。 - undefined

@StackSlave 谢谢...虽然不完全符合我最初的期望，但提供了一个替代方案。我很感激你的帮助。 - undefined

Answer 1

谢谢！我最终得到了这个，它能够正常工作：）：

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

- Wolfe

Answer 2

根据 Leaflet 文档中的 Control.Layers 部分：

引用：

“baseLayers” 和 “overlays” 参数是对象字面量，以图层名称为键，以图层对象为值：

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

图层名称可以包含HTML，这使您可以向项目添加额外的样式：

{"<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);

• 实时演示 1
• 实时演示 2

(这些例子来自于gis.stackexchange上的这个回答)

- jharris711