javascript - LeafletJS L.DivIcon HTML 标记文本 - 相对于 map 缩放比例

Question

因此，我正在使用最新版本的传单(v1.0.2)，并尝试将文本标签动态应用于自定义(地理对齐) map 上的特定 lat lng 点。

我的问题是我需要 map 上的文本在缩放时保持它的大小(好像文本实际上是平铺图像的一部分)。使用任何类型的标记都会使文本保持正确的大小。如果我使用图像叠加层之类的东西并添加带有文本的 SVG，它会随着 map 缩放而缩放。

我注意到图像叠加层在缩放时在其变换属性中添加了 CSS3 比例，而标记则没有。

我可以像图像叠加一样扩展标记以进行缩放吗？

我已经编写了监听缩放事件并调整标记字体大小的代码，但这是 CPU 密集型的(尤其是对于移动浏览器)，我也不想在 svgs 中动态呈现文本!

我提供了一个演示，以便更有意义。你可以看到示例_1 (标记)保持它的大小，无论您放大或缩小多远。 Example_2 (svg 图像)缩放时相对于 map 进行缩放。这(Example_2)是我想要获得一个带有 html 文本内容的 L.DivIcon 要做的事情!

任何帮助或建议表示赞赏!

https://jsfiddle.net/z96L7hdu/

示例代码

HTML

<div id="map" style="width:500px; height:600px;"></div>

JavaScript

var map = L.map('map', {
  zoomSnap: 0
}).setView([0, 0], 3);

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

var img = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICAgICB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNTAwIDQwIj4gIDx0ZXh0IHg9IjAiIHk9IjAiIGZvbnQtZmFtaWx5PSJWZXJkYW5hIiBmb250LXNpemU9IjM1Ij4gICAgRXhhbXBsZV8yICA8L3RleHQ+PC9zdmc+";

imageBounds = [[-8.636810901898114, -12.135975261193327], [-18.28136415046407, 17.181122017133486]];
L.imageOverlay(img, imageBounds).addTo(map);

var myIcon = L.divIcon({className: 'my-div-icon', html:"Example_1"});
L.marker({lat: 0.7800052024755708, lng: 0.010986328125}, {icon: myIcon}).addTo(map);

Answer 1

为迟到的答案道歉，但我认为这是一个有趣的问题。您确实可以扩展 L.Marker类，创建标记来调整其 DivIcon 的字体大小匹配缩放级别:

L.FixedSizeMarker = L.Marker.extend({
  options: {
    fontSize: 12,   // starting size of icon in pixels
    zoomBase: 3     // Zoom level where fontSize is the correct size
  },
  update: function () {
    if (this._icon && this._icon.tagName === 'DIV' && this._map) {
      let size = this.options.fontSize * Math.pow(2, (this._map.getZoom() - this.options.zoomBase));
      this._icon.style.fontSize = size + 'px';
    }
    return L.Marker.prototype.update.call(this);
  }
});
L.fixedSizeMarker = (latlng, options) => new L.FixedSizeMarker(latlng, options);

上面的代码定义了一个新的 FixedSizeMarker ，其行为与正常的 Marker 相同，但如果添加 DivIcon到它，它会调整字体大小。它有两个选项，以像素为单位指定字体大小，以及您希望该字体大小正确的缩放级别。在 OP 的 JSFiddle 示例中，您可以像这样使用它:

var myIcon3 = L.divIcon({className: 'my-div-icon', html:"Example_3"});
L.fixedSizeMarker({lat: 0.7800052024755708, lng: -12.135975261193327},
                  {icon: myIcon3, fontSize: 24, zoomBase: 3}).addTo(map);

使用这些标记时，设置 {markerZoomAnimation: false} 可能更好看。在 map 选项中。缩放 map 时，标记大小的变化非常明显。