구글 어스, 구글 지도에 사용하는 KMZ 파일을 업로드하여 도형객체를 지도위에 가시화 합니다.
사용하는 라이브러리는 KML.js, KMZ.js, zip.js 입니다.
javascript
// 업로드한 kml 파일을 실행하여 지도 위에 가시화 하는 함수 입니다
function openKML(url, bZoom){
// kmz 는 바이너리 파일 이므로 압축 파일 해제를 실행합니다
if (!zip.workerScriptsPath){
zip.workerScriptsPath = '/cmworld2d/resources/lib/zip/';
}
if (!_xml){
// xml 태그로 구성된 kmz 파일을 로드합니다
_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,'');
// kmz 객체를 생성합니다
var thisKMZ= new L.KMZ(url,{
imageOverlayBoundingBoxCreatePopUp: true,
imageOverlayBoundingBoxDrawOptions: { stroke: false,
weight: 1,
fillOpacity: 0.0,
clickable: true}
}, ext[0]);
// kmz 객체를 지도위에 추가합니다
thisKMZ.addTo(mymap);
// kmz 객체가 지도위에 로드 되었을 때 발생하는 이벤트입니다
thisKMZ.on('loaded',function(e){
// kmz 의 좌표값
var mbr = thisKMZ.getBounds();
if (bZoom != false){
bZoom = true;
}
if (bZoom) {
// 지도영역에 kmz 의 좌표값을 설정합니다
mymap.fitBounds(mbr);
}
});
}