LeafletJS L.DivIcon HTML 标记文本 - 相对于地图缩放比例答案

【问题标题】：LeafletJS L.DivIcon HTML marker text - scale relative to map zoomLeafletJS L.DivIcon HTML 标记文本 - 相对于地图缩放比例
【发布时间】：2017-04-26 05:16:51
【问题描述】：

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

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

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

我可以像叠加图像一样扩展标记吗？

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

我提供了一个演示，以便更有意义。您可以看到 example_1（标记）保持其大小，无论您放大或缩小多少。 Example_2（svg 图像）在缩放时相对于地图进行缩放。这（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);

【问题讨论】：

标签： javascript leaflet

【解决方案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}。缩放地图时，标记大小的变化非常明显。

【讨论】：

【解决方案2】：

const element = marker.getElement();
element.style[L.DomUtil.TRANSFORM] = `scale(3)`;

您可以使用它来修改标记的 css

【讨论】：

缩放变换本身没有帮助，因为它会导致标记被平移并改变大小。