
【SwiftUI】 MapKitでGeoJSONを扱う
UIKitの場合
UIKit での手順は下記記事に示した通り:
流れだけ再掲しておくと、
`MKGeoJSONDecoder` でデコード
`MKGeoJSONObject` のパース
`MKGeoJSONFeature` の `properties` をデコード
`MKGeoJSONFeature` の `geometry` を `MKPolyline` で描画
となる。
MapKit での GeoJSON の取り扱いについては下記のZenn記事(つまり全部読める)でも触れています:
iOSでインドアマップ(屋内の地図)を表示する
SwiftUIの場合
SwiftUIの場合はだいぶ実装方法が変わってくる。まずそもそも、ポリゴンやラインの描画方法が全然違う。
UIKitの場合は
`MKOverlay` を `addOverlay` する
描画時に呼ばれる `MKMapViewDelegate` のメソッドで `MKOverlayRenderer` を返す
という流れだったのが、@resultBuilder ベースで作られている @MapContentBuilder (iOS 17〜)とデータバインディングにより、次のようにシンプルに書ける:
Map() {
MapPolygon(coordinates: CLLocationCoordinate2D.tokyoStationArea)
.foregroundStyle(.blue)
}
Map() {
MapPolyline(routePolyline)
.stroke(.blue, lineWidth: 8)
}
で、このように変わったSwiftUI の Map に、GeoJSONで定義されているポリゴンやラインをどう描画するか。
ポイントは、2024年9月現在(ちょうどiOS 18が正式リリースされたばかり)、MKGeoJSONDecoder, MKGeoJSONFeature のSwiftUI版がまだない、ということ。
なので MKGeoJSONDecoder, MKGeoJSONFeature を使うしかないのだが、
for geometry in feature.geometry {
guard let polyline = geometry as? MKPolyline else {
...
}
// SwiftUIの場合、ここからどうする?
}
ここから先は
¥ 300
最後まで読んでいただきありがとうございます!もし参考になる部分があれば、スキを押していただけると励みになります。 Twitterもフォローしていただけたら嬉しいです。 https://twitter.com/shu223/