みなさんこんにちは。
さて、あいさつもくそもなく、いきなり本題に入りますね。
なぜ回転させる必要があったか
これも私の開発している、アメダス天気Viewerという(ウェザ◯ニュ◯スのパクリみたいな)アプリで、観測点の風向風速を表現するときにどうしても風向きアイコンを回転させる必要があったからです。
↓これ
どうするか。
さて、こうなれば、Leaflet愛好家の愛読書。
Leaflet公式のDocsを見てみます。
そして、試しに「rotat」(rotateやrotationなどもヒットさせるため)で検索をかけてみますが…。
なにこれ。0件。
つまり、バニラのLeafletではアイコンを回転させることはできません。
CSSで回転させる？
実はLeafletのアイコン、CSSで見た目を変更することもできます。
よって、CSSのrotate()で回転させてやれば、回転させられるのですが、まあめんどくさいっすよね。
ライブラリがあった！
実はこんなライブラリがあるんです。
Leaflet Rotated Marker。
使い方はまじで簡単。
L.marker([48.8631169, 2.3708919], {rotationAngle: 45}).addTo(map);
これだけです。
iconとか書いてあるところにぶち込むだけです。
なんて簡単なのかしら。
使用例
var icon = L.icon({iconUrl: 'source/wind'+getNum_wind(tempJson[element[0]][param_mapDraw][0])+'.png',iconSize: [30, 30], iconAnchor: [15, 15]});
eval("circle"+element[0]+" = L.marker(amedas_latlng, {rotationAngle: tempJson[element[0]]['windDirection'][0] * 22.5, pane: \"amedas\", icon: icon});");
使ってますよね。rotationAngle:。
tempJson[element[0]]['windDirection'][0]は風の向きを
{0:"静穏",1:"北北東",2:"北東",3:"東北東",4:"東",5:"東南東",6:"南東",7:"南南東"…
で表してくれているので、単純に22.5°をかけるだけでいけました。
以上です。
まとめ
①
HTMLのヘッダー部分に
<script src="https://cdn.jsdelivr.net/npm/leaflet-rotatedmarker"></script>
をぶちこむ。
②
マーカーのオプション(L.marker(LatLng, {ここ！})に
L.marker(LatLng, {rotationAngle: 45});
といれるだけ！
あら簡単。アイコンが回転しているではありませんか！
デモ
デモというか、最初とか使用例とかで紹介したやつですけど、
の下の機能切り替えから「風向風速」を選んでいただくと実際に動作しているものが見られます。