Проблема: Лифлет не поддерживает один тайловый слой
Это означает, что если вам нужно отрендерить какой-то динамический кластер, сгенерированный геосервером, вот так:
Листовка вместо этого покажет что-то вроде этого:
Который испорчен.
К счастью, мы (я и Арлиндо Перейра из MPRJ) нашли обходной путь, используя элемент ImageOverlay из Leaflet, который довольно прост, но на его поиск ушло много времени.
React-leaflet — это библиотека, предоставляющая компоненты для работы с листовкой. Таким образом, он предоставляет реагирующие компоненты, такие как Map, TileLayer, WMSTileLayer и так далее. Он также предоставляет ImageOverlay. Чтобы заставить это работать, вам нужно использовать компонент ImageOverlay следующим образом:
<ImageOverlay bounds={imageBounds} url={imageURL} transparent={true}/>
Где imageBounds должен быть объектом Leaflet Bounds, который должен быть границей для текущей видимой части карты, например:
{
“_southWest”:
{
“lat”:-24.27701247166408,
”lng”:-46.65893554687501}
}
”_northEast”:
{
“lat”:-21.927759064052037,
”lng”:-37.86987304687501
}
}
Параметр imageURL — это URL-адрес службы, которая будет генерировать изображение, и должен быть таким:
let imageURL = `${ENDPOINT}?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&STYLES&LAYERS=${layer.layerName}&SRS=EPSG%3A4326&WIDTH=${clientWidth}&HEIGHT=${clientHeight}&BBOX=${imageBounds._southWest.lng}%2C${imageBounds._southWest.lat}%2C${imageBounds._northEast.lng}%2C${imageBounds._northEast.lat}`
Это вызов WMS. Главное, на что следует обратить внимание, это атрибуты Height, Width и Bbox. Высота и ширина должны быть в пикселях и, так сказать, связаны с размером карты в вашем приложении. Наша карта подходит под html документ, поэтому получилось так:
let clientHeight = document.body.clientHeight let clientWidth = document.body.clientWidth
А Bbox — это та же самая координата, о которой упоминалось ранее.
Вы можете увидеть, как это было раньше:
А как сейчас:
Или здесь, в прямом эфире: http://apps.mprj.mp.br/sistema/inloco/
Здесь, чтобы увидеть код: https://github.com/MinisterioPublicoRJ/inLoco-2.0
InLoco — это географическая информационная система (ГИС), используемая Ministério Público do Estado do Rio de Janeiro для отображения социальных, институциональных и административных данных, созданных с помощью React и Leaflet, взаимодействующих с общедоступной серверной частью GeoServer. Вы можете отправить вам PR =)
