javafx - gluon mapLayer でポリラインを作成する

Question

Google マップ API を使用すると、ポイントを相互にリンクするポリラインを含むレイヤーをマップ上に作成できます。

gluon の mapLayer の例または実装を見つけることができる場所を検索しました。

ご意見をお聞かせください

Answer 1

の上に線、ポリライン、またはポリゴンを描画するための明示的な API はありませんがMapView、MapLayerは任意の JavaFX を描画できるレイヤーでありShape、マップ座標へのスケーリングに注意する必要があります。

そのために、PoiLayer classを見ると、任意のMapPoint(緯度と経度で定義される) に対して 2D ポイント (x と y で定義される) を取得でき、その位置にノードを描画できることがわかります。

MapPoint point = new MapPoint(37.396256,-121.953847);
Node icon = new Circle(5, Color.BLUE);
Point2D mapPoint = baseMap.getMapPoint(point.getLatitude(), point.getLongitude());
icon.setTranslateX(mapPoint.getX());
icon.setTranslateY(mapPoint.getY());

たとえば、Polygonポイントのセットに基づいてを作成する場合Polygonは、レイヤーにオブジェクトを追加する必要があります。

public class PoiLayer extends MapLayer {

    private final Polygon polygon;

    public PoiLayer() {
        polygon = new Polygon();
        polygon.setStroke(Color.RED);
        polygon.setFill(Color.rgb(255, 0, 0, 0.5));
        this.getChildren().add(polygon);
    }

    @Override
    protected void layoutLayer() {
        polygon.getPoints().clear();
        for (Pair<MapPoint, Node> candidate : points) {
            MapPoint point = candidate.getKey();
            Node icon = candidate.getValue();
            Point2D mapPoint = baseMap.getMapPoint(point.getLatitude(), point.getLongitude());
            icon.setTranslateX(mapPoint.getX());
            icon.setTranslateY(mapPoint.getY());

            polygon.getPoints().addAll(mapPoint.getX(), mapPoint.getY());
        }
    }
}

次に、デモ クラスで一連の mapPoints を作成し、それらをマップに追加します。

private final List<MapPoint> polPoints = Arrays.asList(
        new MapPoint(37.887242, -122.178799), new MapPoint(37.738729, -121.921567),
        new MapPoint(37.441704, -121.921567), new MapPoint(37.293191, -122.178799),
        new MapPoint(37.441704, -122.436031), new MapPoint(37.738729, -122.436031));

private MapLayer myDemoLayer () {
    PoiLayer poi = new PoiLayer();
    for (MapPoint mapPoint : polPoints) {
        poi.addPoint(mapPoint, new Circle(5, Color.BLUE));
    }
    return poi;
}

そして、地理的に配置されたポリゴンが上にあるマップが表示されます。