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中，而不是在传单层中。

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

2 个答案: