我的传单项目中有一个 mapbox map 和一个图像叠加层。我需要将图像放在 map 下方(具有透明区域),但我也尝试使用 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();
Leaflet 文档允许 bringToBack 到 ImageOverlay,但我想叠加层和 map 位于 2 个不同的堆栈中。
最佳答案
堆栈顺序由 map panes 控制.您可以添加一个 Pane ,将其 z-index
设置在图 block 层下方,然后将您的图像叠加层添加到该 Pane 。
有点像
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>
关于javascript - 传单将图像叠加在 map 下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46808814/