質問: leaflet で地図上に矢印を書きたいのですが 矢印の先端部分を緯度経度に依存しない固定ピクセルの三角形を描画したいです x1, x2, y1, y2 は緯度経度が入っていて ``` L.polyline([x1, y1], [x2, y2]).addTo(map); ``` でメインの直線を描画したあと ``` L.polyline([x2, y2], [x2 - dx + dy, y2 - dy - dx], [x2 - dx - dy, y2 - dy + dx]).addTo(map); ``` という感じで先端の三角形を書きたいので dx, dy を固定ピクセル分の長さを 緯度経度に変換して渡したいです (測地系の偏差は無視して構わないです) コメントで教えていただいた layerPointToLatLng を使うと ピクセル指定で図形描画はできたのですが 描画したズームでの座標で固定してしまうと 地図を拡大縮小すると潰れたり大きくなりすぎたりしてしまいます CircleMarker のようにズームによって再描画した時固定のピクセルで描画するには どうすればいいんでしょうか 自前の arrow_line みたいなクラスを line を継承して作って 再描画メソッドをオーバーライドして zoomlevel から座標を再計算して描画する というようなことをするしかないのでしょうか
回答: CircleMarkerのように描画したい場合は、単純にアイコン付きMarkerを使用する方法もご検討ください。 CircleMarkerと同様にマウスオーバーでマウスカーソルが変わりますが、けっこう良い感じに描画されます。 背景を透過した三角形素材:!背景を透過した三角形 ズーム前後の表示例: !ズーム前後の表示例 ``` Leaflet ``` なお`zoomlevel`から座標を再計算して描画するならば、オーバーライドよりもzoomendイベントを使って再描画する方が手軽かと思います。