GIS의 데이터 포맷인 SHP 파일을 업로드하여 도형객체와 속성정보를 지도위에 가시화 합니다.
사용하는 라이브러리는 shp.js이며, 한글 인코딩 처리를 하기 위해 encoding-indexes.js, encoding.js를 사용합니다.
javascript
// 업로드한 shp 파일을 실행하여 지도 위에 가시화 하는 함수 입니다
function openShpFile(url) {
var lineColor = {"color": "#0F2FFD","weight": 2,"opacity": 0.65}; // 선과 면 색상을 지정합니다
// geoJson 객체를 생성합니다
var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
var out = [];
if (f.properties){
for(var key in f.properties){
out.push(key+": "+f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}, style : lineColor}).addTo(mymap);
// shp 파일을 실행하여 데이터를 조회합니다
shp(url).then(function(data){
var geoDataLen = data.features.length; // 실행한 shp 파일의 객체 수를 저장합니다
if(geoDataLen != 0){
// 지도 영역에 지리적 경계를 추가하여 설정합니다
mymap.fitBounds([
[37.3550, 126.97777777],
[37.7300, 126.99999999]
]);
}
// geoJson 객체에 shp 객체를 추가하여 지도위에 가시화 합니다
geo.addData(data);
});
}