2017-05-31 30 views
2

私はAndroid MapBox SDK 5.1.0-SNAPSHOTを使用しています。座標と半径をメートルで表示する方法Drawing circle Android MapBox SDK

多角形を描画するアイデアがあります。しかし、これは非常に問題です。

答えて

1

一つの選択肢だ多角形

を描画するためのアイデアを持って、別のオプションは、あなたの活動にCircleLayerを追加することです。これはランタイムスタイリングAPIの一部で、an example hereが見つかります。

+4

ありがとうございました。この例では、ミュージアムのソースを使用しますしかし、私はどのようにポイントのリストで自分のソースを作成するのか分からない。 –

+1

それは?カスタムサークルを作成するにはどうすればよいですか?非常に基本的なマップ機能のようです。 – Bilthon

1

Zugaldiaが答えたので、円のレイヤーを描くのが最も簡単な方法でした。ただし、サイズ精度を無視して円を描きたい場合にのみ使用します。

もう1つの選択肢は、正確な距離と視覚化(傾いている場合)を得るために、ポイントの周りに円周を描くことです。後で説明します。

Kotlinでは、申し訳ありません。

最初の部分、円の層を描くこと:あなたがポジションを保有する場合に

mapView.getMapAsync { 
    map = it 

    // Add the source (at start, an 'empty' GeoJsonSource) 
    map?.addSource(GeoJsonSource(SOURCE_ID)) 

    // Create a circle layer from previously defined source 
    // don't forget source identifier 
    val layer = CircleLayer(CIRCLE_LAYER_ID, SOURCE_ID) 
    layer.withProperties(
      circleRadius(50f), 
      circleOpacity(.4f), 
      circleColor(Color.WHITE) 
    ) 

    map?.addLayer(layer) 
} 

そして、あなたは周りの描きたいのですが:

private fun updateCircleLayer() { 
    // Update the GeoJsonSource 
    // !!! Beware, (longitude, latitude), not the other way around !!! 
    val center = Point.fromCoordinates(doubleArrayOf(longitude, latitude)) 
    map?.getSourceAs<GeoJsonSource>(SOURCE_ID)?.setGeoJson(center) 
} 

第二の部分を、周囲を描く:

言語とニーズに合わせてこのアルゴリズムを変更しました。https://stackoverflow.com/a/39006388/4258214

private fun getPerimeterFeature(radiusInKilometers: Double = .05, sides: Int = 64): Feature { 
    // here, currentPosition is a class property, get your lat & long as you'd like 
    val latitude = currentPosition.latitude 
    val longitude = currentPosition.longitude 

    val positions = mutableListOf<Position>() 

    // these are conversion constants 
    val distanceX: Double = radiusInKilometers/(111.319 * Math.cos(latitude * Math.PI/180)) 
    val distanceY: Double = radiusInKilometers/110.574 

    val slice = (2 * Math.PI)/sides 

    var theta: Double 
    var x: Double 
    var y: Double 
    var position: Position 
    for (i in 0..sides) { 
     theta = i * slice 
     x = distanceX * Math.cos(theta) 
     y = distanceY * Math.sin(theta) 

     position = Position.fromCoordinates(longitude + x, latitude + y) 
     positions.add(position) 
    } 

    return Feature.fromGeometry(Polygon.fromCoordinates(listOf(positions))) 
} 

最初の部分のupdateCircleLayer()を参照してFeatureGeoJSonSourceに返すと、それだけです。

希望すると、これが役立ちます。楽しむ !

1

@ Xalamadraxの答えに基づいて、私は彼のコードを簡略化し、javaで翻訳しました。

private PolygonOptions generatePerimeter(LatLng centerCoordinates, double radiusInKilometers, int numberOfSides) { 
    List<LatLng> positions = new ArrayList<>(); 
    double distanceX = radiusInKilometers/(111.319 * Math.cos(centerCoordinates.getLatitude() * Math.PI/180)); 
    double distanceY = radiusInKilometers/110.574; 

    double slice = (2 * Math.PI)/numberOfSides; 

    double theta; 
    double x; 
    double y; 
    LatLng position; 
    for (int i = 0; i < numberOfSides; ++i) { 
     theta = i * slice; 
     x = distanceX * Math.cos(theta); 
     y = distanceY * Math.sin(theta); 

     position = new LatLng(centerCoordinates.getLatitude() + y, 
       centerCoordinates.getLongitude() + x); 
     positions.add(position); 
    } 
    return new PolygonOptions() 
      .addAll(positions) 
      .fillColor(Color.BLUE) 
      .alpha(0.4f); 
} 

そして、マップに追加するには:

mMapView.getMapAsync(new OnMapReadyCallback() { 
    @Override 
    public void onMapReady(MapboxMap mapboxMap) { 
     mapboxMap.addPolygon(generatePerimeter(
       new LatLng(48.8566d, 2.3522d), 
       100, 
       64)); 
    } 
}); 

編集:私はので、多分それを向上させることができるmapboxすることは非常に新しいです。

関連する問題