3. Отображение объектов на карте

Давайте вернемся к сущности Location и добавим в нее следующие атрибуты:

  1. buildingEntrance типа GeoPoint. Этот атрибут хранит координаты входа в здание.

  2. pathToBuilding типа GeoPolyline. Этот атрибут хранит путь к зданию.

  3. buildingArea типа GeoPolygon. Этот атрибут используется для отображения здания на карте с помощью геометрической фигуры.

new geo location attr

Добавьте эти атрибуты в экран Location.detail.

Для упрощения нашего руководства мы будем использовать текстовые поля для новых полей. Вы можете добавить обработчики событий карты для извлечения координат, как мы это делали в Сохранение координат в атрибут Building. Для этого используйте методы, предоставляемые GeometryUtils.

Ниже приведены примеры заполнения полей:

  • Building:

    POINT (13.347796079315284 52.55344847222085)

  • Building entrance:

    POINT (13.347860653822895 52.553536712270784)

  • Path to building:

    LINESTRING (13.346886063248354 52.553529790121985,
13.347394863347068 52.5532539371346, 13.347837668453902 52.55355180648286,
13.347860653822895 52.553536712270784)

  • Building area:

    POLYGON ((13.347878609736783 52.553551482547135,
13.34795260252847 52.55350646966119,
13.347713548893793 52.55334632728869,
13.347640979040412 52.553390474703775,
13.347878609736783 52.553551482547135))

Добавление векторных слоев

Векторный слой используется для работы с геометриями. На карту можно добавить несколько векторных слоев.

Чтобы отображать полигоны, полилинии и точки, вам нужно добавить векторные слои на карту.

Откройте location-lookup-view.xml и создайте отдельный векторный слой и источник векторных данных для каждого гео-специфичного атрибута геообъекта. Укажите атрибуты dataContainer и property для источников векторных данных:

<maps:geoMap id="map" ...>
    ...
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="dataVectorLayer">
            <maps:dataVectorSource id="buildingSource"
                                   dataContainer="locationsDc"
                                   property="building"/>
        </maps:vector>
        <maps:vector id="vectorLayerArea">
            <maps:dataVectorSource id="areaSource"
                                   dataContainer="locationsDc"
                                   property="buildingArea"/>
        </maps:vector>
        <maps:vector id="vectorLayerPath">
            <maps:dataVectorSource id="pathSource"
                                   dataContainer="locationsDc"
                                   property="pathToBuilding"/>
        </maps:vector>
        <maps:vector id="vectorLayerEntrance">
            <maps:dataVectorSource id="entranceSource"
                                   dataContainer="locationsDc"
                                   property="buildingEntrance"/>
        </maps:vector>
    </maps:layers>
</maps:geoMap>

Добавление точки на карту

Перейдите к контроллеру экрана LocationLookupView и добавьте новый метод:

@ViewComponent("map.vectorLayerEntrance.entranceSource")
private DataVectorSource<Location> entranceSource;

private void initBuildingEntranceSource() {
    entranceSource.setStyleProvider((location -> (1)
            new Style()
                    .withImage(new CircleStyle()
                            .withRadius(4)
                            .withFill(new Fill("#000000"))
                            .withStroke(new Stroke()
                                    .withWidth(2d)
                                    .withColor("#ffffff")))));
}
1 Настраивает styleProvider для отображения Point как точечного объекта с пользовательским стилем точки.

Добавление полилинии на карту

Добавьте метод initPathToBuildingSource() в контроллер экрана LocationLookupView:

@ViewComponent("map.vectorLayerPath.pathSource")
private DataVectorSource<Location> pathSource;

private void initPathToBuildingSource() {
    pathSource.setStyleProvider(location -> (1)
            new Style()
                    .withStroke(new Stroke()
                            .withWidth(2d)
                            .withColor("#000000")
                            .withLineDash(List.of(0.2, 8d, 0.8d))));
}
1 Настраивает styleProvider для отображения LineString как объекта-полилинии с настроенным стилем линии.

Добавление полигона на карту

Добавьте метод initBuildingAreaSource() в контроллер экрана LocationLookupView:

@ViewComponent("map.vectorLayerArea.areaSource")
private DataVectorSource<Location> areaSource;

private void initBuildingAreaSource() {
    areaSource.setStyleProvider(location -> { (1)
        String fillColor = location.getType() == LocationType.COWORKING
                ? "rgba(52, 216, 0, 0.2)"
                : "rgba(1, 147, 154, 0.2)";
        String strokeColor = location.getType() == LocationType.COWORKING
                ? "#228D00"
                : "#123EAB";
        return new Style()
                .withFill(new Fill(fillColor))
                .withStroke(new Stroke()
                        .withWidth(2d)
                        .withColor(strokeColor));
    });
}
1 Настраивает styleProvider для отображения Polygon как объекта-полигона с настроенным стилем полигона. Цвет заливки и цвет границы полигона задаются в переменных и зависят от типа местоположения.

Вызовите созданные методы из onInit():

@Subscribe
public void onInit(final InitEvent event) {
    initBuildingAreaSource();
    initBuildingEntranceSource();
    initPathToBuildingSource();
}

Давайте запустим приложение, чтобы увидеть новую функцию в действии. Теперь при выборе местоположения карта будет увеличивать масштаб и центрироваться по координатам местоположения.

Вход в здание отображается как черная точка на карте. Путь к зданию изображен пунктирной линией, а полигон показывает границу здания.

map with features