Android GoogleMaps Polygon.hole を使うときは開ける穴同士を被せてはならない

こんにちは、Luup Androidチームの土谷です。

弊社のアプリでは、Maps SDK for Android を触ることが多いのですが、開発をしていて辛く感じることが多々あります。
今回はその中の1つ、GoogleMaps Polygon.holeの仕様ついてご紹介したいと思います。

事前準備

今回使うライブラリーです。

• android-maps-compose

GoogleMaps を追加して、グレーのポリゴンで地図を塗り潰す

まずはマップを描画して、描画したマップの全体をグレーで塗り潰してみます。

class MapActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                val cameraPositionState = rememberCameraPositionState {
                    position = CameraPosition.fromLatLngZoom(LatLng(43.06050568387817, 141.35374551567804), 11f)
                }
                GoogleMap(
                    cameraPositionState = cameraPositionState,
                ) {
                    Polygon(
                        points = listOf(
                            LatLng(85.0, 90.0),
                            LatLng(85.0, 0.1),
                            LatLng(85.0, -90.0),
                            LatLng(85.0, -179.9),
                            LatLng(0.0, -179.9),
                            LatLng(-85.0, -179.9),
                            LatLng(-85.0, -90.0),
                            LatLng(-85.0, 0.1),
                            LatLng(-85.0, 90.0),
                            LatLng(-85.0, 179.9),
                            LatLng(0.0, 179.9),
                            LatLng(85.0, 179.9),
                        ),
                        fillColor = Color(0xCC787880),
                        strokeWidth = 0.0f,
                    )
                }
            }
        }
    }
}

簡単ですね。
地図全体がグレーで塗りつぶされた状態になったかと思います。

Polygon.holes を追加してみる

次は、Polygon.holesを設定し、三角形の穴を開けてみます。

Polygon(
    /... 省略
    holes = listOf(
        listOf( // 1
            LatLng(43.10086924222251, 141.35290903949243),
            LatLng(43.04444342582366, 141.4118953480885),
            LatLng(43.05060149394299, 141.30656265416695),
        )
    ),
)

重なった穴を追加する

先ほど追加した三角形と一部被せる感じで新しい三角形の穴を追加します。

Polygon(
    /... 省略
    holes = listOf(
        listOf( // 1
            LatLng(43.10086924222251, 141.35290903949243),
            LatLng(43.04444342582366, 141.4118953480885),
            LatLng(43.05060149394299, 141.30656265416695),
        )
        listOf( // 2
            LatLng(43.06035050410283, 141.31990479539704),
            LatLng(43.038284739487004, 141.33324693662706),
            LatLng(43.049062034871525, 141.28690055130158),
        )
    ),
)

なんと全体を塗り潰したはずのグレーのポリゴンが消えてしまいました。

ちなみに1の三角形をコメントアウトすると、2の穴が正常に開いていることが分かります。

開ける穴さえ被っていなければ、複数の穴を開けることができる

2をコメントアウトして、1の穴に被らないように3を追加してみます。

Polygon(
    /... 省略
    holes = listOf(
        listOf( // 1
            LatLng(43.10086924222251, 141.35290903949243),
            LatLng(43.04444342582366, 141.4118953480885),
            LatLng(43.05060149394299, 141.30656265416695),
        ),
//        listOf( // 2
//            LatLng(43.06035050410283, 141.31990479539704),
//            LatLng(43.038284739487004, 141.33324693662706),
//            LatLng(43.049062034871525, 141.28690055130158),
//        ),
        listOf( // 3
            LatLng(43.00238446631994, 141.2436545014675),
            LatLng(42.9702377415783, 141.35145783633504),
            LatLng(42.95868090611878, 141.21344210188678),
        ),
    ),
)

2つ目の穴も正常に開けることができました。

まとめ

運用を誤ると、予期せぬタイミングで塗り潰しが消えてしまうので、GoogleMaps Polygon.holeを使わないというのも手かと思います。
iOSだと意識しなくてよい部分がなぜかAndroidだと上手くいかないケースが他にもあるので、次の機会にご紹介したいと思います。