leaflet - L.circleMarker 传单

Question

如何用 L.circleMarker 中的图标替换圆圈

var style_station = {
    radius: 12,
    stroke:false,
    weight: 1,
    opacity: 1,
    fillOpacity: 1,
    // color: '#00ABDC',
};

$.getJSON("url", function(stationexits){ exitlayer = L.geoJson(stationexits, { onEachFeature: onEachStation, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, style_station); } });

Answer 1

您必须返回一个L.Marker

只有这样，您才能设置自己的图标。

Answer 2

我不想使用 L.Marker，因为 L.circleMarker 比 L.marker 有自己的优势

我在下面做了，它对我有用

1）创建了一个像

<svg>
  <defs>
   <pattern id="bustop_icon" x="0" y="0" width="18" height="18">
    <image xlink:href="img/images/bus-icon.png" x="3" y="5" width="18" height="20" />
    </pattern>
   </defs>
</svg>

2）在样式中设置className

    var style_busstops = {
        radius: 12,
        stroke:false,
        weight: 1,
        opacity: 1,
        fillOpacity: 1,
        className : 'bus_stops'
    };

L.geoJson(busstops, {
            pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, style_busstops);
         }
});

3) 在 bus_stops 类中添加 'fill' css

.bus_stops { 
   fill: url(#bustop_icon);
}