SwiftUIでカスタム地図を表示する（その１）

 観光地図やらクライムマップやらもっと便利に表示したいなと。

（予備知識）

 SwiftUIでiOSアプリを書くには

SwiftUIになって大きく変わったところがGUIの作り方。従来はstoryboardを使ってGUI部品を配置し、そのGUIを制御するUIViewをゴリゴリ書く感じでしたが、SwiftUIになって、GUI部品にレイアウトやら制御やらをまとめた感じ。

 SwiftUIで地図を表示するには

SwiftUIにはWKWebViewに相当するViewがないので、UIKitのWKWebViewをSwiftUI用にラップして使用する必要があります。これにはUIViewRepresentableプロトコルを使います。詳しくは公式チュートリアルのとおり。

@k_awoki, "UIViewRepresentableを使ってSwiftUIでちょっとリッチなWebviewを表示してみる", Qiita

@m37335, "【SwiftUI】Mapkitを使った位置情報の取得とピンの表示",Qiita


 MapKitの基本

前述のようにMapKitはUIKitで、地図上にGUI部品を載せることができる。地図上の地点に関するGUI部品のアノテーション、画像や図形のGUI部品のオーバレイが用意されている。ここでややこしいことに、GUI部品のオブジェクトと、GUI部品を表示する部品を別々に用意してやらないといけない。

タイルデータを表示するには

カスタムタイルをmapViewにオーバレイする。それには、
(1) タイルオーバーレイを供給するオブジェクトを登録する。
具体的には、MKTileOverlay()を用いて、地図に重ねるタイルデータ供給オブジェクトをつくり、mapViewオブジェクトにセットする。
(2) タイルオーバーレイをレンダリングするオブジェクトをmapViewオブジェクトにセットする。
具体的には 、mapViewのdelegateオブジェクトに、mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRendererのメソッド を定義する。
すると、mapViewを操作したとき、 タイルデータ供給オブジェクトを用いてタイルデータをダウンロードし、画面の表示範囲にそのタイルデータが含まれたときに、オーバーレイレンダラーが呼び出され、タイルが表示されるようになる。

@imk2o,"MapKitで国土地理院のタイルデータを表示する",qiita
PUNIO,"Xamarin.iOSで地図にTileを追加したりしてみる",プログラムの事とか,Hatena Blog

(実際)

MapKitで作った地図GUIを

import SwiftUI
import MapKit

struct UICustomMapView: UIViewRepresentable {
    
    var coordinate:CLLocationCoordinate2D
    var coordinator:Coordinator?
    let mapView=MKMapView()
	// 地理院地図のタイルをセットする
    //var tileOverlay = MKTileOverlay(urlTemplate: "https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png")
	// open street mapのタイルをセットする
    var tileOverlay = MKTileOverlay(urlTemplate: "http://tile.openstreetmap.org/{z}/{x}/{y}.png")
    func makeUIView(context: Context) -> MKMapView {
        //MKMapView(frame: .zero)
        mapView.delegate=context.coordinator
        mapView.addOverlay(tileOverlay, level: .aboveLabels)
        let span = MKCoordinateSpan(latitudeDelta: 1.0/2, longitudeDelta: 1.0/2)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        mapView.setRegion(region, animated: true)

        return mapView
    }
    func updateUIView(_ uiView: MKMapView, context: Context) {
    }
    func makeCoordinator() -> Coordinator {
        return Coordinator(self)
    }


    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: UICustomMapView
        init(_ parent: UICustomMapView) {
            self.parent = parent
            super.init()
            self.parent.coordinator = self
            //デフォルトタイルを置き換える
            parent.tileOverlay.canReplaceMapContent = true
        }
        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            return MKTileOverlayRenderer(overlay: overlay)
        }
    }
}

struct UICustomMapView_Previews: PreviewProvider {
    static var previews: some View {
        UICustomMapView(coordinate: CLLocationCoordinate2D( latitude: 35.658807,longitude: 139.745486))
    }
}

今回はこんなところで。

コメント

コメントを投稿

このブログの人気の投稿

SwiftUIでカスタム地図を表示する（その２）

イメージ
 その１ではカスタムタイルを表示しました。今度は手元で生成した情報を重ねてみます。 前回（その１） （予備知識） SwiftでPNG画像を作成する //カンバスを作る UIGraphicsBeginImageContext ( CGSize )  let context = UIGraphicsGetCurrentContext () //お絵描きをする（ぬりつぶす） context. setFillColor (fill) context. fill ( CGRect (x: 0 , y: 0 , width: 256 ,height: 256 )) //イメージオブジェクトに変換する         let tileImage = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () //PNGに変換する tileImage?. pngData () @Ushio, "UIGraphicsBeginImageContextの無駄",Qiita SwiftでのErrorの返し方 SwiftならErrorをEnumで定義すると明確なうえ、NSErrorにもそれらしくCASTされるようだ。 中安佑一,"[Swift] Swiftのエラー処理についてざっくりとまとめてみた", DevelopersIO, Classmethod reo0612, "swiftのErrorとNSErrorの違いがよく分からないので自分なりにまとめてみた", Qiita カスタムTileOverlayを作る PUNIO, "Xamarin.iOSで地図にTileを追加したりしてみる", プログラムの事とか,Hatena Blog （実際） PUNIOさんのコードをSwiftUIに移植しただけですが import UIKit import MapKit class CustomTileOverlay : MKTileOverlay { enum TileError:Error{ case getCurrentContext } override func load...
続きを読む

カーメン君のガーデンチャンネル「萌木の村」

 カーメン君のガーデンチャンネル、カーメン君いいですね。 テンガロンハットのカーメン君が、季節季節の園芸の楽しさを伝えてくれるYoutubeのチャンネル。ほんと園芸の知識が豊富で話題が豊富、苗の選び方から肥料や農薬・剪定などわかりやすくて、ずぼらな自分でもついついやってみようかなと思ってしまう。 今日、清里の「萌木の村」特集を見て衝撃を受けました。ポール・スミザーのガーデニングの哲学と技術、反発しながらも受け入れて育ててきた謙虚な村長さんによる無農薬・無肥料の庭を紹介していました。 【嘘か本当か】園芸超人が聖地「萌木の村」を検証します 清里といえばコテコテのペンション建築とアイスクリームやジャムと清泉寮という中学女子的イメージの観光地。特に萌木の村といえば、オルゴール博物館やらドール、ガラス細工、ジャム、ミルク製品など、コテコテの高原観光施設を集めたロードサイドのドライブインと思っていました。 ガーデン散策の途中ででてきた”スーパーマンのTシャツをきた田舎のおじさん”。めちゃダサい田舎親父、萌木の村の村長さんだとか。容姿や振る舞いがまるっきり田舎の土建屋の社長でないかい。萌木の村って、オルゴールやら何やらキラキラした観光施設やっているから、成金趣味の変なスーツ着たオジサンがでてくるかと思いきや、真逆すぎてびっくり、嫌いじゃないタイプかも。 この村長さん、スミザーさんに庭造りを任せたところ、それまでの自分たちの常識がことごとく否定され、反発しまくったとか。結局ねばり負けして、スミザーさん監修のこの庭ができたとか。面白おかしく話をしていますが、よき理解者となったようです。なんだかんだ自慢のガーデンなんだなぁ。 スミザーさんに庭づくりをまかせるまでの、萌木の村の歴史がよかった。 ５０年喫茶店からはじめてホテルを作った、デザインも統一してある程度のレベルで綺麗なものができた。それで環境づくりをとなったところで、なかなかうまくいかない。１０年前スミザーさんに出会い「こんな庭をつくれば未来にもつづく本物の庭ができるよ」といわれてまかせた。これまでの常識とまったく異なるやりかたに反発しながらも続けてきた。10年たって「やってよかった」というものができた。 このビデオで最も印象に残ったのが「フィールドバレェをはじめたきっかけ」。 田舎で芸術とかお酒とか、 欲望の質の高いもの...
続きを読む