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

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

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) // 如果10不够可以往上调

效果
20230710_122535.gif

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: leaflet.tilelayer.wmts是一个用于在Leaflet地图库中加载WMTS(Web Map Tile Service)图层的插件。 WMTS是一种用于获取、显示和渲染地图瓦片的标准化协议。WMTS将地图数据切割为小的瓦片并提供给客户端,然后客户端根据需要请求和加载这些瓦片来组成完整的地图。 leaflet.tilelayer.wmts插件提供了一个函数来创建一个WMTS图层实例。这个函数需要提供一些参数,包括填充在URL模板中的替换变量,如服务URL、图层名称、样式、投影、瓦片矩阵集及其ID等。 使用leaflet.tilelayer.wmts可以方便地将WMTS图层加载到Leaflet地图中。只需要为插件的函数提供正确的参数,然后将返回的图层实例添加到地图上即可。 例如,可以使用以下代码加载一个WMTS图层: ```JavaScript var wmtsLayer = L.tileLayer.wmts('https://example.com/wmts/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png', { style: 'default', tilematrixSet: 'EPSG:4326', layer: 'myLayer', format: 'image/png', transparent: true }); var map = L.map('map').setView([51.505, -0.09], 13); wmtsLayer.addTo(map); ``` 以上代码演示了如何在Leaflet地图中使用leaflet.tilelayer.wmts加载一个WMTS图层。需要注意的是,URL模板中的替换变量(例如{Style}、{TileMatrixSet}等)需要根据实际情况进行替换。另外,还可以自定义一些其他选项,如图层样式、投影、图层名称及格式等。 总之,leaflet.tilelayer.wmts是一个方便的Leaflet插件,可用于加载WMTS图层,并为用户提供了简单的API来配置和管理这些图层。 ### 回答2: leaflet.tilelayer.wmts是一个在Leaflet地图库中,用于加载和显示Web地图切片图层的插件。WMTS代表Web地图切片服务(Web Map Tile Service),它是一种通过在不同层级上使用切片(tiles)的方式来提供地图数据的服务。 leaflet.tilelayer.wmts插件允许我们使用WMTS服务加载地图图层。它支持加载的图层类型包括矢量图层、栅格图层以及标注图层。我们可以通过指定图层的URL、样式和图层标识来加载WMTS图层。 为了使用leaflet.tilelayer.wmts插件加载WMTS图层,我们需要提供一个符合WMTS标准的服务URL。通常,这个URL包含了WMTS服务的地址、图层名称以及请求的样式。 在Leaflet中,我们可以使用L.tileLayer.wmts()函数来创建一个WMTS图层。我们需要传递的参数包括WMTS服务的URL、图层标识、以及其他的可选配置参数,如最大缩放层级、透明度等。 通过使用leaflet.tilelayer.wmts插件,我们可以轻松地在Leaflet地图上加载和显示WMTS图层。这使得在Leaflet中使用基于切片的Web地图服务变得更加简单和便捷。 总之,leaflet.tilelayer.wmts是一个用于在Leaflet地图库中加载和显示WMTS图层的插件。它基于Web地图切片服务,并通过指定WMTS服务的URL、图层标识等参数来加载地图图层。它的出现使得在Leaflet中使用WMTS图层变得更加方便和高效。 ### 回答3: leaflet.tilelayer.wmts是Leaflet地图库中的一个模块,用于加载和显示基于WMTS(Web Map Tile Service)协议的切片地图图层。 WMTS是一种通过Web服务提供的地图切片数据的标准化协议。切片数据是将地图拆分成小块的图像数据,每个切片表示地图的一部分。WMTS允许用户通过Web服务请求确定的切片数据,以在地图应用中加载和显示地图图层leaflet.tilelayer.wmts通过WMTS请求从指定的WMTS服务加载地图切片数据,并将其作为图层显示在Leaflet地图上。它提供了对WMTS图层的灵活配置选项,包括设置图层的URL地址、样式、投影、坐标系和切片大小等。 使用leaflet.tilelayer.wmts,我们需要提供WMTS服务的URL地址,并根据服务提供的要求进行配置。配置选项包括图层名称、样式、投影和地图坐标系等。然后,将配置好的leaflet.tilelayer.wmts对象添加到Leaflet地图中,即可在地图上显示WMTS图层。 例如,以下是使用leaflet.tilelayer.wmts加载WMTS图层的示例代码: ```javascript var wmtsLayer = L.tileLayer.wmts('http://myWMTSservice/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png', { layer: 'myWMTSLayer', style: 'default', matrixSet: 'EPSG:4326', format: 'image/png', attribution: 'My WMTS Service' }).addTo(map); ``` 以上代码将从名为"myWMTSservice"的WMTS服务加载名为"myWMTSLayer"的图层数据。图层使用默认样式和EPSG:4326投影。加载的切片数据是PNG格式的图像。图层的属性会显示在地图上。 总之,leaflet.tilelayer.wmts是一个用于加载和显示基于WMTS协议的切片地图图层的模块,通过配置WMTS服务的URL地址和其他属性,可以将WMTS图层添加到Leaflet地图上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值