自定义传单图标答案

【问题标题】：Customizing Leaflet Icon自定义传单图标
【发布时间】：2022-03-09 19:58:40
【问题描述】：

我需要在传单中添加 2 个不同的标记图标。一个是世界遗产，另一个是地震。地震图标的网址是：

var earthquakeicon = L.icon({
    iconUrl: 'https://previews.123rf.com/images/baihya/baihya1205/baihya120500039/13782110-terremoto-del-s%C3%ADmbolo-de-advertencia.jpg',
    iconSize: [20, 20]
    });

世界遗产的网址是：

var heritageicon = L.icon({
    iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Unesco_World_Heritage_logo_notext_transparent.svg/1200px-Unesco_World_Heritage_logo_notext_transparent.svg.png',
    iconSize: [20, 20]
    });

能否请一些人帮助我从上面的 URL 为给定的传单地图自定义传单图标。我实际工作的传单代码如下：-

<html>
<head>
  <title>Creating mash-ups with Leaflet</title>
  <meta charset="utf-8" />
  <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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://auth.airmap.com/js/keycloak.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    #map {
      width: 800px;
      height: 600px;
    }
  </style>
  <head>
    <body>
      <div id="map"></div>
      <script>
        var map = L.map('map').setView([14.6361111, 42.1608333], 8);
        var wmsLayer = L.tileLayer.wms('https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?', {
          layers: 'GEBCO_LATEST_SUB_ICE_TOPO'
        }).addTo(map);

        var elevation;
        $.getJSON('https://demo.pygeoapi.io/master/collections/ogr_gpkg_poi/items?f=json', function(value) {
          var datalayer = L.geoJson(value, {
            onEachFeature: function(feature, featureLayer) {
              var lon = feature.geometry.coordinates[0];
              var lat = feature.geometry.coordinates[1];
              var city = feature.properties.name;

              $.ajax({
                url: 'https://api.airmap.com/elevation/v1/ele/?points=' + lat + ',' + lon +
                  '&units=metric& appid=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVkZW50aWFsX2lkIjoiY3JlZGVudGlhbHxwQUFNWlBxaEx2T2Q2cGZSR2JkMlhDQkdRcTdNIiwiYXBwbGljYXRpb25faWQiOiJhcHBsaWNhdGlvbnx3ZURHZ01oTldtek55c1A4S0xEdlRsQW5QTE0iLCJvcmdhbml6YXRpb25faWQiOiJkZXZlbG9wZXJ8MnpvYmI3eWh4ZVk0cWtDM1BSeDBaSEtNejIzOCIsImlhdCI6MTQ3MTM3OTc0Mn0.MeO0jt6holPt0jdPJvRJrTBi380WsbOPGCEO6u-tfSo',
                async: false,
                dataType: 'json',
                success: function(json) {
                  elevation = json.data;
                }
              });
              featureLayer.bindPopup("City: " + city + "</br>Elevation: " + elevation + "metres");
            }
          }).addTo(map);
        });

var wfs_url = "https://emidius.mi.ingv.it/services/italy/wfs/?service=wfs&version=2.0.0&request=GetFeature&typeNames=italy:CPTI_current&outputFormat=application/json&CQL_FILTER=dwithin(geom, MULTIPOINT((41.701259 -7.5005), (40.655991 -7.917709), (40.200475 -8.419193),(40.198381 -7.639009),(40.087058 -8.290237),(39.369447 -9.391943),(38.443198 -9.100006),(38.448289 -9.130834),(32.748972 -16.697671)), 1450, kilometers)";
 $.getJSON(wfs_url).then((res) => {
  var layer = L.geoJson(res, {
    onEachFeature: function (feature, layer) {
      var popupTxt = 'Epicentral area: ' + feature.properties.EpicentralArea + '<br>' +
                     'Year: ' + feature.properties.Year +  '<br>' +
                     'Magnitude: ' + feature.properties.MwDef
      layer.bindPopup(popupTxt);
    }      
  }).addTo(map);
  map.fitBounds(layer.getBounds());
});
      </script>
    </body>
</html>

【问题讨论】：

标签： java html leaflet icons marker

【解决方案1】：

在onEachFeature 中，您可以使用setIcon 将图标添加到标记：

 onEachFeature: function (feature, layer) {
...
layer.setIcon(earthquakeicon);
...
}

【讨论】：

【解决方案2】：

另一种可以对图标进行自定义的方式是向图标添加 popupAnchor 和 tooltipAnchor。很明显他们会做什么。一个将在单击时触发，而另一个将在鼠标悬停时出现。这是一些代码：

var regular_Icon = L.icon({
iconUrl:  'icons/marker-icon.png',
shadowUrl: 'icons/marker-shadow.png',
iconSize: [25,41],
shadowSize: [41,41],
iconAnchor: [13,39],
shadowAnchor: [13,41],
popupAnchor: [0,-50],
tooltipAnchor: [-40,20]
});

另一个非常有用的功能是您可以将 className 添加到图标中，以便于操作。

【讨论】：