Question

所以我使用最新版本的传单（v1.0.2），并试图动态地将文本标签应用于自定义（地理对齐）地图上的特定纬度点。

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

我注意到图像叠加在缩放时会将变换属性中的CSS3比例添加到其变换属性中，而标记则不会。

我可以将标记扩展到图像叠加层吗？

我已经编写了代码来监听缩放事件并调整标记的字体大小，但这是CPU密集型的（特别是对于移动浏览器而言）我并不想在内部动态渲染文本svgs要么！

我提供了一个演示，以便更有意义。您可以看到 example_1 （标记）保持它的大小，无论您放大还是缩小。 Example_2 （svg图像）在缩放时相对于地图进行缩放。这个（例子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}。缩放地图时，标记大小的变化非常明显。

Answer 2

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

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

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

2 个答案: