我需要在传单中添加两个不同的标记图标。一处为世界遗产，另一处为地震遗址。地震图标的URL是：
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>在onEachFeature中，您可以使用setIcon:将图标添加到标记
onEachFeature: function (feature, layer) {
...
layer.setIcon(earthquakeicon);
...
}
图标上可以进行的另一种自定义是将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添加到图标中，以便于操作。