使用 boostrap-icons 作为传单地图标记

Question

我想使用 Bootstrap Icons 作为 Leaflet 中的地图标记。有许多用于此目的的插件（例如 [1]、[2]、[3]），但它们未维护或无法与最新的 Bootstrap Icons 一起使用。

所以我尝试从头开始，使用内联 SVG 而不是单独的图像。我从here获取了SVG地图标记“气球”，并使用绝对定位在其上方添加了图标。

const map = L.map('map').setView([51.505, -0.09], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

const icon = L.divIcon({  // leaflet default marker is 25px x 41px
  html: `
    <div>
      <svg width="25px" height="41px" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z"></path>
      </svg>
      <i class="bi bi-house-fill"></i>
    </div>`,
  iconSize: [25, 41],
  iconAnchor: [25/2, 41],
  className: 'icon'
});

L.marker([51.5, -0.09], { icon: icon }).addTo(map);

  
.icon { position: relative; }
.icon path { fill: var(--bs-primary); stroke: var(--bs-dark); }
.bi { position: absolute; top: 1px; left: 4px; font-size: 1rem; color: var(--bs-light); }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" /></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div class="vw-100 vh-100 d-flex">
  <div id="map" class="flex-grow-1"></div>
</div>

结果并不漂亮（如库本身或旧的库插件），但足够好......我确实需要手动调整每个图标（css

top

/

left

）以适合气球内部.

但是标记没有阴影；我需要自己做还是通过传单完成？

Answer 1

这是我如何使用图标解决问题的链接。

简而言之，每个图标都构建为 svg 或 html。 我将全局图标添加到 html

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="display:none">
  <symbol id="icon-bar" viewBox="0 0 32 32"><path d="m17.28 19.43 ..." /></symbol>
...

使用 svg 内联是：

<svg fill="#ffffff">
  <use href="#icon-bar"></use>
</svg>

您可以更改颜色、背景，甚至为每个图标添加边框。 至于阴影，我通常使用css添加它。

每个图标都有自己的类名和相应的类“place-id” 所有图标都会缩放到一定的大小，当然它们必须以相同的方式准备。 该图标可以按类别以“place-id”样式单独更改，例如(地点-69)