Google지도에서 무료 손 그리기 - iOS

Question

그리기 응용 프로그램에서 사용자가 그림을 그리거나 선을 그어 모양을 만들기 시작할 때 식별 할 수 있습니다. 지도에서 동일한 작업을 수행하려고 시도 중이므로 누구나 코드를 사용하여 도움을받을 수 있습니다. 또는 git 프로젝트

Answer 1

라인을 그리려면 polyline을 사용하십시오. Google Maps Shapes을 참조하십시오.

polyline을 사용하려면 locatoin 좌표를 지정해야합니다. 화면상의 한 점을 coordinateForPoint:(CGPoint)point 방법 GMSProjection 클래스의 좌표로 변환하려면.

Polyline은 실제로 두 좌표 사이에 선을 그립니다. 따라서 움직이는 mapView와 함께이 선들도 움직입니다. 나는 이것이 당신이 원하는 것이라고 생각합니다.

Answer 2

Map Kit Polyline or Polygon Drawing - https://github.com/tazihosniomar/MapKitDrawing

이 링크는 애플지도에 다각형을 그리기위한 데모 프로젝트가 포함되어 있습니다. 그러나 Google Map View의 논리는 동일하게 유지됩니다. 따라서 구현 로직을 복사하여 Google Map에 적용 할 수 있습니다.

이 정보가 도움이되기를 바랍니다.

Answer 3

기본 단계를 포함합니다 : 사용자가 그리는 시작할 때마다

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)

대리자 패턴을 다각형으로 좌표

//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) 변경하여 제어 할 수 있도록 OverlayView로부터 어레이의 모든 좌표를 취득.

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) 
    } 

나는 스위프트 3 here 구글지도에 여러 개의 폴리곤을 삭제/그리기 위해 데모 프로젝트를 만들었습니다.

AppDelegate에서 API 키를 설정하고 프로젝트를 실행하기 위해 번들 식별자를 변경하는 것을 기억하십시오.