1

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 から座標を再計算して描画する
というようなことをするしかないのでしょうか

4
  • 1
    layerPointToLatLngではダメでしょうか?
    – payaneco
    Commented 2020年4月3日 4:40
  • できました! ありがとうございます
    – user35303
    Commented 2020年4月3日 5:08
  • 最初にやりたかったことはできたのですが、その後拡大縮小したときに問題があるので質問は継続させていただきます
    – user35303
    Commented 2020年4月3日 6:01
  • 当初の疑問が解決したのであれば、些細な内容でも構わないので回答として投稿することを検討してください。新たに湧いた疑問については別質問に分けるべきです。
    – cubick
    Commented 2020年4月3日 13:27

1 件の回答 1

1

CircleMarkerのように描画したい場合は、単純にアイコン付きMarkerを使用する方法もご検討ください。
CircleMarkerと同様にマウスオーバーでマウスカーソルが変わりますが、けっこう良い感じに描画されます。
背景を透過した三角形素材:背景を透過した三角形
ズーム前後の表示例:
ズーム前後の表示例

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- このコードはオフライン作業では動きません -->
  <title>Leaflet</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
</body>
<script>

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([35.68, 139.77], 12);
// 無意味なサンプル直線
var my_line = L.polyline([[35.68, 139.77], [34.7, 135.5]], {color: 'red'}).addTo(map);
// 三角形のアイコン iconSizeはpngのサイズ、 iconAnchorで三角形の先端を直線の末尾に合わせる
var my_icon = L.icon({iconUrl: 'triangle.png', iconSize: [36, 32], iconAnchor: [16, 0] });
// 三角形を描画するだけのマーカー
var my_marker = L.marker([35.68, 139.77], {icon: my_icon}).addTo(map);

</script>
</html>

なおzoomlevelから座標を再計算して描画するならば、オーバーライドよりもzoomendイベントを使って再描画する方が手軽かと思います。

1
  • 試してみたんですが、矢印を書きたいので三角形の向きを動的に回転させないので、結局じぶんで描画はしないといけないみたいです
    – user35303
    Commented 2020年5月14日 9:23

この質問に回答するには、ログインする必要があります。