geoMap

Для работы компонента требуется коммерческое дополнение Maps.
ДЕМО

geoMap отображает географические данные.

XML-элемент

geoMap

Java-класс

GeoMap

Основы

Объявите пространство имен maps в XML-дескрипторе экрана:

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:maps="http://jmix.io/schema/maps/ui"
      title="msg://mapBasicView.title">

Studio автоматически добавляет пространство имен, когда вы добавляете компонент с помощью действия Add Component на верхней панели действий. См. Палитра компонентов.

Затем добавьте элемент geoMap:

<maps:geoMap id="map"
             height="100%"
             width="100%"/>

Если задан атрибут id, компонент GeoMap можно инжектировать в контроллер и обращаться непосредственно к его API:

@ViewComponent
private GeoMap geoMap;

@Subscribe
public void onInit(final InitEvent event) {
    geoMap.addLayer(new TileLayer()
            .withSource(new OsmSource()
                    .withUrl("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
                    .withOpaque(true)
                    .withMaxZoom(10)));
}

Слой

Компонент GeoMap может включать несколько слоев, отображающих разные типы географической информации. Изначально карта не содержит слоев.

Дополнение Maps предоставляет следующие типы слоев:

  • TileLayer отображает предварительно отрисованные тайловые изображения, организованные по уровням масштабирования.

  • ImageLayer отображает статические изображения или изображения, полученные от Web Map Service (WMS).

  • VectorLayer отображает объекты и геометрии.

  • HeatmapLayer отображает точечные объекты в виде тепловой карты.

Описание источников, поддерживаемых каждым типом слоя, и примеры использования приведены в разделе Слои и источники.

Слой можно инжектировать в контроллер и использовать программно:

@ViewComponent("map.tile")
private TileLayer mapTile;

@Subscribe
public void onInit(final InitEvent event) {
    mapTile.setSource(new XyzSource()
            .withUrl("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"));
}

Источник

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

Дополнение Maps предоставляет следующие типы источников:

Описание источников и примеры их использования приведены в разделе Слои и источники.

В следующем примере для тайлового слоя задается OsmSource:

<maps:layers>
    <maps:tile>
        <maps:osmSource attributions="© Your Attribution Info"
                        maxZoom="34"/>
    </maps:tile>
</maps:layers>

Источник можно инжектировать в контроллер и использовать программно:

@ViewComponent("map.tile.osmSource")
private OsmSource osmSource;

@Subscribe
public void onInit(final InitEvent event) {
    osmSource.withUrl("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
            .withMaxZoom(12)
            .withWrapX(false);
}

Отображение

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

По умолчанию geoMap отображает карту мира с начальным географическим центром в точке (0,0).

<maps:mapView centerX="10.872461786203276"
              centerY="48.36928140366503"
              zoom="4.0"/>

Можно указать следующие дополнительные параметры:

  • centerX определяет широту начального географического центра карты. Значение передается в объект org.locationtech.jts.geom.Coordinate.

  • centerY определяет долготу начального географического центра карты. Значение передается в объект org.locationtech.jts.geom.Coordinate.

  • maxZoom задает максимальный уровень масштабирования.

  • minZoom задает минимальный уровень масштабирования.

  • projection определяет систему координат (CRS), используемую для отображения географических данных. Она преобразует трехмерные координаты Земли в двумерную плоскость. Распространенные проекции: EPSG:3857 (Web Mercator) и EPSG:4326 (WGS 84). По умолчанию используется EPSG:3857. Можно задать пользовательскую проекцию.

  • rotation задает поворот в радианах: положительное значение поворачивает карту по часовой стрелке, а 0 соответствует направлению на север. Подробнее см. setRotation.

  • zoom задает уровень масштабирования. Значение 0 соответствует максимальному отдалению; при приближении значение увеличивается.

Пользовательская проекция

ДЕМО

Чтобы настроить пользовательскую проекцию, выполните следующие действия:

  1. Определите бин проекции. Зарегистрируйте проекцию в Spring-конфигурации в формате PROJ.4:

    @Bean
public ProjectionRegistration projectionRegistration21781() {
    return new GeoMapProjectionRegistration("EPSG:21781",
            "+proj=somerc +lat_0=46.9524055555556 " +
                    "+lon_0=7.43958333333333 " +
                    "+k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel " +
                    "+towgs84=674.374,15.056,405.346,0,0,0,0 +units=m " +
                    "+no_defs +type=crs");
}

  2. Настройте компонент карты. Укажите атрибут projection элемента mapView в XML-дескрипторе:

    <maps:geoMap id="geoMap"
             width="100%"
             height="100%">
    <maps:mapView projection="EPSG:21781"
                  centerX="10.872461786203276"
                  centerY="48.36928140366503"
                  zoom="4.0">
    </maps:mapView>
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

  3. Инициализируйте проекцию в контроллере. Программно примените проекцию ко всем компонентам карты на странице:

    @ViewComponent
private GeoMap geoMap;

@Subscribe
public void onInit(final InitEvent event) {
    geoMap.setProjection(() -> "EPSG:21781");
}
    Проекция применяется ко всем компонентам карты на странице. После ее установки все операции с координатами используют единицы измерения этой проекции: метры, градусы и т. д.

Охват

Охват (extent) задаёт географические границы отображения карты или определённого слоя и тем самым определяет видимую область карты.

Охват задаётся минимальными координатами нижнего левого угла и максимальными координатами верхнего правого угла в формате [minX, minY, maxX, maxY].

Выберите слой или элемент mapView на панели структуры Jmix UI либо в XML-дескрипторе экрана, нажмите Add на панели инспектора, выберите Extent и задайте атрибуты minX, minY, maxX и maxY:

<maps:mapView centerY="51.0"
              centerX="40.0"
              zoom="4.0">
    <maps:extent minX="-15.0"
                 minY="30.0"
                 maxX="40.0"
                 maxY="60.0"/>
</maps:mapView>

Параметры ограничения охвата

Если для mapView задан extent, OpenLayers по умолчанию ограничивает всю область просмотра этим охватом. В адаптивных макетах карта может принудительно увеличиваться, если соотношение сторон контейнера отличается от соотношения сторон охвата.

Для настройки поведения используйте следующие атрибуты mapView:

  • showFullExtent позволяет уменьшить масштаб настолько, чтобы показать весь заданный охват, даже если соотношение сторон контейнера отличается. Значение по умолчанию — false.

  • constrainOnlyCenter применяет ограничение охвата только к центру области просмотра, поэтому её края могут выходить за пределы охвата. Значение по умолчанию — false.

  • smoothExtentConstraint применяет ограничение плавно, допуская небольшое смещение за границу с эффектом возврата вместо жесткой остановки. Значение по умолчанию — true.

Эти атрибуты задаются при создании. Они передаются в представление OpenLayers во время инициализации и не могут изменяться во время выполнения.

<maps:geoMap id="map"
             width="100%"
             height="340px">
    <maps:mapView centerX="7"
                  centerY="7"
                  zoom="7"
                  showFullExtent="true">
        <maps:extent minX="5"
                     minY="0"
                     maxX="20"
                     maxY="15"/>
    </maps:mapView>
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

Атрибуты

geoMap не определяет собственных атрибутов.

Компонент поддерживает следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - visible - width

Обработчики

Следующие события относятся к geoMap:

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).
Название Описание

MapClickEvent

Возникает при щелчке по карте. Двойной щелчок вызывает это событие дважды.

MapDoubleClickEvent

Возникает при двойном щелчке по карте.

MapMoveEndEvent

Возникает после завершения перемещения карты.

MapSingleClickEvent

Возникает при одиночном щелчке после того, как компонент определит, что взаимодействие не является двойным щелчком.

MapZoomChangedEvent

Возникает при изменении уровня масштабирования карты.

Компонент поддерживает следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

geoMap может содержать один элемент mapView и обязательный элемент layers. Элемент layers может содержать слои tile, image, vector и heatmap с источниками и элементами оформления, поддерживаемыми соответствующим типом слоя.

См. также