leaflet 删除指定图层、删除Divicon图层

最新推荐文章于 2024-08-21 15:57:29 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-08-21 15:57:29 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_37550440/article/details/129154941

版权

leaflet 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

先初始化一个底图：

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
  <!-- <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script> -->

  <script src="https://cdn.bootcdn.net/ajax/libs/esri-leaflet/3.0.9/esri-leaflet.js"></script>
  <style>
    #map {
      position: absolute;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id='map'>
  </div>
  <script>
    var map = L.map('map',
      {
        zoomSnap: 0.1, // 地图的有效缩放级别
        maxZoom: 13,
        // crs: L.CRS.EPSG4326,  // 高德不是这个坐标系   
        zoomControl: true,
        editable: true,
        // wheelPxPerZoomLevel:	60  // 鼠标滚轮缩放 较小的值将使滚轮轮缩放更快
      }).setView([29.592024, 106.231126], 13); // 重庆璧山区经纬度
    let baseLayer = L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
      attribution: '&copy; 高德地图',
      maxZoom: 13,
      minZoom: 3,
      subdomains: "1234",
      zoom: 3
    });
    map.addLayer(baseLayer);




  </script>
</body>

</html>

1.移除添加的图层

首先要获取到添加的layer 再移除
查看map的信息如下

let url1 = "http://sk.digitalcq.com/gw/portal/ZH24PU95/pLNv7/ScRucxqf/wms?"
    const wmsLayer = L.tileLayer.wms(
      url1,
      {
        layers: '0', //需要加载的图层
        format: "image/png", //返回的数据格式
        transparent: true,
        id: 'wmsid'
      }
    );
    map.addLayer(wmsLayer)
    console.log(map)

    function findLayer(layerName) {//根据图层名称查找图层
      if (!map) {
        return null
      }
      let gisMap_layers = map._layers
      let layer = null
      for (let i in gisMap_layers) {
        if (gisMap_layers[i].options.id == layerName) {
          layer = gisMap_layers[i]
        }
      }
      return layer
    }
    let res = findLayer('wmsid') // 获取到wmsid这个layer
    console.log(res)

    map.removeLayer(res) //移除这个图层

2.删除Divicon的图层

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <style>
    #map {
      height: 300px;
    }
  </style>
  <div id="map"></div>
</head>

<body>
  <script>
    var mymap = L.map('map').setView([51.505, -0.09], 13);

    // 底图加载	

    L.tileLayer('{https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA'
    }).addTo(mymap);
    // 		// 标记
    var marker1 = L.marker([51.5, -0.09], {
      title: '999'
    })
    let points = { data: '1', y: 51.5, x: -0.09 }
    const addText = (data, y, x, className) => {
      let myIcon = L.divIcon({
        html: data,
        iconAnchor: [32.5, -20]
      });
      let marker = L.marker([y, x], {
        icon: myIcon,
        id: 'textLayer'
      }).addTo(mymap)
      // markers.push(marker);
      // marker
      // let layer1 = L.layerGroup([marker], { id: 'textLayer' });
      // layer1.addTo(mymap)
    };
    addText(points.data, points.y, points.x)
    let points1 = { data: '12', y: 51.52, x: -0.092 }
    addText(points1.data, points1.y, points1.x)
    console.log(mymap)



    function findLayers(layerName) {//根据图层名称查找图层
      if (!mymap) {
        return null
      }
      let gisMap_layers = mymap._layers
      let layers = []
      for (let i in gisMap_layers) {
        if (gisMap_layers[i].options.id == layerName) {
          layer = gisMap_layers[i]
          layers.push(layer)
        }
      }
      return layers
    }
    let res = findLayers('textLayer')
    console.log(res)
    for (let i in res) {
      mymap.removeLayer(res[i])
    }





  </script>

</body>

</html>