图层更改时更改折线和标记图标的颜色？答案

【问题标题】：changing the color of polylines and marker icon's when the layer changes?图层更改时更改折线和标记图标的颜色？
【发布时间】：2021-01-31 19:23:51
【问题描述】：

假设我是一条紫色折线，并且在一个图层上使用紫色图标作为标记，但想在另一图层上使用橙色折线和橙色标记图标。我该怎么做？有 onlayerchange 事件吗？但即使有我怎么能改变所有标记的所有图标？或者，也许我可以删除所有标记然后替换它们，尽管使用不同的图标，但我不知道如何删除标记，整体或其他方式。

有什么想法吗？

【问题讨论】：

标签： leaflet

【解决方案1】：

我不确定我是否理解正确，但这是你可以做的。

如果您想在多段线标记之间切换并分配不同的颜色，您可以使用plugin 并通过传递颜色返回图标标记。

 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/leaflet@1.6/dist/images/marker-shadow.png"
 });

然后你有 latlngs 并为标记分配一个具有首选颜色的图标

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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/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/leaflet@1.6/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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/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/leaflet@1.6/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>

【讨论】：