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

Question

我正在使用Leaflet的最新版本（v1.0.2），并尝试在自定义地图上动态应用文本标签到特定的纬度和经度点。我的问题是，当缩放地图时，我需要地图上的文本保持其大小（就像文本实际上是瓦片图像的一部分）。使用任何类型的标记会导致文本保持正确的大小。如果我使用像图像叠加这样的东西，并添加一个带有文本的SVG，则它随着地图缩放而缩放。我注意到图像覆盖在缩放时具有其转换属性中添加的CSS3比例，而标记则没有。我能否扩展标记以像图像覆盖一样进行缩放？我已经编写了代码来监听缩放事件并调整标记的字体大小，但这会占用CPU（特别是对于移动浏览器），我也不想在SVG内动态呈现文本！

我提供了一个演示以便更好地理解。您可以看到example_1（标记）无论您缩放多少，它都保持其大小不变。而Example_2（SVG图像）在缩放时相对于地图进行缩放。这就是我试图让带有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);

- Ross

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}可以使地图看起来更好。否则，在缩放地图时，标记的大小变化会非常明显。

- JRI

Answer 2

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

您可以使用此功能修改标记的CSS。

- Jay Z

---

缩放变换单独使用并不有用，因为它会导致标记被平移，同时改变大小。 - JRI