Googlemapにポリゴン描画 その1

今やってること

Google Maps APIを使って、任意のポリゴンを描画しようとしてます。

クリックしたところの座標取得＆マークして、それらマーク地点を結び合わせるとポリゴンできちゃうよ的な。

イメージはこんな感じ。

 

やりたいこと

この座標取得→描画まではできているけど、問題はその先にあり。

完成したポリゴンの微修正をどう行おうかということです。

やっぱオレンジ線みたいなポリゴンにしたいなって思った場合、

最初から描画するもいいかもしれないけれど、本当に微修正だったら既存のムラサキ線ポリゴンをちょちょっと動かしてなんとかできたら楽ですよね。

要は新たに頂点を増やせば達成できるかなーって思ってるんですけど。

 

試すつもりのこと

まだ調べてないからできるかどうかわからないけど、

1. ポリゴンの任意の辺に座標マーク(= ★)
2. ★がある任意の辺の頂点座標取得
3. 頂点座標が座標配列のどこにあるかサーチ
4. 頂点座標Aと頂点座標Bの間に★をセット
5. ポリゴン外の新たに頂点増やしたい箇所に座標マーク(= ☆)
6. ★の座標を☆の座標に変更

こんな流れでできないかなーみたいな。

ん？素直に頂点増やしたい箇所に座標マークすればいいのでは？って思うかもしれません。私も最初そう思ってました。

でもそれだと意図しないポリゴンになっちゃうんですよね。

なんでかっていうと、google.maps.Polygonはあくまでセットされた座標の順番でしかポリゴンを象らないというか。

ピンクの点を新たにマークしたとして、

この座標は配列の一番後ろにセットされるので、6番目に線が繋がれることになります。

多分こんな感じになる。

まあ私のやり方でできないだけであって、他のやり方によってはできるのかもしれない。

ちなみに今の実装具合

今大体こんな感じに実装しています。 

map.addListener((e) => {

1. クリックした地点の中心地取得
2. クリックした地点の座標取得
3. 取得した座標を配列に収める
4. new google.maps.Polygonに中心地と座標入れた配列セット → 描画

})

(スマホから入力してるのと、コードうろ覚えだから詳細は諦めた。今度編集する)

試すつもりのこと で前述していた座標配列は、3. のことです。

 実行したイメージは、

一点→二線→三角形→四角形→・・・

とポリゴンが変化していく感じ。 

クリックごとに座標が蓄積される配列をまるっとポリゴンにセットしてるので、上記のような感じになります。

もしかしたらポリゴンじゃなくて、google.maps.Polylineでポリラインの方がいいかもしれない。

とにかく試したらまた書こうと思います。

ここからどうでもいいこと

日々、とてもビシビシに、バシバシに教えてもらってるおかげで色々とちょっとはましになってるけど

本当に活かしきれてるのかなー、、笑

いつも大丈夫かなってちょっと心配な気持ちを持ちながら仕事してるけど、じゃあ一体何に対して心配してるのかって言われたら、これで合ってるのかなっていう正解がわからない不安。

あ、でもタスクによるか。最近はちょっと自信ついてきたかもしれない。