iOS でフリーハンド描画機能を作成してみよう

Document created by yuki_ozawaesrij-esridist Employee on Nov 4, 2015Last modified by yuki_ozawaesrij-esridist Employee on Aug 1, 2017
Version 2Show Document
  • View in full screen mode

マップ上で、フリーハンドで描画したエリア内にあるデータを空間検索したいといった場合、ArcGIS API for JavaScript では Draw クラス を使用して実装することができます。ArcGIS Runtime SDK for iOS には専用のクラスがありませんが、マップ上のタッチイベントを使用してフリーハンド描画機能を実装することができます。

ArcGIS Runtime SDK for iOS では、マップの表示を行う AGSMapView クラスのデリゲートに、マップ上のタッチ操作(タップ、ホールド等)の検知を行う AGSMapViewTouchDelegate があります。この AGSMapViewTouchDelegate を使用してフリーハンド描画機能を作成していきます。

 

freehand.gif

 

まず、ユーザーがマップ上をホールド(指で長押し)したときに、新規にポリゴンを作成します。ホールドの検知は didTapAndHoldAtPoint メソッドを使用します。

 

func mapView(mapView: AGSMapView!, didTapAndHoldAtPoint screen: CGPoint, mapPoint mappoint: AGSPoint!, graphics: [NSObject : AnyObject]!) {

        //マップ上をホールド時に、フリーハンド用のポリゴンを新規に作成する

        self.agsGraphicsLayer.removeAllGraphics()

        self.agsPolygon = AGSMutablePolygon(spatialReference: self.agsMapView.spatialReference)

       

        //ホールドした地点(ポイント)をポリゴンの頂点に追加する

        self.agsPolygon.addRingToPolygon()

        self.agsPolygon.addPointToRing(mappoint)

}

次にホールドした状態で指を動かしたら、その地点にポリゴンの頂点を追加していきます。併せて、描画しているポリゴンの形状が分かるように、グラフィックを作成してマップ上に追加します。指を動かす操作の検知は didMoveTapAndHoldAtPoint メソッドを使用します。

 

func mapView(mapView: AGSMapView!, didMoveTapAndHoldAtPoint screen: CGPoint, mapPoint mappoint: AGSPoint!, graphics: [NSObject : AnyObject]!) {

       

        //マップ上をホールド中に指を動かしたら、動かした地点をポリゴンの頂点として追加する

        self.agsPolygon.addPointToRing(mappoint)

       

        //ポリゴンからグラフィックを作成し、グラフィックス レイヤーに追加する

        //指を動かしたらグラフィックを再作成する

        self.agsGraphicsLayer.removeAllGraphics()

        let myPolygonSymbol = AGSSimpleFillSymbol()

        myPolygonSymbol.color = UIColor.redColor().colorWithAlphaComponent(0.5)

        let polygonGraphic = AGSGraphic(geometry: self.agsPolygon, symbol: myPolygonSymbol, attributes: nil)

        self.agsGraphicsLayer.addGraphic(polygonGraphic)

       

}

マップ上から指を離したら、ポリゴンの描画を終了するようにします。マップ上から指を離したら didEndTapAndHoldAtPoint メソッドが呼ばれます。ここで、作成したエリア(ポリゴン内)にあるデータを検索する処理等を実装していきます。

 

func mapView(mapView: AGSMapView!, didEndTapAndHoldAtPoint screen: CGPoint, mapPoint mappoint: AGSPoint!, graphics: [NSObject : AnyObject]!) {

       

        //作成したポリゴンをもとに処理を実行する

  ・・・・

}

 

このような流れでフリーハンド描画機能を作成できます。完成版のサンプルを Esri Japan GitHub で公開していますのでお試しください。サンプルでは、描画したポリゴンをもとに AED の設置場所(流山市様のオープンデータを使用)を空間検索しています。

 

■関連リンク

米国 Esri 社 Web サイト:ArcGIS Runtime SDK for iOS

ESRIジャパン Web サイト:ArcGIS Runtime SDK for iOS

Attachments

    Outcomes