<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>국가인터넷지도 | 국토위성지도 오픈API 샘플</title> <link rel="stylesheet" href="/nlsc/emap/css/map/OpenLayers-6.4.3.css" type="text/css"> <script type="text/javascript" src="/nlsc/emap/js/jquery/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="/nlsc/emap/js/map/OpenLayers-6.4.3.js"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script> <script type="text/javascript" src="http://map.ngii.go.kr/openapi/wmts_ngiiMap_v6.4.3.js?apikey=[apikey]"></script> <style type="text/css"> .hybrid{ margin-left: -42px; list-style:none; } </style> <script> var map1; window.onload = function(){ map1 = new ngii_wmts.map("map1",{ mapMode:11 }); $("#hybrid").change(function(){ if($(this).is(':checked') == true){ map1._setHybridMap(true); } else{ map1._setHybridMap(false); } }); }; </script> </head> <body> <div id="map1" style="width:700px;height:700px;"></div> <ul class="hybrid"> <li> <label> <input type="checkbox" id="hybrid" name="hybrid" value="hybrid"> 하이브리드 </label> </li> </ul> </body> </html>