2.3. Компонент MapViewer

Для отображения карт в экранах приложения используется компонент com.haulmont.charts.gui.components.map.MapViewer.

Для подключения компонента в XML-дескриптор экрана в корневом элементе необходимо объявить пространство имен chart:

<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd"
        ...>

XML-имя компонента: mapViewer. Пример объявления компонента:

<layout>
    <vbox id="mapBox" height="100%">
        <chart:mapViewer id="map" width="100%" height="100%"/>
    </vbox>
</layout>

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

  • id, width, height - стандартные параметры компонентов.

  • mapType - тип карты, соответствующий перечислению MapViewer.Type: roadmap, satellite, hybrid, terrain. По умолчанию выбирается roadmap.

  • vendor - поставщик сервиса. На данный момент поддерживается только значение google.

Основная настройка карты и ее компонентов производится в контроллере экрана. Для этого достаточно инжектировать компонент, объявленный в XML-дескрипторе:

@Inject
private MapViewer map;

@Override
public void init(Map<String, Object> params) {
    GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
    map.setCenter(center);
}
  • Методы настройки карты:

    • setZoom() - задание масштаба карты.

    • setCenter() - задание центра карты.

    • setVisibleAreaBoundLimitsEnabled() - включение режима, ограничивающего видимую область карты.

    • setVisibleAreaBoundLimits() - задание границ видимости карты.

    • fitToBounds() - задание минимального масштаба карты, при котором будет полностью отображена область, заданная северо-восточной и юго-западной коордианатами.

    • setMaxZoom() - задание максимального доступного масштаба.

    • setMinZoom() - задание минимального доступного масштаба.

    • setDraggable() - включение/выключение режима перетаскивания карты.

    • setKeyboardShortcutsEnabled() - включение/выключение сочетаний клавиш.

    • setScrollWheelEnabled() - включение/выключение изменения масштаба карты с помощью колесика мыши.

    • setMapType() - задание типа карты.

  • Интерфейсы компонентов карты (располагаются в пакете com.haulmont.charts.gui.map.model):

    • GeoPoint - вспомогательный компонент, непосредственно не отображаемый на карте. Используется для задания параметров карты, таких как центр, границы, и для создания более сложных компонентов карты. Для создания объекта используется метод createGeoPoint() интерфейса MapViewer. Например:

      GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
      map.setCenter(center);
    • Marker - компонент для отметки места на карте. По умолчанию используется стандартная иконка сервиса карт. Для создания и размещения объекта на карте используются методы createMarker() и addMarker() интерфейса MapViewer. Например:

      Marker marker = map.createMarker("My place", map.createGeoPoint(53.590905, -2.249558), true);
      marker.setClickable(true);
      map.addMarker(marker);
    • Polyline - компонент для отображения ломаной линии. Для создания и размещения объекта на карте используются методы createPolyline() и addPolyline() интерфейса MapViewer. Например:

      List<GeoPoint> coordinates = new ArrayList<>();
      coordinates.add(map.createGeoPoint(53.49, -2.54));
      coordinates.add(map.createGeoPoint(53.49, -2.22));
      coordinates.add(map.createGeoPoint(53.89, -2.22));
      coordinates.add(map.createGeoPoint(53.99, -2.94));
      Polyline polyline = map.createPolyline(coordinates);
      map.addPolyline(polyline);
    • Polygon - компонент для отображения полигона. Для создания и размещения объекта на карте используются методы createPolygon() и addPolygonOverlay() интерфейса MapViewer. Например:

      List<GeoPoint> coordinates = new ArrayList<>();
      coordinates.add(map.createGeoPoint(53.49, -2.54));
      coordinates.add(map.createGeoPoint(53.49, -2.22));
      coordinates.add(map.createGeoPoint(53.89, -2.22));
      coordinates.add(map.createGeoPoint(53.99, -2.94));
      Polygon p = map.createPolygon(coordinates, "#9CFBA9", 0.6, "#2CA860", 1.0, 2);
      map.addPolygonOverlay(p);
    • InfoWindow - компонент карты для отображения информации во всплывающем окне. Для создания и размещения объекта на карте используются методы createInfoWindow() и openInfoWindow() интерфейса MapViewer. Например:

      InfoWindow w = map.createInfoWindow("Some text");
      map.openInfoWindow(w);

      Информационное окно может быть привязано к маркеру, например:

      map.addMarkerClickListener(new MarkerClickListener() {
          @Override
          public void onClick(MarkerClickEvent event) {
              Marker marker = event.getMarker();
              String caption = String.format("Marker clicked: %.2f, %.2f",
                      marker.getPosition().getLatitude(),
                      marker.getPosition().getLongitude());
              InfoWindow w = map.createInfoWindow(caption, marker);
              map.openInfoWindow(w);
          }
      });
    • HeatMapLayer - слой тепловой карты: предназначен для изображения плотности данных в различных географических точках. Степень плотности точек отображается с помощью цвета. По умолчанию области с высокой плотностью точек отображаются красным цветом, а области с низкой - зелёным. Для создания и размещения объекта на карте используются методы createHeatMapLayer() и addHeatMapLayer() интерфейса MapViewer. Например:

      HeatMapLayer heatMapLayer = map.createHeatMapLayer();
      List<GeoPoint> data = new ArrayList<>();
      data.add(map.createGeoPoint(53.450, -2.00));
      data.add(map.createGeoPoint(53.451, -2.00));
      data.add(map.createGeoPoint(53.452, -2.00));
      data.add(map.createGeoPoint(53.453, -2.00));
      data.add(map.createGeoPoint(53.454, -2.00));
      heatMapLayer.setData(data);
      map.addHeatMapLayer(heatMapLayer);

      Данные добавленного на карту слоя тепловой карты могут быть изменены с помощью дополнительного вызова метода setData(). Заново добавлять слой на карту при этом не требуется.

    • DrawingOptions - компонент поддержки рисования. В данный момент поддерживается только рисование полигонов. Режим рисования будет включен если в MapViewer передан экземпляр DrawingOptions. Пример использования:

      DrawingOptions options = new DrawingOptions();
      PolygonOptions polygonOptions = new PolygonOptions(true, true, "#993366", 0.6);
      ControlOptions controlOptions = new ControlOptions(
          Position.TOP_CENTER, Arrays.asList(OverlayType.POLYGON));
      options.setEnableDrawingControl(true);
      options.setPolygonOptions(polygonOptions);
      options.setDrawingControlOptions(controlOptions);
      options.setInitialDrawingMode(OverlayType.POLYGON);
      map.setDrawingOptions(options);
  • Слушатели событий (располагаются в пакете com.haulmont.charts.gui.map.model.listeners):

    • MapMoveListener - перемещение карты с зажаток клавишей мыши.

    • MapClickListener - щелчок по карте.

    • MarkerClickListener - щелчок по маркеру.

    • MarkerDragListener - перетаскивание маркера.

    • InfoWindowClosedListener - закрытие информационного окна.

    • PolygonCompleteListener - создание полигона в режиме редактирования.

    • PolygonEditListener - редактирование полигона (перемещение или добавление вершины существующего полигона).

    • MapInitListener - завершение инициализации карты: вызывается один раз после первоначальной загрузки карты, когда тайлы загружены и координаты доступны.

Для более подробной информации о методах и параметрах компонентов карты см. соответствующие JavaDocs.