[OpenLayers] vworld 배경지도(map) 나타내기

-OpenLayers vworld 배경지도 나타내기-

OpenLayers를 처음 사용하게되면 지도부터 띄우게 되는데

가장 기초적인 부분으로

OpenLayers를 사용하여 vworld 배경지도를 나타내보자.

<!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 {
            height: 800px;
            width: 100%;
        }
    </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 map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
             source: new ol.source.XYZ({
             //Vworld Tile 변경
             url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
             })
          })
        ],
        view: new ol.View({
          center: [14126669.41589247, 4493404.190498611],
          zoom: 7,
          minZoom: 7,
          maxZoom: 19
        })
      });
  </script>
</html>