[英]Leaflet put image overlay below the map
我的傳單項目上有一個mapbox地圖和一個Image Overlay。 我需要將圖像放在地圖下方 (具有透明區域),但我也嘗試使用bringToBack()而沒有運氣。
這是代碼:
mymap = new L.Map('map').setView([41.69906, 12.39258],5);
L.tileLayer('https://api.mapbox.com/styles/v1/.....',
{zIndex:90}).addTo(mymap);
var bounds = new L.LatLngBounds (
new L.LatLng(30,-10),
new L.LatLng(50,36));
mymap.fitBounds(bounds);
var overlay = new L.ImageOverlay("image.png" ,
bounds, {
attribution: "E.U Copernicus Marine Environment Monitoring Service"
});
mymap.addLayer(overlay);
overlay.bringToBack();
傳單文檔允許將toToBack帶到ImageOverlay,但我認為疊加層和地圖位於2個不同的堆棧中。
堆棧順序由地圖窗格控制。 您可以添加窗格,將其z-index
設置為在圖塊層下,並將圖像疊加添加到此窗格。
就像是
mymap.createPane('imagebg');
mymap.getPane('imagebg').style.zIndex = 50;
// ...
var overlay = new L.ImageOverlay("image.png" ,
bounds, {
attribution: "E.U Copernicus Marine Environment Monitoring Service",
pane: 'imagebg'
});
和一個演示(半透明瓷磚背后的傳單標志)
var map = new L.Map('map').setView([41.69906, 12.39258],5); map.createPane('imagebg'); map.getPane('imagebg').style.zIndex = 50; var attributions = {attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>'}; var tiles = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',attributions).addTo(map); tiles.setOpacity(0.7); var bounds = new L.LatLngBounds ( new L.LatLng(30,-10), new L.LatLng(50,36)); map.fitBounds(bounds); var overlay = new L.ImageOverlay("http://leafletjs.com/docs/images/logo.png" , bounds, { attribution: "Leaflet", pane: 'imagebg' }); map.addLayer(overlay);
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; }
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <div id='map'></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.