如何在传单中添加未引用的图像作为覆盖

Question

我有一个Leaflet地图，其中包含tileLayer和标记。 我想添加图像叠加层，以向图块添加一些效果和样式。

L.imageOverlay很不错，但是它需要边界，而我想将图像锚定到渲染地图的绝对像素。 例如，具有朝着缩放级别连续的效果。

可以通过获取范围并每次重新定义层的边界来做到这一点，但这是荒谬的，因为这些将需要在内部转换为绝对值。 尽管如此，我无法通过阅读API找到实现此目的的方法。

您可以在地图顶部将诸如框架，渐变之类的东西成像。

Answer 1

您可以使用控件和div来操纵图像。 不确定是否有帮助。

var legend2 = L.control({position: 'topleft'}); 
legend2.onAdd = function (map) {        
    var div = L.DomUtil.create('div', 'info legend2');
    div.innerHTML = '<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" style="transform: matrix3d(-0.509677, 0.655299, 0, -0.000417152, 0.597349, 0.564009, 0, 0.000111701, 0, 0, 1, 0, 0, 0, 0, 1); ">';     
    return div;
};      
legend2.addTo(map);

Answer 2

做一些阅读来添加水印对我们很有用。 leaflet.spin.js调用的核心Spin.js库的介绍提到了这一点：

spin（）方法创建必要的HTML元素并开始动画。 如果将目标元素作为参数传递，则将微调器作为第一个子元素添加，并在水平和垂直方向居中。

所以当this._spinner = new Spinner().spin(this._container); 对于要加载的图层调用，则图层大小以像素为单位确定。 它是在DOM中固定的，而不是在传单层中固定的。