Viewport GeoJSON на примере WFS

GeoJsonViewportSource позволяет отображать данные в формате GeoJSON, запрашивая их для текущего viewport (области видимости) карты.

Отображение данных на карте

В качестве примера вы можете использовать WFS-данные из GeoServer.

Примечание

Стандарт WFS используется не только для запроса данных, но и для их модификации. Объект GeoJsonViewportSource поддерживает только отображение данных.

Для отображения данных на карте выполните следующие шаги:

Получите WFS-данные с помощью GeoServer.
Добавьте слои в стиль карты.
Подключите источник WFS-данных в карту.

1. Получите WFS-данные из GeoServer

Установите и запустите GeoServer как Docker-контейнер:
```
docker pull docker.osgeo.org/geoserver:2.26.x
docker run -it -p8080:8080 --env CORS_ENABLED=true docker.osgeo.org/geoserver:2.26.x
```
Примечание

В команде запуска переменная CORS_ENABLED=true добавлена только для примера из этой инструкции.

См. полную инструкцию по установке для актуальной версии GeoServer.
В веб-интерфейсе перейдите по адресу http://localhost:8080/geoserver.
Перейдите в раздел Layer Preview. Для нужного слоя столбце All Formats выберите WFS → GeoJSON:

В новой вкладке откроется URL запроса с типом GetFeature для получения данных:

На основе этого базового URL при подключении источников данных вы создадите bbox-функцию источника. Функция используется в опции data GeoJsonViewportSource и методе setData.

2. Добавьте стилевые слои

Добавьте с помощью addLayer три новых слоя для отображения на карте полигонов, линий и точек:

const layers = [
    {
        type: 'polygon',
        id: 'geojson-polygon',
        filter: ['match', ['sourceAttr', 'exampleCase'], ['polygon'], true, false],
        style: {
            strokeWidth: 2,
            strokeColor: '#444444',
            color: '#00ff00a0',
        },
    },
    {
        type: 'line',
        id: 'geojson-line',
        filter: ['match', ['sourceAttr', 'exampleCase'], ['line'], true, false],
        style: {
            color: '#9e02e0',
            width: 5,
        },
    },
    {
        type: 'point',
        id: 'geojson-point',
        filter: ['match', ['sourceAttr', 'exampleCase'], ['point'], true, false],
        style: {
            iconWidth: 16,
            textFont: ['Open_Sans', 'Open_Sans'],
            textField: ['get', 'NAME'],
            textFontSize: [16, 16],
        },
    },
];

map.on('styleload', () => {
    layers.forEach((layer) => map.addLayer(layer));
});

Слои содержат в поле filter атрибуты, которые вы можете указать на следующем шаге в опции attributes источников.

3. Подключите источники данных

В качестве опции data GeoJsonViewportSource принимает bbox-функцию, которая возвращает URL для запроса данных.

Подключите источники для каждого созданного слоя и установите навигацию в нужное место карты:

const WFS_POINTS_DATA_FN = (bbox: number[]) =>
    `http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3Apoi&maxFeatures=200&outputFormat=application%2Fjson&bbox=${bbox}&srcName=EPSG:4326`;
const WFS_LINES_DATA_FN = (bbox: number[]) =>
    `http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3Atiger_roads&maxFeatures=200&outputFormat=application%2Fjson&bbox=${bbox}&srcName=EPSG:4326`;
const WFS_POLYGONS_DATA_FN = (bbox: number[]) =>
    `http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3Apoly_landmarks&maxFeatures=200&outputFormat=application%2Fjson&bbox=${bbox}&srcName=EPSG:4326`;

const points = new mapgl.GeoJsonViewportSource(map, {
    data: WFS_POINTS_DATA_FN,
    attributes: { exampleCase: 'point' },
});

const lines = new mapgl.GeoJsonViewportSource(map, {
    data: WFS_LINES_DATA_FN,
    attributes: { exampleCase: 'line' },
});

const polygons = new mapgl.GeoJsonViewportSource(map, {
    data: WFS_POLYGONS_DATA_FN,
    attributes: { exampleCase: 'polygon' },
});

map.setCenter([-74.0104611, 40.70758763]);
map.setStyleZoom(12);

Укажите следующие параметры:

Для URL запроса данных:
- request=GetFeature: источник отображает данные с помощью bbox-функции, поэтому в качестве типа запроса используется GetFeature.
- maxFeatures: ограничение, которое действует при каждом запросе. Если вы удалите этот параметр, GeoServer вернёт все данные по bbox.
- srcName=EPSG:4326: обязательный параметр. По умолчанию источник отправляет запрос с bbox в этих координатах.
- outputFormat=application%2Fjson: обязательный параметр. По умолчанию источник работает только с GeoJSON.
data: имя bbox-функции.
exampleCase: атрибуты для связи данных источников и соответствующих им слоёв, которые вы добавили в поле filter на предыдущем шаге.

В результате вы увидите добавленные данные на карте:

Установка новой функции data

Вы можете изменить bbox-функцию у созданного источника, которую вы указали в опции data, с помощью метода setData.

В случае изменения запрашиваемых данных может потребоваться актуализировать атрибут источника. Например, чтобы установить bbox-функцию для запроса линий на источник с точечными данными:

points.setData(WFS_LINES_DATA_FN);
points.setAttributes({ exampleCase: 'line' });

Теперь данные этого источника вы можете использовать в стилевом слое для отображения линий.

Изменение запрашиваемой области данных

Настройка viewportPadding в опциях GeoJsonViewportSource позволяет расширить запрашиваемую область данных на указанное значение в пикселях. По умолчанию запрашиваемая область равна viewport (области видимости) экрана. Например:

const lines = new mapgl.GeoJsonViewportSource(map, {
    data: WFS_LINES_DATA_FN,
    attributes: { exampleCase: 'line' },
    viewportPadding: 500,
});

Чтобы расширить запрашиваемую область данных у созданного источника, используйте метод setViewportPadding:

lines.setViewportPadding(1000);