如何在傳單中添加未引用的圖像作為覆蓋

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中固定的，而不是在傳單層中固定的。