티스토리 뷰
QGIS - postGIS- GeoServer - Leaflet을 이용하여 웹에 gis의 데이터를 뿌려주는 페이지를 만들고 있다.
지난번에는 리플렛을 이용해 QGIS의 데이터를 퍼블리싱하는 것까지 성공했다.
Leaflet - GeoServer - WMS layer 로 GIS 지도 퍼블리싱하기
QGIS - postGIS- GeoServer - Leaflet을 이용하여 웹에 gis의 데이터를 뿌려주는 페이지를 만들고 있다. (QGIS의 로컬 데이터를 PostgreSQL 를 이용해 웹에 올리고 GeoServer까지 가는 과정에서 배운 것들은 다음..
thinkoutbox.tistory.com
GIS에 담긴 객체 뿐만아니라 데이터도 가져와야 했는데,
나는 기존에 맵 api를 통해 위경도로 마커를 만들고... 그 위에 이벤트를 통해 인포 윈도우로 데이터를 보여주는 것만 해봤는데..
wms레이어를 사용해서 지도를 만든 이번 상황에서는 이걸 어떻게 해야 할지 감도 잡히지 않았다.
(아직도 객체별로 클릭해서 인포윈도우(리플렛에서는 팝업)를 만드는 방법은 모른다....OTL)
끝없는 구글링 끝에.. leaflet.wms.js 라는 레퍼런스를 발견했다..!!
데모를 보면 wms를 이용해 만들어진 지도를 클릭하면 그 위치에 해당하는 레이어의 정보가 팝업으로 뜬다.
[아래의 링크를 통해 데모를 확인해보세요]
heigeo.github.io/leaflet.wms/examples/
내가 딱 원하는 기능....!!
아래는 위의 샘플 파일을 다운받아서
내 프로젝트에 반영하여 필요한 것만 남긴 소스 코드
-----
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>leaflet.wms Examples</title>
<script src="./lib/require.js" data-main="app"></script>
<link rel="stylesheet" type="text/css" href="./lib/leaflet.css">
<style>
html,body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="tiled-map" class="map"></div>
</body>
</html>
app.js
requirejs.config({
'baseUrl': './lib',
'paths': {
'leaflet.wms': '../src/leaflet.wms' //.js'
}
});
define(['leaflet', 'leaflet.wms'],
function(L, wms) {
var tiledMap = createMap('tiled-map', true);
function createMap(div, tiled) {
// Map configuration
var map = L.map(div);
map.setView([37.568,126.993035], 17);
// 베이스맵 설정
var basemaps = {
'OpenStreetMap': basemap().addTo(map),
'Blank': blank()
};
// Add WMS source/layers
var source = wms.source(
"wms url을 여기에 입력하세요",
{
"format": "image/png",
"transparent": "true",
"attribution": "<a href='attribution url'>attribution name</a>",
"info_format": "text/html",
"tiled": tiled,
}
);
// 레이어 설정
var layers = {
'레이어이름1': source.getLayer("레이어이름1").addTo(map),
'레이어이름2': source.getLayer("레이어이름2").addTo(map),
};
// 레이어 선택창 생성
L.control.layers(basemaps, layers).addTo(map);
}
// 오픈스트리트맵으로 베이스맵을 설정
function basemap() {
var attr = '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
return L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: attr
});
}
// 베이스맵 없는 상태
function blank() {
var layer = new L.Layer();
layer.onAdd = layer.onRemove = function() {};
return layer;
}
});
---
여러개의 레이어를 동시에 퍼블리싱하는 것과
지도 클릭시 해당 위치의 데이터를 보여주는 것 까지 성공했다.
나는 테이블을 만든적이 없지만 얘가 알아서 저렇게 만들어서 보여준다.
(나중에 알고보니 이건 geoserver의 GetFeatureInfo라는 기능이었는데, 이 내용은 다음 포스팅에서 다루겠다)
---
이 과정에서 처음에는 지도를 클릭하면
No ‘Access-Control-Allow-Origin’ header is present on the request......라는 CORS 오류가 떴다.
이 이슈 해결에 대해서는 다른 포스팅에서 다루겠다.
[추가]
[Leaflet - GeoServer] cross domain 문제 해결하기 (CORS)
[Leaflet - GeoServer] cross domain 문제 해결하기 (CORS) - (No 'Access-Control-Allow-Origin' header is present on the reque
thinkoutbox.tistory.com/55 Leaflet - GeoServer - WMS, popup 레이어로 데이터 가져오기 QGIS - postGIS- GeoServer - Leaflet을 이용하여 웹에 gis의 데이터를 뿌려주는 페이지를 만들고 있다. 지..
thinkoutbox.tistory.com
---
다음에는 저 팝업 안에 담긴 테이블을 원하는대로 바꾸는 것을 포스팅할 예정이다.
[추가]
[Leaflet - GeoServer - WMS] GetFeatureInfo 이용한 customizing popup(팝업 커스텀)
[Leaflet - GeoServer - WMS] GetFeatureInfo 이용한 customizing popup(팝업 커스텀)
thinkoutbox.tistory.com/55 Leaflet - GeoServer - WMS, popup 레이어로 데이터 가져오기 QGIS - postGIS- GeoServer - Leaflet을 이용하여 웹에 gis의 데이터를 뿌려주는 페이지를 만들고 있다. 지..
thinkoutbox.tistory.com