Деревья на карте

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

Внешний вид деревьев

Настройка стилевых слоёв

Откройте редактор стилей.
Создайте новый слой и выберите тип 3D-модель.
На вкладке Данные раскройте список Деревья и выберите нужные типы растительности.
Расположите стилевые слои с деревьями в отдельной группе, после площадных и линейных объектов, но до слоёв с POI (иконками, обозначающими объекты на карте): деревья носят декоративный характер и не должны загораживать собой POI.

Текущий вид слоя с лиственными деревьями:

Лиственные деревья

Рандомизация

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

Выражение `random`

Чтобы добавить рандомизацию, задайте стилевые выражения на вкладке Стиль.

Выражение random имеет два аргумента, которые задают диапазон, в котором будет генерироваться случайное значение:

["random", 1, 5]

Результатом выражения random является число с плавающей точкой.

Рандомизация размера

Перейдите в раздел Размер и нажмите Редактировать JSON.
Добавьте следующее выражение:
```
["random", 0.3, 0.6]
```
Обычно рандомизировать размер лучше сразу в трех осях, в противном случае модели будут тянуться и искажаться.

Рандомизация поворота

Перейдите в раздел Поворот и нажмите Редактировать JSON.
Добавьте следующее выражение:
```
["literal", [0, 0, ["random", 0, 180]]]
```
Рандомизировать поворот, если речь идет о деревьях, лучше только вокруг оси Z. Иначе деревья, помимо вращения вокруг ствола, будут искривляться в стороны. В выражении выше поворот задаётся отдельно по трём осям: вокруг осей X и Y поворот не выполняется (0), а вокруг оси Z выполняется рандомизированно, в диапазоне от 0 до 180 градусов.

Рандомизация смещения

Перейдите в раздел Смещение и нажмите Редактировать JSON.
Добавьте следующее выражение:
```
["literal", [["random", 0, 3], ["random", 0, 3], 0]]
```
Рандомизировать смещение модели лучше только в осях X и Y, чтобы она не "взлетала в воздух". В выражении выше смещение задается отдельно по трём осям: по осям X и Y смещение выполняется рандомизированно, в диапазоне от 0 до 3 единиц, а по оси Z смещение не происходит (0).

Итоговый вид

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Quickstart with 2GIS Map API" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [37.628099, 55.751014],
                zoom: 18.5,
                rotation: 136,
                pitch: 45,
                key: 'Your API access key',
                style: 'df8c234a-6112-455e-86a6-dca1255e91aa'
            });
        </script>
    </body>
</html>