Стилизация

Объект Style позволяет разработчикам настраивать цвет, размер, шрифт и другие визуальные свойства объектов карты.

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

Стилизация точечных объектов

Вы можете настроить внешний вид точечного объекта (PointFeature), задав PointStyle со свойствами, такими как image, fill, stroke и text, а затем применив его к объекту.

Базовый стиль PointFeature с изображением

private PointFeature createStyledPoint() {
    return new PointFeature(GeometryUtils.createPoint(22, 25))
            .withStyles(
                    new PointStyle()
                            .withImage(new CircleStyle()
                                    .withRadius(7)
                                    .withFill(new Fill("#E7003E"))
                                    .withStroke(new Stroke()
                                            .withWidth(2.0)
                                            .withColor("#710067")))
                            .build());
}

Текстовые надписи для точечных объектов

Использование текста вместо изображения для PointFeature позволяет отображать текстовые надписи непосредственно на карте в указанных координатах, обеспечивая ясность и контекст для отображаемых данных.

При использовании текста для PointFeature вы можете настроить внешний вид текста, изменяя свойства, такие как font, fill, textAlign и т.д.

В примере ниже демонстрируется использование текстовой надписи вместо изображения для PointFeature:

private PointFeature createTextPoint() {
    return new PointFeature(GeometryUtils.createPoint(15, 15))
            .withStyles(
                    new PointStyle()
                            .withText(new TextStyle()
                                    .withText("Africa")
                                    .withFont("20px sans-serif")
                                    .withFill(new Fill("#5E4BD8"))
                                    .withStroke(new Stroke()
                                            .withWidth(2.)
                                            .withColor("#A368D5")))
                            .build());
}

Использование иконок для точечных объектов

Шрифтовые иконки

Пример использования бесплатных иконок Font Awesome 7:

private PointFeature createPointWithFontIcons() {
    return new PointFeature(GeometryUtils.createPoint(0, 43))
            .withStyles(new Style()
                    .withText(new TextStyle()
                            .withText("\uf015")
                            .withFont("24px 'Font Awesome 7 Free'")));
}

Чтобы использовать шрифтовые иконки, такие как Font Awesome, вы должны включить их в свой проект.

SVG-иконки

Класс IconStyle предоставляет несколько методов для установки иконок на точечных объектах.

Метод withVaadinIcon() принимает любое значение перечисления VaadinIcon.

private PointFeature createPointWithVaadinIcons() {
    return new PointFeature(GeometryUtils.createPoint(11, 45))
            .withStyles(new Style()
                    .withImage(new IconStyle()
                            .withVaadinIcon(VaadinIcon.USER)
                            .withColor("#1B1BB3")
                    ));
}

withLumoIcon() - устанавливает иконку из набора иконок Lumo. Вы можете настроить размер и цвет.

private PointFeature createPointWithLumoIcons() {
    return new PointFeature(GeometryUtils.createPoint(12, 47))
            .withStyles(new Style()
                    .withImage(new IconStyle()
                            .withLumoIcon(LumoIcon.SEARCH)
                            .withIconHeight("32px")
                            .withIconWidth("32px")
                            .withColor("#621448"))
            );
}

withIconFromSet() - использует иконки из ваших собственных наборов иконок (смотрите Пользовательские иконки). Предопределенный цвет иконки может повлиять на окончательный внешний вид.

private PointFeature createCustomPoint() {
    return new PointFeature(GeometryUtils.createPoint(4, 33))
            .withStyles(new Style()
                    .withImage(new IconStyle()
                            .withIconFromSet(StarIcons.CIRCLE))
            );
}

Иконки из пользовательских наборов имеют предопределенные цвета (заливка="#1E90FF"). Если вы также вызовете withColor("…"), OpenLayers скомбинирует оба цвета. Например:

            .withStyles(new Style()
                    .withImage(new IconStyle()
                            .withIconFromSet(StarIcons.CIRCLE)
                            .withColor("yellow"))
            );
}

Чтобы задавать цвет исключительно через Java API, установите заливку вашей иконки в "#FFF" (белый).

withIconName() - устанавливает иконку из набора иконок в следующем формате: "collectionName:iconName".

private PointFeature createPointWithIconName() {
    return new PointFeature(GeometryUtils.createPoint(0, 30))
            .withStyles(new Style()
                    .withImage(new IconStyle()
                            .withIconName("vaadin:user")));
}

Стилизация объектов-маркеров

Чтобы изменить значок маркера, обратитесь к следующему примеру:

private MarkerFeature createStyledMarker() {
    MarkerFeature feature = new MarkerFeature(GeometryUtils.createPoint(20, 20));
    feature.removeAllStyles();
    return feature.withStyles(new Style()
                    .withImage(new IconStyle()
                            .withSrc("icons/icon.png")
                            .withScale(0.05)));
}

Дополнительно, пример настройки значков маркеров на основе атрибутов геообъекта приведен в разделе Использование пользовательских маркеров.

Вы также можете применить примеры из раздела Использование иконок для точечных объектов, чтобы установить иконки в качестве маркеров для MarkerFeature.

Стилизация объектов LineString

Чтобы изменить стиль для LineStringFeature, обычно определяют объект LineStringStyle с нужными свойствами внешнего вида, такими как stroke, fill и т.д., и затем применяют этот стиль к LineStringFeature.

private LineStringFeature createStyledLineString() {
    LineString lineString = geometries.createLineString(new Coordinate[]{
            new Coordinate(13, 20),
            new Coordinate(13, 32),
            new Coordinate(25, 17)});
    return new LineStringFeature(lineString)
            .withStyles(
                    new LineStringStyle()
                            .withStroke(new Stroke()
                                    .withWidth(3.)
                                    .withColor("#F60018"))
                            .build());
}

Стилизация объектов Polygon

Изменение стиля для PolygonFeature включает определение нового PolygonStyle с нужными свойствами, такими как fill, stroke и т.д., и применение этого стиля к PolygonFeature.

private PolygonFeature createStyledPolygon() {
    LinearRing shell = geometries.createLinearRing(new Coordinate[]{
            new Coordinate(1.2457020544488762, 42.476628901048684),
            new Coordinate(-0.054875980233204155, 52.77260344863316),
            new Coordinate(29.858418817454655, 46.105591288830624),
            new Coordinate(1.2457020544488762, 42.476628901048684),
    });
    return new PolygonFeature(geometries.createPolygon(shell))
            .withStyles(
                    new PolygonStyle()
                            .withFill(new Fill("rgba(1, 147, 154, 0.2)"))
                            .withStroke(new Stroke()
                                    .withWidth(3.)
                                    .withColor("#123EAB"))
                            .build());
}

Стили режима выбора

Каждый тип объекта в векторном источнике имеет стили по умолчанию для режима выбора. Эти стили автоматически применяются, когда пользователь выбирает объект на карте. Чтобы настроить стили выделения, каждый объект предоставляет методы для добавления собственных стилей.

Например, вот как можно добавить пользовательские стили выделения для PolygonFeature:

private PolygonFeature createPolygonWithSelectStyles() {
    Polygon polygon = GeometryUtils.createPolygon(new Coordinate[]{
            new Coordinate(-64.75370117729211, 32.30679527567045),
            new Coordinate(-80.18546220891433, 25.760830653727623),
            new Coordinate(-80.18546220891433, 25.760830653727623),
            new Coordinate(-66.11846996297967, 18.4077981563645),
            new Coordinate(-64.75370117729211, 32.30679527567045),
    });
    return new PolygonFeature(polygon)
            .withSelectStyles(
                    new PolygonStyle()
                            .withFill(new Fill("rgba(255, 61, 0, 0.2)"))
                            .withStroke(new Stroke()
                                    .withWidth(4d)
                                    .withColor("#FF3D00"))
                            .build());
}

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

Стили режима изменения

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

Например, вот как установить пользовательские стили для точек вершин полигона:

private PolygonFeature createPolygonWithModifyStyles() {
    Polygon polygon = GeometryUtils.createPolygon(new Coordinate[]{
            new Coordinate(77.2048761253423, 28.605384389707353),
            new Coordinate(75.78484389126132, 26.895539146773086),
            new Coordinate(78.00224596797739, 27.170451672755192),
            new Coordinate(77.2048761253423, 28.605384389707353)});

    return new PolygonFeature(polygon)
            .withModifyStyles(
                    new PointStyle()
                    .withImage(new CircleStyle()
                            .withRadius(6)
                            .withFill(new Fill("rgba(149, 107, 214, 0.5)"))
                            .withStroke(new Stroke()
                                    .withWidth(2d)
                                    .withColor("#2F0571")))
                    .build());
}

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