マーカーの色を変更するリーフレット
ネイティブのリーフレットでマーカーの色をランダムに変更する方法はありますか？スタイルを設定できるsvg要素を使用しています。 mapbox.jsでそれが可能であることを知っています
編集：私がやろうとしていることを明確にするために：ダブルクリックなどでマップにマーカーを追加する場合、ランダムな色にする必要があります。これを実現するために、マーカーにsvgアイコンを使用してスタイルを設定しました。
これは私のコードです：
myIcon = L.icon({
iconUrl: "icon_33997.svg",
iconAnchor: pinAnchor
});
newMarker = L.marker(lat, long], {
icon: myIcon
});
だから、これはリーフレットアイコンをスタイリングするためのGoogleのトップヒットの1つですが、サードパーティなしで機能するソリューションはなく、Reactでこの問題が発生していました。ルートとアイコン。
私が思いついた解決策は、 Leaflet.DivIconhtml 属性を使用することでした。これにより、DOM要素に評価される文字列を渡すことができます。
たとえば、次のようにマーカースタイルを作成しました。
const myCustomColour = '#583470'
const markerHtmlStyles = `
background-color: ${myCustomColour};
width: 3rem;
height: 3rem;
display: block;
left: -1.5rem;
top: -1.5rem;
position: relative;
border-radius: 3rem 3rem 0;
transform: rotate(45deg);
border: 1px solid #FFFFFF`
const icon = Leaflet.divIcon({
className: "my-custom-pin",
iconAnchor: [0, 24],
labelAnchor: [-6, 0],
popupAnchor: [0, -36],
html: `<span style="${markerHtmlStyles}" />`
})
markerHtmlStylesのbackground-colorをカスタムカラーに変更すると、準備完了です。
リーフレットマーカーは、他のオブジェクト（ポリラインなど）とは異なり、ファイルとして保存されます
独自のマーカーが必要な場合は、 公式リーフレットチュートリアル を参照してください。
編集：
主な開発者と this conversation を読んだ後、マーカーSVGと here is を検索しました。
これにより、マーカーを好きなように色付けして、ランダムに色を設定できるはずです。
もう一度編集：
MakiMarkers を使用してマーカーの色を設定し、この拡張機能を使用してランダムなものを作成できます。 （シンプルでわかりやすく説明されています）
Svg要素を使用しているので、 L.icon のiconUrlを使用してリンクする代わりに L.divIcon のhtmlプロパティでリーフレットマーカーのアイコンをフィードできます。あなたの画像。
L.marker(latlng, {
icon: L.divIcon({
className: 'ship-div-icon',
html: '<svg>...</svg>'
})
}).addTo(map);
次に、CSS fill プロパティを使用して、svg形状に色を付けます。クラス\ esをsvgのパスに追加して正確に制御すると便利な場合があります
<svg ... >
<g>
<path class="ship-icon" ... />
</g>
...
</svg>
最後に、マーカーの色をランダムに変更する必要もあったため、マーカーの作成時にパスの塗りつぶしプロパティを直接変更しました
var pathFillColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
L.marker(latlng, {
icon: L.divIcon({
className: 'ship-div-icon',
html: '<svg ... ><g><path fill="'+pathFillColor+'" ... /> </g></svg>'
})
}).addTo(map);
Leaflet.awesome-markers libを試してください。色やその他のスタイルを設定できます。
Ahhイベントリスナーを使用して、setIcon（）メソッドでアイコンを変更します。
createdMarker.on("dblclick", function(evt) {
var myIcon = L.icon({
iconUrl: 'res/marker-icon-red.png',
shadowUrl: 'res/marker-shadow.png'
});
this.setIcon(myIcon);
});
これがアイコンのSVGです。
<svg width="28" height="41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="b">
<stop stop-color="#2e6c97" offset="0"/>
<stop stop-color="#3883b7" offset="1"/>
</linearGradient>
<linearGradient id="a">
<stop stop-color="#126fc6" offset="0"/>
<stop stop-color="#4c9cd1" offset="1"/>
</linearGradient>
<linearGradient y2="-0.004651" x2="0.498125" y1="0.971494" x1="0.498125" id="c" xlink:href="#a"/>
<linearGradient y2="-0.004651" x2="0.415917" y1="0.490437" x1="0.415917" id="d" xlink:href="#b"/>
</defs>
<g>
<title>Layer 1</title>
<rect id="svg_1" fill="#fff" width="12.625" height="14.5" x="411.279" y="508.575"/>
<path stroke="url(#d)" id="svg_2" stroke-linecap="round" stroke-width="1.1" fill="url(#c)" d="m14.095833,1.55c-6.846875,0 -12.545833,5.691 -12.545833,11.866c0,2.778 1.629167,6.308 2.80625,8.746l9.69375,17.872l9.647916,-17.872c1.177083,-2.438 2.852083,-5.791 2.852083,-8.746c0,-6.175 -5.607291,-11.866 -12.454166,-11.866zm0,7.155c2.691667,0.017 4.873958,2.122 4.873958,4.71s-2.182292,4.663 -4.873958,4.679c-2.691667,-0.017 -4.873958,-2.09 -4.873958,-4.679c0,-2.588 2.182292,-4.693 4.873958,-4.71z"/>
<path id="svg_3" fill="none" stroke-opacity="0.122" stroke-linecap="round" stroke-width="1.1" stroke="#fff" d="m347.488007,453.719c-5.944,0 -10.938,5.219 -10.938,10.75c0,2.359 1.443,5.832 2.563,8.25l0.031,0.031l8.313,15.969l8.25,-15.969l0.031,-0.031c1.135,-2.448 2.625,-5.706 2.625,-8.25c0,-5.538 -4.931,-10.75 -10.875,-10.75zm0,4.969c3.168,0.021 5.781,2.601 5.781,5.781c0,3.18 -2.613,5.761 -5.781,5.781c-3.168,-0.02 -5.75,-2.61 -5.75,-5.781c0,-3.172 2.582,-5.761 5.75,-5.781z"/>
</g>
</svg>
Google Charts APIを使用してアイコンを取得することもできます（ 'abcdef'を希望する16進数の色に変更するだけです：
例：
- 色 '#abcdef'：
- 色 '＃e85141'：
- 色 '＃2ecc71'：
SVGマーカー/アイコン が最適なものであることがわかりました。非常に柔軟で、好きな色を使用できます。面倒なことなくアイコン全体をカスタマイズできます。
function createIcon(markerColor) {
/* ...Code ommitted ... */
return new L.DivIcon.SVGIcon({
color: markerColor,
iconSize: [15,30],
circleRatio: 0.35
});
}
Rで、addAwesomeMarkers（）関数を使用します。赤いマーカーを生成するサンプルコード：
leaflet() %>%
addTiles() %>%
addAwesomeMarkers(lng = -77.03654, lat = 38.8973, icon = awesomeIcons(icon = 'ion-ionic', library = 'ion', markerColor = 'red'))
イオンアイコンのリンク： http://ionicons.com/
色（またはその他の特性）を指定すると、目的のアイコンのSVG表現を返す関数を作成します。次に、マーカーを作成するときに、適切なパラメーターを使用してこの関数を参照します。
@tuttsの優れた答えに追加して、私はこれをこれに変更しました：
... キャプションを含む-FontAwesomeアイコンなどを使用できる...
var myCustomColour = '#334455d0', // d0 -> alpha value
lat = 5.5,
lon = 5.5;
var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
size = 10, // size of the marker
border = 2; // border thickness
var markerHtmlStyles = ' \
background-color: ' + myCustomColour + '; \
width: '+ (size * 3) +'px; \
height: '+ (size * 3) +'px; \
display: block; \
left: '+ (size * -1.5) +'px; \
top: '+ (size * -1.5) +'px; \
position: relative; \
border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
transform: rotate(45deg); \
border: '+border+'px solid #FFFFFF;\
';
var captionStyles = '\
transform: rotate(-45deg); \
display:block; \
width: '+ (size * 3) +'px; \
text-align: center; \
line-height: '+ (size * 3) +'px; \
';
var icon = L.divIcon({
className: "color-pin-" + myCustomColour.replace('#', ''),
// on another project this is needed: [0, size*2 + border/2]
iconAnchor: [border, size*2 + border*2],
labelAnchor: [-(size/2), 0],
popupAnchor: [0, -(size*3 + border)],
html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});
var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);
eS6バージョン（@tuttsなど）.. vue-leafletで使用しています
// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
let myCustomColour = color + 'd0';
let size = 10, // size of the marker
border = 2; // border thickness
let markerHtmlStyles = `
background-color: ${myCustomColour};
width: ${size * 3}px;
height: ${size * 3}px;
display: block;
left: ${size * -1.5}px;
top: ${size * -1.5}px;
position: relative;
border-radius: ${size * 3}px ${size * 3}px 0;
transform: rotate(45deg);
border: ${border}px solid #FFFFFF;
`;
let captionStyles = `
transform: rotate(-45deg);
display:block;
width: ${size * 3}px;
text-align: center;
line-height: ${size * 3}px;
`;
let icon = L.divIcon({
className: 'color-pin-' + myCustomColour.replace('#', ''),
iconAnchor: [border, size*2 + border*2],
labelAnchor: [-(size/2), 0],
popupAnchor: [0, -(size*3 + border)],
html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
});
return icon;
}
var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);