В контексте работы с MapLibre GL JS ограничение области поиска сводится к управлению тем, какие географические данные доступны для отображения, запроса и анализа в пределах заданного пространственного окна. Этот механизм используется на нескольких уровнях: от ограничения перемещения карты до фильтрации результатов пространственных запросов и геокодирования.
На уровне самой карты ключевым инструментом выступает параметр maxBounds, который фиксирует допустимую область панорамирования.
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [37.6173, 55.7558],
zoom: 10,
maxBounds: [
[37.0, 55.3], // юго-западная граница
[38.5, 56.2] // северо-восточная граница
]
});При задании maxBounds карта перестаёт «уезжать» за пределы указанного прямоугольника. Это ограничение не влияет на данные напрямую, но определяет рабочую географическую зону интерфейса.
Дополнительно используется метод:
map.setMaxBounds([
[37.0, 55.3],
[38.5, 56.2]
]);Он позволяет динамически изменять область допустимого перемещения.
Операция fitBounds применяется для фокусировки карты на определённой области и часто используется как косвенный способ ограничения рабочего региона.
map.fitBounds([
[37.0, 55.3],
[38.5, 56.2]
], {
padding: 20,
maxZoom: 12
});Хотя fitBounds не блокирует выход за пределы региона, он задаёт начальную и логическую область интереса, что часто используется в связке с maxBounds.
В MapLibre GL JS доступен механизм запросов к отрисованным объектам через методы:
Ограничение области поиска здесь реализуется через передачу bounding box или области экрана.
const bbox = [
[37.2, 55.5],
[37.9, 55.9]
];
const features = map.queryRenderedFeatures(
map.project(bbox[0]).x,
map.project(bbox[0]).y,
map.project(bbox[1]).x,
map.project(bbox[1]).y
);Чаще используется более корректная форма через прямоугольник экрана:
const features = map.queryRenderedFeatures([
[100, 100],
[400, 400]
], {
layers: ['cities-layer']
});Таким образом ограничение области поиска становится не географическим напрямую, а экранно-пространственным, что важно для интерактивных сценариев.
Ограничение области поиска может быть реализовано на уровне источника данных через фильтрацию по атрибутам или геометрии.
map.addLayer({
id: 'cities',
type: 'circle',
source: 'cities-source',
filter: ['all',
['>=', ['get', 'population'], 100000],
['<=', ['get', 'population'], 1000000]
]
});Хотя это не пространственное ограничение напрямую, фильтрация уменьшает «поисковое пространство» объектов.
GeoJSON источники могут быть заранее ограничены по географическому прямоугольнику на стороне подготовки данных.
Пример предварительной фильтрации:
function filterByBBox(features, bbox) {
return features.filter(f => {
const [minX, minY, maxX, maxY] = bbox;
const [x, y] = f.geometry.coordinates;
return x >= minX && x <= maxX && y >= minY && y <= maxY;
});
}После такой подготовки в источник передаются только объекты, попадающие в заданную область.
При использовании геокодеров (например, maplibre-gl-geocoder) область поиска ограничивается через параметр bbox.
const geocoder = new MaplibreGeocoder(geocodingClient, {
maplibregl,
bbox: [37.0, 55.3, 38.5, 56.2]
});Такой подход заставляет сервис возвращать только результаты, находящиеся внутри заданного прямоугольника.
Некоторые реализации поддерживают дополнительное ограничение через proximity:
proximity: {
longitude: 37.6173,
latitude: 55.7558
}Это не жёсткое ограничение, а смещение ранжирования результатов.
Векторные и растровые источники могут быть ограничены параметром bounds.
map.addSource('tiles', {
type: 'vector',
tiles: [
'https://example.com/tiles/{z}/{x}/{y}.pbf'
],
minzoom: 5,
maxzoom: 14,
bounds: [37.0, 55.3, 38.5, 56.2]
});Параметр bounds влияет на то, какие тайлы считаются допустимыми для загрузки, уменьшая объём сетевых запросов и ограничивая область данных.
Хотя MapLibre GL JS не выполняет полноценные пространственные запросы на клиенте, можно имитировать ограничение области через атрибуты, содержащие координатные границы.
map.setFilter('cities', [
'all',
['>=', ['get', 'lon'], 37.0],
['<=', ['get', 'lon'], 38.5],
['>=', ['get', 'lat'], 55.3],
['<=', ['get', 'lat'], 56.2]
]);Такой подход используется, когда данные заранее содержат координаты в виде свойств.
События moveend и move позволяют реализовать динамическое ограничение области поиска.
map.on('moveend', () => {
const bounds = map.getBounds();
const features = map.queryRenderedFeatures({
layers: ['cities']
});
});Здесь область поиска всегда соответствует текущему viewport, что создаёт «локализованный» контекст данных.
Кластеризация снижает плотность объектов в пределах текущего масштаба, фактически ограничивая «область значимых данных».
map.addSource('points', {
type: 'geojson',
data: 'points.geojson',
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});Кластеры агрегируют данные внутри пространственных радиусов, уменьшая количество объектов, участвующих в поиске и отрисовке.
Ограничение области поиска напрямую связано с производительностью. Чем уже географический диапазон:
Особенно критично это при работе с плотными слоями точек и динамическими запросами к данным.
Ограничение области поиска в MapLibre GL JS формируется как многослойная система, включающая географические границы карты, пространственные запросы, фильтрацию источников, ограничения геокодирования и контроль загрузки тайлов, что позволяет точно управлять видимым и вычисляемым пространством данных без изменения их исходной структуры.