티스토리 뷰

GIS

OpenLayers에서 지도위에 레이어 추가하기

wldnjd2 2022. 4. 8. 10:54

 

 

이전 게시글에서는 Geoserver에 레이어를 발행하고, 레이어를 OpenLayer로 띄워보았다.

그리고 OpenLayers 홈페이지에서 웹으로 지도를 불러와서 띄우는 코드를 보며 공부했었다.

https://openlayers.org/en/latest/examples/

 

OpenLayers Examples

 

openlayers.org

 

 

이번에는 Geoserver에 올려놓은 레이어들을 지도 위에 불러오는 포스팅을 해보겠다.

 

 

vscode live server 이용하면 더욱 편하게 코딩할 수 있당

https://stajun.tistory.com/entry/Visual-Studio-Code-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EC%84%9C%EB%B2%84Live-Server-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

 

Visual Studio Code] 라이브서버(Live Server) 설정하기

Visual Studio Code(현재 1.34.0버전, 이후 VS Code로 표기)에서 라이브 서버를 설정하는 방법에 대해 살펴보자. 라이브 서버를 이용하면 파일 수정 후 저장하면 수정된 내용이 바로 저장된다. 1. 라이브

stajun.tistory.com

 

 

작업환경 

- Visual Studio Code

- Live Server를 이용

 

 

레이어 데이터 확인

내가 지도위에 쌓을 레이어의 데이터를 확인해야한다.

GeoServer -> 레이어 미리보기 -> OpenLayers

 

 

위의 주소창 url 데이터를 메모장에 복사 붙여넣기 해보면, 아래와 같은 데이터들을 확인할 수 있다.

http://localhost:8090/geoserver/jwkim/wms
?service=WMS
&version=1.1.0
&request=GetMap
&layers=jwkim%3Aadmin_emd
&bbox=179171.578125%2C536569.125%2C216220.796875%2C566855.5
&width=768
&height=627
&srs=EPSG%3A5186
&format=application/openlayers

 

 

WMS란?

GIS 데이터에 접근하기 위한 인터페이스로써 웹을 통해 지도 이미지형식으로 서비스하는 것을 말한다.

따라서 필자는 WMS를 이용해서 지도위에 레이어를 쌓을것이다.

 

위의 데이터를 아래의 params 값으로 넣어준다

이때 format은 image/png로 해줘야한다.

//layer추가
var wmsLayer = new ol.layer.Tile({
  visible:true,
  source : new ol.source.TileWMS({
    url : 'http://localhost:8090/geoserver/jwkim/wms',
    params : {
      'version' : '1.1.0',
      'request' : 'GetMap',
      'layers' : 'jwkim:admin_emd',
      'bbox' : ['179171.578125', '536569.125', '216220.796875', '566855.5'],
      'width' : '768',
      'height' : '627',
      'srs' : 'EPSG:5186',
      'format' : 'image/png'
    },
    serverType : 'geoserver',
  })
});

map.addLayer(wmsLayer);

 

 

결과

 

 

전체코드
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 1200px;
        width: 100%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>레이어 추가</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
  
    //layer추가
    var wmsLayer = new ol.layer.Tile({
      visible:true,
      source : new ol.source.TileWMS({
        url : 'http://localhost:8090/geoserver/jwkim/wms',
        params : {
          'version' : '1.1.0',
          'request' : 'GetMap',
          'layers' : 'jwkim:admin_emd',
          'bbox' : ['179171.578125', '536569.125', '216220.796875', '566855.5'],
          'width' : '768',
          'height' : '627',
          'srs' : 'EPSG:5186',
          'format' : 'image/png'
        },
        serverType : 'geoserver',
      })
    });

    //지도
    var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({source: new ol.source.OSM()}),
          
        ],
        view: new ol.View({
            projection: 'EPSG:900913',
            center: ol.proj.fromLonLat([127, 37.5]),
            zoom: 10
        })
    });

    map.addLayer(wmsLayer);

    //Full Screen 버튼
    var myFullScreenControl = new ol.control.FullScreen();
    map.addControl(myFullScreenControl);

   </script>
  </body>
</html>

 

 

여러 레이어 중첩하기

한번에 많은 레이어를 불러오다보니까 엄청 느려졌다.. 하하

위에 단일문을 복붙하였다. 시간날때 메서드로 바꿔보자.

 

 

 

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 1200px;
        width: 100%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>레이어 추가</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
  
    //admin_emd layer추가
    var admin_emd = new ol.layer.Tile({
      visible:true,
      source : new ol.source.TileWMS({
        url : 'http://localhost:8090/geoserver/jwkim/wms',
        params : {
          'version' : '1.1.0',
          'request' : 'GetMap',
          'layers' : 'jwkim:admin_emd',
          'bbox' : ['179171.578125', '536569.125', '216220.796875', '566855.5'],
          'width' : '768',
          'height' : '627',
          'srs' : 'EPSG:5186',
          'format' : 'image/png'
        },
        serverType : 'geoserver',
      })
    });

    //admin_sgg layer추가
    var admin_sgg = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:admin_sgg',
              'bbox' : ['179171.578125', '536569.125', '216220.796875', '566855.5'],
              'width' : '768',
              'height' : '627',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //admin_sid layer추가
    var admin_sid = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:admin_sid',
              'bbox' : ['179171.65625', '536569.125', '216220.640625', '566855.3125'],
              'width' : '768',
              'height' : '627',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //building layer추가
    building = new ol.layer.Tile({
    // var building = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:building',
              'bbox' : ['198237.6875', '536769.8125', '208468.21875', '547033.625'],
              'width' : '765',
              'height' : '768',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });


    //firestation layer추가
    var firestation = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:firestation',
              'bbox' : ['187630.765625', '541616.875', '212591.015625', '562717.5625'],
              'width' : '768',
              'height' : '649',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });


    //healthcenter 추가
    var healthcenter = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:healthcenter',
              'bbox' : ['188136.5', '539746.625', '211089.703125', '562047.9375'],
              'width' : '768',
              'height' : '746',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //policestation 추가
    var policestation = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:policestation',
              'bbox' : ['186727.828125', '541685.9375', '211232.9375', '561549.0625'],
              'width' : '768',
              'height' : '622',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //river 추가
    var river = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:river',
              'bbox' : ['179220.40625', '537515.3125', '215692.96875', '566031.0625'],
              'width' : '768',
              'height' : '600',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //road_link2 추가
    var road_link2 = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:road_link2',
              'bbox' : ['181825.078125', '536813.125', '216154.171875', '565854.8125'],
              'width' : '768',
              'height' : '649',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //road_link_geographic 추가
    var road_link_geographic = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:road_link_geographic',
              'bbox' : ['126.794357299805', '37.4306793212891', '127.182807922363', '37.6923599243164'],
              'width' : '768',
              'height' : '517',
              'srs' : 'EPSG:4326',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //stores 추가
    var stores = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:stores',
              'bbox' : ['182205.53125', '539181.5625', '213761.59375', '563138.0625'],
              'width' : '768',
              'height' : '583',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //subway 추가
    var subway = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:subway',
              'bbox' : ['182127.671875', '536496.9375', '215355.609375', '567087.3125'],
              'width' : '768',
              'height' : '707',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //subway_station 추가
    var subway_station = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:subway_station',
              'bbox' : ['182443.375', '539637.0625', '214706.734375', '565563.9375'],
              'width' : '768',
              'height' : '617',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });

    //wardoffice 추가
    var wardoffice = new ol.layer.Tile({
          visible:true,
          source : new ol.source.TileWMS({
            url : 'http://localhost:8090/geoserver/jwkim/wms',
            params : {
              'version' : '1.1.0',
              'request' : 'GetMap',
              'layers' : 'jwkim:wardoffice',
              'bbox' : ['186697.421875', '539727.4375', '210930.453125', '563255.0625'],
              'width' : '768',
              'height' : '745',
              'srs' : 'EPSG:5186',
              'format' : 'image/png'
            },
            serverType : 'geoserver',
          })
        });



    //지도
    var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({source: new ol.source.OSM()}),
          
        ],
        view: new ol.View({
            projection: 'EPSG:900913',
            center: ol.proj.fromLonLat([127, 37.5]),
            zoom: 12
        })
    });
	//층이 쌓이는 원리이기때문에 순서가 중요하다.
     map.addLayer(admin_sid);
     map.addLayer(admin_sgg);
     map.addLayer(admin_emd);
     map.addLayer(river);
     map.addLayer(building);                
     map.addLayer(road_link_geographic);
     map.addLayer(road_link2);
     map.addLayer(subway);
     map.addLayer(policestation);
     map.addLayer(stores);
     map.addLayer(wardoffice);              
     map.addLayer(subway_station);
     map.addLayer(healthcenter);            
     map.addLayer(firestation);              
  
     

    //Full Screen 버튼
    var myFullScreenControl = new ol.control.FullScreen();
    map.addControl(myFullScreenControl);

   </script>
  </body>
</html>

 

 

Error 해결

1. 지도에 레이어가 안올라가는 문제가 있었는데

원인은 데이터 값을 param 값에 제대로 입력하지 않아서 였다

주소창의 데이터 값에서 %2C와 %3A의 값도 데이터인줄 알고 ㅋㅋㅋ ㅜ 같이 적었다

심지어 약간 형태가 이상해서 이거 혹시 16진수인가 해서 10진수로 변환해서도 데이터를 바꿔서 적었는데 해결이 안되었어서 사알짝쿵 멘붕이 왔는데 선배님이 와서 보고 해결해 주셨다.

이게 뭔지는 다음 게시글로 올려야겠다.

 

 

2. 다른 데이터는 멀쩡히 올라가는데 안올라가는 데이터도 있었다.

레이어 편집에 가서 좌표계 값을 수정하거나, 레이어 최소경계 영역을 수정해보면서 해결하였다.

 

 

3. 코드를 작성하면서 문제가 하나 있었는데 코드 순서가 중요하다

예를들어 맵을 위에다가 addLayer를 데이터 받아오기 전에 먼저 써주면 페이지가 동작하지 않는다.

그리고 addLayer 순서도 어떤 레이어를 위에 보이게 할지 생각해야하기 때문에 순서도 따져야한다.

 

 

 

 

 

 

2022.04.07 - [GIS] - Geoserver에서 파일 import 해보기

 

Ref.

https://zzang9iu.tistory.com/26

 

geoserver 맵 발행 및 openlayers 연동.

geoserver란 gis웹 엔진이다. geoserver에서 지도를 발행하여 oepnlayer를 이용해 발행한 지도를 표출해준다.  수동적으로 geoserver에서 지도를 발행해보자!(나중에는 java restapi를 이용하여 동적으로 지도.

zzang9iu.tistory.com

 

저작자표시 비영리

'GIS' 카테고리의 다른 글

VWorld API (Feat. OSM)  (0) 2022.04.13
CentOS에서 Geoserver 설치하기  (0) 2022.04.08
Geoserver에서 파일 import 해보기  (0) 2022.04.07
CentOS7에서 PostGIS 설치 (postgis25_12)  (0) 2022.04.07
파일의 좌표계 확인하기  (1) 2022.04.07
댓글