leaflet 设置图层 层级

858 阅读1分钟

基础html内

 <label for="idx2">
            影像图层 Z-index:
            <input type="number" id="imgLayer" value="1" onchange="changeImageLayerIndex()" />
        </label>
 imageLayer = L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=key", { noWrap: true }).addTo(map);
 
  function changeImageLayerIndex() {
            //获取影像图层的number标签
            var imgInput = document.getElementById('imgLayer');
           
            //设置图层的ZIndex,上层的ZIndex值比下层的要大
            imageLayer.setZIndex(parseInt(imgInput.value, 10));
        }

vue中异步


 async mounted() {
    console.log(this.$utils.map.$L.Control.MiniMap);
    this.map = this.$utils.map.createMap("map-container", {
      //缩放控件
      zoomControl: false,
    });

    // 加载 open street map 图层服务
   let k = await this.$utils.map.createTileLayer(this.map, this.vecLayer, {
      noWrap: true,
    });
  setTimeout(() => {
    console.log(k);
         k.setZIndex(-1)
    }, 2000)}