Google Maps APIとの戦い ポリゴン描画編完結(多分)

2週間ぐらい前に言及したけど

そこから全く触れてなかったポリゴン描画問題

たしか、すでに頂点が描画定まってるポリゴンに対して

ポリゴンを崩さず任意の辺に新しく頂点加えられるかっていうミッション

結論からいうと、簡単にできました😘

結局PolygonクラスじゃなくてPolylineクラスを利用しました。

なぜならば有能プロパティeditableがあったから。

Polyline: editable - ポリラインの編集の有効、無効

こちらのサイトを見ていただければこの有能プロパティの動作がわかるでしょう。

ポリゴンもポリラインも、各頂点・ポイントの緯度経度セットが順々に描画されていくから

 

新しい点を赤い点の箇所に打とうものなら

こんな感じになっちゃうよっていうお話でした。

だから困ったなあ〜って思ってたんですけど。

Polylineクラスのeditableプロパティが、どういう仕組みか

新しく引き伸ばした箇所に生成された頂点を

元々あった頂点と頂点の間に入れて保持してくれるわけです。

なので、PolygonクラスとPolylineクラスを駆使して、
任意の位置に打ったポリゴンを編集可能な状態にし保存する一連の流れを作ってみました。

都合によりVue仕様です。

<script defer>

let map
let polygon
let polyline

function initMap() {
　map = new google.maps.Map(document.getElementById('map'), {
　　center: {lat: 35.6869, lng: 139.6444 },
　　zoom: 17
　})

　polygon = new google.maps.Polygon({
　　map: map
　})

　polyline = new google.maps.Polyline({
　　strokeWeight: 1
　})
}

window.onload = function() {
　const vue = new Vue({
　　data: {
　　　map: null,
　　　polygon: null,
　　　polyline: null,
　　　latLngs: [ [ ] ],　// ポリラインの各ポイントの緯度経度
　　　polygonLatLngs: [ ],　//ポリゴン用緯度経度
　　　saved: []　// ポリゴンとポリラインのセットが入る
　　},
　　el: '#app',
　　mounted() {
　　　this.map = map
　　　this.polygon = polygon
　　　this.polyline = polyline

　　　// クリックした箇所の緯度経度取得・ポリライン作成
　　　this.map.addListener('click', (e) => {
　　　　this.latLngs[0].push({
　　　　　lat: e.latLng.lat(),
　　　　　lng: e.latLng.lng()
　　　　})
　　　　this.makePolyline(this.latLngs[0])
　　　})

　　　// shift+enterでポリゴン保存発火
　　　document.addEventListener('keydown', (e) => {
　　　　const shift = event.shiftKey
　　　　const keyName = event.key
　　　　if (shift && keyName == 'Enter') {　this.makePolygon()　}
　　　})
　　},
　　methods: {
　　// ポリライン作成
　　　makePolyline(path) {
　　　　this.polyline.setOptions({
　　　　　path: path,
　　　　　map: this.map
　　　　})
　　　},
　　// ポリライン編集切り替え
　　　switchEditPolyline(boolean) {
　　　　this.polyline.setEditable(boolean)
　　　},
　　// ポリゴン作成
　　　makePolygon() {
　　　　this.polygonLatLngs.push(this.polyline.getPath())
　　　　const endPoint = this.polygonLatLngs[0].b[0]
　　　　this.polygonLatLngs[0].push(endPoint)
　　　　this.polygon.setOptions({
　　　　　fillColor: '81F7F3',
　　　　　strokeWeight: 0,
　　　　　paths: this.polygonLatLngs
　　　　})
　　　　this.switchEditPolyline(true)
　　　},
　　// ポリゴン保存
　　　savePolygon() {
　　　　const polygon = new google.maps.Polygon({
　　　　　map: map,
　　　　　fillColor: this.polygon.fillColor,
　　　　　fillOpacity: 0.8,
　　　　　strokeColor: this.polygon.fillColor,
　　　　　strokeWeight: 1,
　　　　　paths: this.polygonLatLngs
　　　　})
　　　　const polyline = new google.maps.Polyline({
　　　　　map: map,
　　　　　strokeWeight: 1,
　　　　　path: this.polygonLatLngs[0].b,
　　　　})
　　　　this.saved.push({
　　　　　polygon: polygon,
　　　　　polyline: polyline
　　　　})
　　　}

・・・省略

・ポリゴンは始点と終点が同じ緯度経度になるので、makePolygon内でendpoint作って配列に格納してます　　　

・ポリゴンのpathsとポリラインのpathややこしい

・this.polygonLatLngs[0].b[0]で緯度経度取得してますが、bって何。てかこの取得方法で合ってるのか 　　 　　 　　　　

ペーペーが書いたコードなので、修正点・改善点あると思います。 教えてくださる人いらっしゃったらとても嬉しいです。

とりあえずそろそろ寝る準備しなきゃ〜