[Leaflet - GeoServer - WMS] GetFeatureInfo 이용한 customizing popup(팝업 커스텀)

이전글

[Leaflet - GeoServer - WMS] popup 레이어로 데이터 가져오기 (GetFeatureInfo)

thinkoutbox.tistory.com/55

Leaflet - GeoServer - WMS, popup 레이어로 데이터 가져오기

 

지난번, leaflet.wms.js 를 이용해 wms레이어를 띄운 leaflet에 gis데이터를 가져오는 것에 성공했다.

github.com/heigeo/leaflet.wms

 

하지만 자동으로 그려진 popup 테이블을 수정해야했는데, 나는 html을 만들어서 팝업 콘텐츠로 넣은 적이 없는데도

얘가 알아서 콘텐츠를 geoserver를 통해 가져오고, 그걸 테이블로 그린거다.

 

 

오늘도 구글링 일지를 써본다..

 

----

 

이 기능은 geoserver에서 제공하는 GetFeatureInfo Templates 이라고 한다.

docs.geoserver.org/latest/en/user/tutorials/GetFeatureInfo/index.html

 

html로도 만들수 있고, geoJSON으로도 만들 수 있다는데,

geoJSON으로는 가져와도 활용할 수 있는 방법을 아직 모르기때문에.. 패스...하고

html 구조를 바꾸는 것만으로 만족했다.

 

내용을 수정하려면 지오서버 서버에 파일을 만들어야한다.

 

---

 

 

지오서버설치폴더\data_dir\workspaces

에 content.ftl 이라는 파일을 만들자.

 

(이 폴더에다가 만들면 모든 워크스페이스에 적용된다. 원하는 워크스페이스, 혹은 레이어에만 적용하고 싶으면 해당 폴더 안에 이 파일을 만들면 된다고 한다.)

 

 

(공식홈페이지 문서에 있는 템플릿 소스)

<#--
Body section of the GetFeatureInfo template, it's provided with one feature collection, and
will be called multiple times if there are various feature collections
-->
<table class="featureInfo">
  <caption class="featureInfo">${type.name}</caption>
  <tr>
<#list type.attributes as attribute>
  <#if !attribute.isGeometry>
    <th >${attribute.name}</th>
  </#if>
</#list>
  </tr>

<#assign odd = false>
<#list features as feature>
  <#if odd>
    <tr class="odd">
  <#else>
    <tr>
  </#if>
  <#assign odd = !odd>

  <#list feature.attributes as attribute>
    <#if !attribute.isGeometry>
      <td>${attribute.value}</td>
    </#if>
  </#list>
  </tr>
</#list>
</table>
<br/>

이렇게 써넣으면 지금 만들어져있는 디폴트 레이아웃이 만들어 진다.

 

---

 

<ul>
<#list features as feature>
  <li><b>Type: ${type.name}</b> (id: <em>${feature.fid}</em>):
  <ul>
  <#list feature.attributes as attribute>
    <#if !attribute.isGeometry>
      <li>${attribute.name}: ${attribute.value}</li>
    </#if>
  </#list>
  </ul>
  </li>
</#list>
</ul>

이렇게 table이 아닌 ul을 이용할 수도 있다.

 

${attribute.name} 와 ${attribute.value} 같은 변수를 이용해서 템플릿을 만들면 된다.

 

 

---

 

적당히 템플릿의 dom구조를 만들고나서

css를 이용하여 스타일을 바꿔줬다.

 

오늘은 여기까지.ㅎㅎ