오픈API openlayers 샘플 - 지오빅데이터 오픈플랫폼

구현지도

소스코드

<!DOCTYPE html>
<html>

<head>
   <title>지오빅데이터 오픈플랫폼 지도 오픈API 샘플</title>
   <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
   <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>

<body>
   <div id="map" style="height: 80vh"></div>
   <div id="info"></div>
   <script>

var wmsSource = new ol.source.TileWMS({
  url: 'https://data.kigam.re.kr/openapi/wms',
  params: {
    'key' : '인증키', // 오픈API 신청을 통해 발급된 인증키
    'LAYERS': 'L_250K_Geology_Map', // 레이어명
    'TILED': true
  },
});
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
      source: wmsSource
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [14268200.235611122, 4294263.171405556],
    zoom: 8
  })
});
  map.on('singleclick', function (evt) {
    var url = wmsSource.getGetFeatureInfoUrl(
     evt.coordinate,
     map.getView().getResolution(),
     map.getView().getProjection(),
     { 'INFO_FORMAT': 'text/html' });
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((html) => {
      document.getElementById('info').innerHTML = html;
      });
  }
})
  </script>
</body>