MKMapViewでレーダーを実現したい

Question

MKMapViewを使用してドラゴンボールレーダーのようなマップ画面のアプリを作成しようと考えています。

ドラゴンボールレーダーのように背景をメッシュのようにして、ピンなどは残すようにしたいのですが、設定方法、実現方法に悩んでいます。

現在はMKMapViewを使用していますが、どのような実装を行うのが良いでしょうか・・・

Answer 1

mapviewの上に細い線のUIImageViewを複数個配置すればいいのではないでしょうか？

codeから実現すれば、割と簡単にできると思います。

// 適宜、viewDidLoadなどで、makeBars(space: CGFloat(20))などで呼び出す想定

    func makeBars(space: CGFloat) {
    //    let space = CGFloat(40)  // 引数を取らないなら、この行の記載を(各線の幅設定、適宜変更を)
        let horizontalN = self.view.bounds.width / space
        let verticalN = self.view.bounds.height / space
        for n in 0 ... Int(horizontalN) {
            let verticalLine = UIImageView(image: UIImage(named: "verticalLine.png"))
            verticalLine.frame = CGRect(x: 0, y: 0, width:2, height: self.view.bounds.height)
            verticalLine.tag = n * 10 + 1  // あとで取得できるようにtag設定
            self.view.addSubview(verticalLine)
            self.view.bringSubviewToFront(verticalLine)
        }
        for n in 0 ... Int(verticalN) {
            let horizontalLine = UIImageView(image: UIImage(named: "horizontalLine.png"))
            horizontalLine.frame = CGRect(x: 0, y: 0, width:self.view.bounds.width, height: 2)
            horizontalLine.tag = n * 10 + 2
            self.view.addSubview(horizontalLine)
            self.view.bringSubviewToFront(horizontalLine)
        }
    }

Comments

[onn]

ありがとうございます！

[onn]

レーダーのようにするために、細い線を配置するときに、map上のピンのみを残して背景部分を消したいと考えているのですがどのように実装すればいいでしょうか？

[hameji]

https://www.raywenderlich.com/425-mapkit-tutorial-overlay-views
のAll About Overlay Viewsを参考に作ればできると思います。
英語ですが、頑張って読んでみてくださいね。

そのページにも書いてありますが、
もっとも簡単な方法はUIViewを上に載せることでも実現できそうですが、
(画面奥) MapView -> UIView -> 格子 -> Pin (画面手前)
マップの移動や縮尺が効かなくなる恐れがあるので、
overlay viewを用いるのがいいと思います。

[onn]

ありがとうございます、早速試してみます！