ios - iOS の Google マップでフリーハンドで描画するにはどうすればよいですか?

Question

描画アプリケーションでは、ユーザーが描画を開始し、指を動かして線/形状を作成するタイミングを識別できます。地図上で同じことをしようとしていますが、どうすればよいですか?

Answer 1

基本的な手順は次のとおりです。

1)ユーザーが描画を開始するたびにオーバーレイ ビューを追加します。

lazy var canvasView:CanvasView = {

    var overlayView = CanvasView(frame: self.googleMapView.frame)
    overlayView.isUserInteractionEnabled = true
    overlayView.delegate = self
    return overlayView

}()
@IBAction func drawActn(_ sender: AnyObject?) {

    self.coordinates.removeAll()
    self.view.addSubview(canvasView)
    let origImage = UIImage(named: "pen")
    let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
    drawBtn.setImage(tintedImage, for: .normal)
    drawBtn.tintColor = UIColor.white
    drawBtn.backgroundColor = UIColor.red

}

2)オーバーレイ ビューでフリーハンド描画を行います。

class CanvasView: UIImageView {

    weak var delegate:NotifyTouchEvents?
    var lastPoint = CGPoint.zero
    let brushWidth:CGFloat = 3.0
    let opacity :CGFloat = 1.0


    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {


        if let touch = touches.first {

            self.delegate?.touchBegan(touch: touch)
            lastPoint = touch.location(in: self)
        }
    }


    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

        if let touch = touches.first  {

            self.delegate?.touchMoved(touch: touch)
            let currentPoint = touch.location(in: self)
            drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
            lastPoint = currentPoint
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

        if let touch = touches.first  {

            self.delegate?.touchEnded(touch: touch)

        }
    }

    func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {

        UIGraphicsBeginImageContext(self.frame.size)
        let context = UIGraphicsGetCurrentContext()
        self.image?.draw(in: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))

        context?.move(to: fromPoint)
        context?.addLine(to: toPoint)

        context?.setLineCap(.round)
        context?.setLineWidth(brushWidth)
        context?.setStrokeColor(UIColor.black.cgColor)
        context?.setBlendMode(.normal)
        context?.strokePath()

        self.image = UIGraphicsGetImageFromCurrentImageContext()
        self.alpha = opacity
        UIGraphicsEndImageContext()

    }

}

3)デリゲート パターンを使用して、OverlayView から Controller への配列内のすべての座標を取得します。

//MARK: GET DRAWABLE COORDINATES
extension ViewController:NotifyTouchEvents{

    func touchBegan(touch:UITouch){

        let location = touch.location(in: self.googleMapView)
        let coordinate = self.googleMapView.projection.coordinate(for: location)
        self.coordinates.append(coordinate)

    }

    func touchMoved(touch:UITouch){

        let location = touch.location(in: self.googleMapView)
        let coordinate = self.googleMapView.projection.coordinate(for: location)
        self.coordinates.append(coordinate)

    }

    func touchEnded(touch:UITouch){

        let location = touch.location(in: self.googleMapView)
        let coordinate = self.googleMapView.projection.coordinate(for: location)
        self.coordinates.append(coordinate)
        createPolygonFromTheDrawablePoints()
    }
}

4)その座標を多角形に変更します。

   func createPolygonFromTheDrawablePoints(){

        let numberOfPoints = self.coordinates.count
        //do not draw in mapview a single point
        if numberOfPoints > 2 { addPolyGonInMapView(drawableLoc: coordinates) }//neglects a single touch
        coordinates = []
        self.canvasView.image = nil
        self.canvasView.removeFromSuperview()

        let origImage = UIImage(named: "pen")
        let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
        drawBtn.setImage(tintedImage, for: .normal)
        drawBtn.tintColor = UIColor.red
        drawBtn.backgroundColor = UIColor.white

    }

    func  addPolyGonInMapView( drawableLoc:[CLLocationCoordinate2D]){

        isDrawingModeEnabled = true
        let path = GMSMutablePath()
        for loc in drawableLoc{

            path.add(loc)

        }
        let newpolygon = GMSPolygon(path: path)
        newpolygon.strokeWidth = 3
        newpolygon.strokeColor = UIColor.black
        newpolygon.fillColor = UIColor.black.withAlphaComponent(0.5)
        newpolygon.map = googleMapView
        if cancelDrawingBtn.isHidden == true{ cancelDrawingBtn.isHidden = false }
        userDrawablePolygons.append(newpolygon)
        addPolygonDeleteAnnotation(endCoordinate: drawableLoc.last!,polygon: newpolygon)
    }

ここで、Swift 3 の Google マップで複数のポリゴンを描画/削除するためのデモ プロジェクトを作成しました。

プロジェクトを実行するには、AppDelegate で API キーを設定し、バンドル識別子を変更することを忘れないでください。

Answer 2

マップ キットのポリラインまたはポリゴン描画 - https://github.com/tazihosniomar/MapKitDrawing

このリンクには、Apple Map でポリゴンを描画するためのデモ プロジェクトが含まれています。ただし、ロジックは Google マップ ビューでも同じです。したがって、これから実装ロジックをコピーして、Google マップに適用できます。

これがお役に立てば幸いです。

Answer 3

線を引くには を使用しますpolyline。Google マップのシェイプを参照してください。

使用polylineするには、位置座標を指定する必要があります。画面上の点を座標に変換するには、 GMSProjectionクラスcoordinateForPoint:(CGPoint)pointのメソッドを使用します。

Polyline実際に 2 つの座標間に線を引きます。したがって、mapView を移動すると、これらの線も移動します。これがあなたの望むものだと思います。