您的位置:首页 > 其它

leaflet 图层高度控制 自定义 自定义窗格 窗格高度 (每天进步一点点)

2019-04-22 11:47 302 查看

我们有的时候在使用leaflet时,需要对图层的显示先后顺序进行调整,由于leaflet默认对图层高度进行的设置,参考(https://github.com/Leaflet/Leaflet/blob/v1.0.0/dist/leaflet.css#L87),窗格是用于控制地图上图层排序的DOM元素,所以我们需要自定义图层高度,将图层放在窗格中,需要自定义窗格,下面就直接上代码:

this.mymap = L.map("mapdiv1").setView([37.8, -96], 4);

创建窗格:labes

this.mymap.createPane('labels');

设置窗格高度

this.mymap.getPane('labels').style.zIndex = 650;

将图像切片放在其他地图图层之上的问题之一是切片将捕获点击和触摸。如果用户单击地图上的任何位置,则Web浏览器将假定她单击了标签切片,而不是在GeoJSON或标记上。这可以通过使用可以解决的pointer-eventsCSS属性:

this.mymap.getPane('labels').style.pointerEvents = 'none';

将图层添加进去的时候记得注明窗格

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(this.mymap);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: