공간 데이터베이스 서비스 이용하기

2025. 1. 10. 10:38ㆍ프로그래밍/GIS

728x90

아주 오래전에 OpenLayers 를 좀 써본 거 이외에는 거의 오픈소스를 사용해 본적이 없었습니다.

요즘은 Leaflet 이라는 라이브러리가 인기라고 하네요

 

1. 서비스 클라이언트 만들기

다음 사이트에서 소스를 얻어 왔습니다.

 

 

Example Leaflet Add WMS From GeoServer

Example Leaflet Add WMS From GeoServer. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

이름을 index.html 이라고 하고 띄워보면 다음과 같이 보여 집니다.

어느나라 말일까요? 힌두어인가?

여하튼 호노룰루는 아니네요...

일단 호노룰루로 이동해야 할 것으로 보입니다. 호노룰루로 이동해 볼 려면 저번에 알아놓은 아래 좌표를 이용해야 할 것입니다.

MinX : -158.27313232421875
MinY : 21.255352020263672

MaxX : -157.65646362304688
MaxY : 21.708740234375

중심점을 계산 해보면,

CenterX : -157.9647979736328
CenterY : 21.482046127319336

입니다. 소스코드에 대입해 보면 되겠습니다.

index_HONOLULU.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>Example Leaflet Add WMS From GeoServer</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  </head> 
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
  </style>
  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
	
    var map = new L.Map('map', { center: new L.LatLng(21.482046127319336,-157.9647979736328), 
                                zoom: 14, 
                                attributionControl:true, 
                                zoomControl:false,
                                minZoom:6});
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  	var osm = new L.TileLayer(osmUrl,
                              {minZoom: 8, 
                               maxZoom: 18, 
                               attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});
    map.addLayer(osm);
	
    var wmsLayer1= L.tileLayer.wms("http://gservices.gistda.or.th/geoserver/wms", {
        layers: 'L02_Thaichote_GISTDA_2m:L02_ThaichoteNorth_GISTDA_2m_pm',
        format: 'image/png',
        transparent: true
    });
    map.addLayer(wmsLayer1);

    var wmsLayer2= L.tileLayer.wms("http://ows.gistda.or.th/geoserver/wms", {
        layers: 'fgds54_beta:L06_Transportation_MOT_road_2011_50k',
        format: 'image/png',
        transparent: true
    });
    map.addLayer(wmsLayer2);
    
    </script>
</html>

제대로 나온듯 하네요...

 

맞는 지는 레벨을 좀 낮춰봐야 할 것이고, wms 서비스는 해당 좌표와 맞지 않으므로 빼버리도록 하겠습니다.

변경 소스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>Example Leaflet Add WMS From GeoServer</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  </head> 
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
  </style>
  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
	
    var map = new L.Map('map', { center: new L.LatLng(21.482046127319336,-157.9647979736328), 
                                zoom: 11, 
                                attributionControl:true, 
                                zoomControl:false,
                                minZoom:6});
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  	var osm = new L.TileLayer(osmUrl,
                              {minZoom: 8, 
                               maxZoom: 18, 
                               attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});
    map.addLayer(osm);
	
    </script>
</html>

 

실행 화면

이제 좀 어딘지 알 것 같네요...호노룰루

 

2. 공간 서비스 요청 -로컬

그럼 여태까지 만들어 놓은 호노룰루 데이터를 반영해 보도록 하겠습니다. 위에 올리기 앞서 데이터들이 제대로 만들어져 있는지에 대해서 먼저 알아보도록 하겠습니다.

소스를 약간 고쳐보면 되겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>Example Leaflet Add WMS From GeoServer</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  </head> 
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
  </style>
  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
	
    var map = new L.Map('map', { center: new L.LatLng(21.482046127319336,-157.9647979736328), 
                                zoom: 11, 
                                attributionControl:true, 
                                zoomControl:false,
                                minZoom:6});
    
	
	var wmsLayer1= L.tileLayer.wms("http://localhost:8080/geoserver/CCH/wms", {
        layers: 'CCH:address_points,CCH:building_footprints__cch_,CCH:ohana,CCH:pim_lines',
        format: 'image/png',
        transparent: true
    });
    map.addLayer(wmsLayer1);
	
    </script>
</html>

실행 화면

 

2. 공간 서비스 요청 -통합

최종적으로 오픈스트리트 맵과 통합해서 표시해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>Example Leaflet Add WMS From GeoServer</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  </head> 
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
  </style>
  <body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
	
    var map = new L.Map('map', { center: new L.LatLng(21.482046127319336,-157.9647979736328), 
                                zoom: 11, 
                                attributionControl:true, 
                                zoomControl:false,
                                minZoom:6});
    
	var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  	var osm = new L.TileLayer(osmUrl,
                              {minZoom: 8, 
                               maxZoom: 18, 
                               attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});
    map.addLayer(osm);
	
	var wmsLayer1= L.tileLayer.wms("http://localhost:8080/geoserver/CCH/wms", {
        layers: 'CCH:address_points,CCH:building_footprints__cch_,CCH:ohana,CCH:pim_lines,CCH:sewer_lateral,CCH:sewer_main',
        format: 'image/png',
        transparent: true
    });
    map.addLayer(wmsLayer1);
	
    </script>
</html>

표시된 지도는 다음과 같습니다.

 

마치면서

공간 데이터베이스에서 부터  지도 서비스 중 하나인 wms 서비스를 만들어 보았습니다. 부족한 부분들이나 좀 더 상세화 해야 할 부분이 너무 많다는 것을 느끼네요

  • 폴리곤 레이어는 올리지 못했습니다. LOD 를 적용해야 하는 데 적용하려면 시간이 오래 걸리겠죠.
  • 스타일 적용도 못했습니다. 스타일은 해본 경험이 거의 없어서 만들려면 시간이 또 오래 걸리겠죠...

 

하지만, 데이터만 있으면 나만의 지도를 만들어 볼 수 있다는 생각을 해봐도 되는 세상이 되었다는 것을 새삼 느끼는 하루였네요...

이상.

728x90

'프로그래밍 > GIS' 카테고리의 다른 글

공간 데이터베이스 서비스하기  (0) 2025.01.09
공간 데이터베이스 구성하기  (0) 2025.01.08
PostgreSQL과 PostGIS 설치  (0) 2025.01.07
[OSRM] Chat GPT와 함께하는 TSP - 지도 표시  (1) 2024.12.09
[OSRM] Chat GPT와 함께하는 TSP - 마무리  (1) 2024.12.06

관련글

댓글 0

티스토리툴바