문제: 전단지는 단일 타일 레이어를 지원하지 않습니다.

(2017년 미디엄에 게시된 글입니다)

즉, 다음과 같이 geoserver에서 생성된 일부 동적 클러스터를 렌더링해야 하는 경우:

전단지에는 대신 다음과 같은 내용이 표시됩니다.

엉망이야. 다행스럽게도 우리(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에서 사회적, 제도적, 행정적 데이터를 표시하기 위해 사용하는 지리 정보 시스템(GIS)입니다. 당신은 당신에게 PR을 보내는 것을 환영합니다 =)