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.circleMarkerにはL.markerよりも独自の利点があるため、L.Markerを使用したくありません

私は以下を行い、それは私のために働いています

1）次のようなSVGパターンを作成しました

<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);
}