Leaflet内で描画した多角形内にマーカーが位置するかどうかの判定

Question

Leaflet上に描画した多角形内にしかマーカーを配置できないようにするには、
どうすればよいでしょうか？

使い方の想定としては以下の通りです。

1. HTMLの画面においてLeafletで地図を表示する
2. その地図上に多角形を動的に描画する
3. マーカーを動的に配置するが、そのとき多角形内か多角形外を判定し、

多角形外であればマーカーを配置できないようにする

四角形や正多角形であればなんとか判定できそうですが、
星形や王冠型、稲妻型など複雑な方法だと判定が難しいのではと苦慮しております。
Leafletに限らず、判定のアリゴリズムを教えて頂く形でも構いません。

多角形の描画、マーカーの配置は以下のサイトのイメージです。
http://bl.ocks.org/TetsuyaKimotsuki/0156c511e3217edf58beb206633308f8

よろしくお願いします。
以上です。

Answer 1

多角形内にしかマーカーを配置できないようにするには

マーカーの追加を多角形のクリックイベントで行うようにすれば多角形内のみに制限できると思います。

【#polygon | Documentation - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/reference-1.6.0.html#polygon

【Quick Start Guide - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/examples/quick-start/

Comments

[spike0726]

多角形のクリックイベントが拾えるのですね。
ありがとうございます、大変助かりました！