구글 어스, 구글 지도에 사용하는 KML 파일을 업로드하여 도형객체를 지도위에 가시화 합니다.
사용하는 라이브러리는 KML.js, KMZ.js 입니다.
javascript
function openKML(url, bZoom){
if (!_xml){
// xml 태그로 구성된 kml 파일을 로드합니다
_xml = {_str2xml : function(strXML){
if (window.ActiveXObject)
{
var doc=new ActiveXObject('Microsoft.XMLDOM');
doc.async='false';
doc.loadXML(strXML);
}
// code for Mozilla, Firefox, Opera, etc.
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(strXML,'text/xml');
}// documentElement always represents the root node
return doc;
}, _xml2string : function(xmlDom){
var strs = null;
var doc = xmlDom.documentElement;
if(doc.xml == undefined){
strs = (new XMLSerializer()).serializeToString(xmlDom);
}else strs = doc.xml;
return strs;
}
};
}
var ext = /[^.]+$/.exec(url);
var fname = url.substring(url.lastIndexOf('/')+1).replace('.'+ext,'');
// kml 객체를 생성합니다
var thisKML= new L.KMZ(url,{
imageOverlayBoundingBoxCreatePopUp: true,
imageOverlayBoundingBoxDrawOptions: { stroke: false,
weight: 1,
fillOpacity: 0.0,
clickable: true}
}, ext[0]);
// kml 객체를 지도위에 추가합니다
thisKML.addTo(mymap);
// kml 객체가 지도위에 로드 되었을 때 발생하는 이벤트입니다
thisKML.on('loaded',function(e){
// kml 의 좌표값
var mbr = thisKML.getBounds();
if (bZoom != false){
bZoom = true;
}
if (bZoom) {
// 지도영역에 kml 의 좌표값을 설정합니다
mymap.fitBounds(mbr);
}
});
}