改变图层时改变折线和标记图标的颜色？

纽伯特

假设我是一条紫色折线，并且正在使用紫色图标表示一层标记，但想在另一层使用橙色折线和橙色标记图标。我该怎么做？是否有onlayerchange事件？但是，即使有我该如何更改所有标记的所有图标呢？或者，也许我可以删除所有标记，然后替换它们，尽管带有不同的图标，但是请问如何删除标记（整体还是其他方式）。

有任何想法吗？

kboul

我不确定我是否理解正确，但是您可以执行以下操作。

如果要在带有折线的标记之间切换并分配不同的颜色，可以使用此插件并通过传递颜色来返回图标标记。

 const icon = (color) => L.icon({
        iconSize: [25, 41],
        iconAnchor: [10, 41],
        popupAnchor: [2, -40],
        iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
        shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
 });

然后，您可以将带有首选颜色的图标和标签

var places1 = [
        { latlng: [39.61, -105.02], popup: 'This is Littleton, CO.'},
        { latlng: [39.74, -104.99], popup: 'This is Denver, CO.'},
        {latlng: [39.73, -104.8], popup: 'This is Aurora, CO.'}
];
      
 places1.forEach(place => L.marker(place.latlng, {
      icon: icon('violet')
 }).bindPopup(place.popup).addTo(cities1))

在这里定义折线颜色

L.polyline(places1.map(({latlng}) => latlng), {
    color: 'purple'
  }).addTo(cities1);

同样，您可以对其他叠加层执行相同的步骤

<!DOCTYPE html>
<html>

<head>

  <title>Layers Control Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    var cities1 = L.layerGroup();
    var cities2 = L.layerGroup();

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const icon = (color) => L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
      shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
    });

    var places1 = [{
        latlng: [39.61, -105.02],
        popup: 'This is Littleton, CO.'
      },
      {
        latlng: [39.74, -104.99],
        popup: 'This is Denver, CO.'
      },
      {
        latlng: [39.73, -104.8],
        popup: 'This is Aurora, CO.'
      }
    ];

    places1.forEach(place => L.marker(place.latlng, {
      icon: icon('violet')
    }).bindPopup(place.popup).addTo(cities1))

    var places2 = [{
        latlng: [39.77, -105.23],
        popup: 'This is Golden, CO.'
      },
      {
        latlng: [39.75, -105.16],
        popup: 'This is Applewood, CO.'
      }
    ];

    places2.forEach(place => L.marker(place.latlng, {
      icon: icon('orange')
    }).bindPopup(place.popup).addTo(cities2))




    L.polyline(places1.map(({
      latlng
    }) => latlng), {
      color: 'purple'
    }).addTo(cities1);

    L.polyline(places2.map(({
      latlng
    }) => latlng), {
      color: 'orange'
    }).addTo(cities2);

    var overlays = {
      "cities1": cities1.addTo(map),
      "cities2": cities2
    };

    L.control.layers(null, overlays).addTo(map);
  </script>



</body>

</html>

对于要在基础层更改后更改颜色的方案：您仍然可以重用icon()函数，现在通过监听地图baselayerchange事件在更改层时现在使用跟随块动态更改颜色

 function addMarkersAndPolyline(color) {
        places.forEach(place => L.marker(place.latlng, {
          icon: icon(color)
        }).bindPopup(place.popup).addTo(cities))

        L.polyline(places.map(({
          latlng
        }) => latlng), {
          color
        }).addTo(cities);

  }

<!DOCTYPE html>
<html>

<head>

  <title>Layers Control Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    var cities = L.layerGroup();

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
    });

    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

    var grayscale = L.tileLayer(mbUrl, {
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      }),
      streets = L.tileLayer(mbUrl, {
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      });

    var baseLayers = {
      "Grayscale": grayscale.addTo(map),
      "Streets": streets
    };

    const icon = (color) => L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
      shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
    });

    var places = [{
        latlng: [39.61, -105.02],
        popup: 'This is Littleton, CO.'
      },
      {
        latlng: [39.74, -104.99],
        popup: 'This is Denver, CO.'
      },
      {
        latlng: [39.73, -104.8],
        popup: 'This is Aurora, CO.'
      }
    ];


    function addMarkersAndPolyline(color) {
      places.forEach(place => L.marker(place.latlng, {
        icon: icon(color)
      }).bindPopup(place.popup).addTo(cities))

      L.polyline(places.map(({
        latlng
      }) => latlng), {
        color
      }).addTo(cities);

    }

    addMarkersAndPolyline('violet')


    map.on('baselayerchange', function(e) {
      cities.clearLayers();

      if (e.name === 'Streets') {

        addMarkersAndPolyline('orange');
        return
      }
      addMarkersAndPolyline('violet');

    });

    var overlays = {
      "cities1": cities.addTo(map),
    };

    L.control.layers(baseLayers, overlays).addTo(map);
  </script>



</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-02-3

我来说两句

0 条评论

登录后参与评论

上一篇：JSON序列化对象通过多处理调用给出错误-TypeError：XXX个对象不可调用错误

改变图层时改变折线和标记图标的颜色？

改变图层时改变折线和标记图标的颜色？

隐藏发件人没有短信PHP

材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

在Windows 7中无法删除文件（2）

HttpClient中的角度变化检测

Azure VM启动/停止日志

如何在 Vb.net 中使用函数返回多个值

Powerpoint-条形长度错误的堆积条形图

最新歌剧断断续续的快速拨号和渲染错误

Mac OS X更新后的GRUB 2问题

需要公式以vlookup逗号分隔单个单元格中的值

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

ggplot：对齐多个分面图-所有大小不同的分面

OS X-为什么我需要打开WiFi才能确定最近的位置

用日期数据透视表和日期顺序查询

Java Eclipse中的错误13，如何解决？

如何在Django中使用UUID

加载Microsoft Visual菜单时出现问题

具有if条件的SQL UPDATE

从JSON到JSONL的Python转换

如何在Kod中更改字体？

共享图像将路径放入地址