반응형


- 현재 지도 map 의 extent 가져오기 -


현재 보고있는 map 화면의 영역(extent) 를 가져오자


일단 지도를 띄우기 위해 코드를 작성한다.



<!doctype html>
<html lang="ko">
  <head>
    <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
    <style>
      #map {
        height800px;
        width100%;
      }
    </style>
    <script 
src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js">
</script>
    <title>OpenLayers-vworld</title>
  </head>
  <body>
    <h2>OpenLayers_MAP</h2>
    <div id="map" ></div>
  </body>
    <script type="text/javascript">
     
     //기본지도
     var baseMap = new ol.layer.Tile({
            source: new ol.source.XYZ({
                 //Vworld Tile 변경
                 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
             })
          });

     var map = new ol.Map({
        target : 'map',
        layers: [baseMap],
        view: new ol.View({
                center: [14126669.415892474493404.190498611],
                zoom: 7,
                minZoom: 7,
                maxZoom: 19
            })
      });

    </script>
</html>


그러면 이제 앞에 작성해왔던 게시글 처럼 기본적인 지도가 화면에 출력된다.


아래가 지도 화면이다.



여기서 이제 현재 보고 있는 영역(extent)를 뽑아보자.


명령어로 딱 한줄만 쓰면된다.


map.getView.calculateExtent()


이다.



map.getView().calculateExtent()
// [12962380.601052666, 4004207.209473483, 15290958.230732275, 4982601.171523739]



https://openlayers.org/en/latest/apidoc/module-ol_View-View.html


ol apidoc 에서 확인 가능한 하다 (문서 양이 많으니 calculateExtent로 찾아보자.)


반응형