Skip to content

Google GIS #
Find similar titles

You are seeing an old version of the page. Go to latest version

Structured data

Category
Etc

구글 맵을 이용한 GIS 정보 표현방법 #

본 소개는 jsp & 자바스크립트상에서 구글맵을 이용하여 GIS를 표현하였으며, 일일 쿼리 요청에 따라 무료 및 유료로 사용할 수 있다. 우선 제일 먼저 해야 jsp에 상단에 api를 로드해준다. 뒤에 파라미터값은 변경될 수 있다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&language=en"></script>

본 방법에 대한 전제는 무수히 많은 지역에 대한 정보만 가지고 있으며 그정보를 이용하여 구글맵에 표현을 한다.

먼저 주요 코드를 보자. 첫번째로 지역에 대해 geocode값을 가져오는 부분이다. 이 함수를 이용하여 무수히 많은 지역에 대한 위도,경도 정보를 DB에 저장을 한다.

function searchGeocode(region){
    geocoder.geocode({'address': region}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT || status == google.maps.GeocoderStatus.OK) {
            document.searchVO.nation.value=region;
            document.searchVO.lat.value = results[0]['geometry']['location']['lat']();
            document.searchVO.lng.value = results[0]['geometry']['location']['lng']();
            alert('주소 : ' + region + '\n\n위도 : ' + document.searchVO.lat.value + '\n\n경도 : ' + document.searchVO.lng.value);
        }else{
            alert(region + " is not found.");
        }
    });
}

두번째로 DB에 저장된 값을 조회해 구글맵에 뿌려주는 부분이다. 먼저 DB에서 지역, 지역카운트, 위도, 경도에 대한 부분을 모두 배열로 가지고 온 뒤 split를 통해 각 지역에 대한 위도 경도 카운트 정보를 맵에 뿌린다.

var map;
var pointArray, heatmap;
var heatMapData = [];
var marker;

function geocode(_sido, _sidoCnt, _lat, _lng) 
{   
    var sido = _sido.split(","); 
    var sidoCnt = _sidoCnt.split(","); 
    var lat = _lat.split(","); 
    var lng = _lng.split(","); 
    if(_sido == "null" && _lat == "null" && _lng == "null"){
        alert("Not found Result.");
    }else{
        for(var j in sido){
            if(sido[j] == "null" || sidoCnt[j] == "null" || lat[j] == "null" || lng[j] == "null"){
                //
            }else{
                onGeocodeResult(sido[j], sidoCnt[j], lat[j], lng[j]);
            }
        }
    }

    heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapData,
          radius: 40,
          dissipating: true
    });
    heatmap.setMap(map);
}


function onGeocodeResult(sido, sidoCnt, lat, lng, content){
    marker = new google.maps.Marker({  
        map:map,
        draggable:false,
        animation:google.maps.Animation.DROP,
        position: new google.maps.LatLng(lat, lng) ,
        title:sido//'Click to statics'
    });

    var weightedLoc = {      
            location: new google.maps.LatLng(lat, lng),     
            weight: 2 * sidoCnt//Math.pow(2,sidoCnt)    
    };

    heatMapData.push(weightedLoc);

    var myOptions = {
            zoom: 7
    };

    map.setOptions(myOptions);

    google.maps.event.addListener(marker,'click',function() {
        selectIsolateCnt(sido);
    });

    map.panTo(new google.maps.LatLng(lat,lng));
}

jsp부분에는 다음과 같이 명시해주면 맵이 뜨게 된다.


다음으로 jsp가 로딩될때 구글 맵을 생성해주는 부분이다. 위의 코드보다 제일 먼저 실행되며 이 구문이 포함되어 있지 않으면 구글맵을 사용할수 없다.

0.0.1_20210630_7_v33