526互联

【Leaflet专题篇】L.tileLayer图层顺序问题

发布时间 2023-07-10 14:29:06作者: csincs

1 问题复现

使用L.tileLayer加载底图（A、B、C）并使用layerControl管理、在用L.tileLayer.wms添加wms服务（D），当切换ABC时会压盖D
20230710_111941.gif
视频中右下角的wms服务（D）只有在切换ing看得到，切换完成就被压盖了
有问题代码如下

const mapUrl = "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=xxx";
const vecUrl = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxx";
// 天地卫星图
const layerA = L.layerGroup([ 
  L.tileLayer(mapUrl, {
    maxZoom: 20,
    minZoom: 3
  })
])
// 天地矢量图
const layerB = L.layerGroup([ 
  L.tileLayer(vecUrl, {
    maxZoom: 20,
    minZoom: 3
  })
])
// 高德卫星
const layerC = L.layerGroup([
  L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
    maxZoom: 18,
    maxNativeZoom: 16,
    minZoom: 3,
    attribution: '高德地图 AutoNavi.com',
    subdomains: '1234'
  })
])
const baseLayers = {
  'A': layerA,
  'B': layerB,
  'C': layerC
}

// 记载wms服务
let layerName = 'layerName' // 修改为可访问的图层名
let url = 'url' // 修改为可访问地址
const layerD = L.layerGroup([
  L.tileLayer.wms(url, {
    layers: layerName,
    format: 'image/png',
    transparent: true,
    attribution: layerName
  })
])
// 
var map = L.map('map', {attributionControl: false, layers: [layerA]}).setView([29.04656, 112.86254], 8);
L.control.layers(baseLayers,null, {position: 'topleft', sortLayers: true}).addTo(map)

2 解决方案

2.1 使用layerControl的overlayer

layerControl可以将图层分为baselayer (基础层) 和overlayer（覆盖层）两种.
基础层是互斥的，一次只能显示一个，覆盖层是可以叠加的，并且在基础层之上。
将D图层放在overlayer中可以避免覆盖

const overlayers = {
  'D': layerD
}
L.control.layers(baseLayers, overlayers, {position: 'topleft', sortLayers: true}).addTo(map)

效果
20230710_114350.gif

2.2 使用setZIndex

setZIndex方法可以设置图层的顺序 （适用于 L.imageOverlay、L.layerGroup、L.GridLayer）
使用setZIndex可以更加灵活配置

L.control.layers(baseLayers, null, {position: 'topleft', sortLayers: true}).addTo(map)
layerD.addTo(map)
layerD.setZIndex(10)

效果
20230710_122535.gif

上面的L.tileLayer和L.tileLayer.wms都是用layerGroup管理，也可以不用layerGroup管理，直接addTo(map)，但是没有setZIndex方法不好控制图层顺序