티스토리 뷰

내가 개발했던 환경

- 하이브리드 앱(안드 + 웹) hybrid App

- 전자정부프레임워크 eGov

- 알티베이스 Altibase

- 오픈소스 지도 api인 리플릿 Leaflet

 

 

 

선행 단계 - 내 위치 가져오기

링크 : 2019/07/12 - [개발] - 하이브리드앱에서 내 위치(좌표) 가져오기 #webview #javascriptinterface #gps

 

하이브리드앱에서 내 위치(좌표) 가져오기 #webview #javascriptinterface #gps

at ANDROID STUDIO public class MainActivity extends AppCompatActivity { private GpsInfo gps; //gps private String lat; //위도 private String lng; //경도 public static WebView webView = null; //웹뷰..

youngthugg.tistory.com

 

 

 

 

내 위치 좌표(예 : 37.262, 127.028)와 지정된 반지름을 가지고 circle을 그린다

var circle;
function drawCircle(lat, lng, distance){
	if(distance == "" || distance == null) distance = 500;	//기본 500m
	if(map.hasLayer(circle)){		
		map.removeLayer(circle);	//기존의 circle영역 삭제
	}
	circle = L.circle([lat, lng], distance, {
		color: 'green',
		fillColor: '#98FB98',
		fillOpacity : 0.5
	}).addTo(map);
};

 

 

 

 

그려진 circle의 북서, 북동, 남서, 남동의 좌표를 잡는다

var originNw = [circle.getBounds().getNorthWest().lat, circle.getBounds().getNorthWest().lng];
var originNe = [circle.getBounds().getNorthEast().lat, circle.getBounds().getNorthEast().lng];
var originSe = [circle.getBounds().getSouthEast().lat, circle.getBounds().getSouthEast().lng];
var originSw = [circle.getBounds().getSouthWest().lat, circle.getBounds().getSouthWest().lng];
var originCenter = [circle.getBounds().getCenter().lat, circle.getBounds().getCenter().lng];

//조합
var nW =  originNw[0]+ " " + originNw[1];
var nE =  originNe[0]+ " " + originNe[1];
var sE =  originSe[0]+ " " + originSe[1];
var sW =  originSw[0]+ " " + originSw[1];

//쿼리에 이용될 폴리곤 좌표
var polygon = nW + "," + nE + "," + sE + "," + sW + "," + nW;

위 빨간 사각형을 잡았다고 보면 된다

 

 

 

날린다.

var resultList = "";
$.ajax({
		type:		"POST",
		url:		"/test.do",
		data:		{polygon : polygon},
		dataType:	"json",
		success: function(data) {
			resultList = data.resultList;
		},
		error : function(request, status, error) {
			alert("에러가 발생하였습니다.");
		}
	});

 

 

 

쿼리

아래처럼 각 row마다 포인트로 GEOMFROMTEXT로 가져오게 되면 속도 이슈가 발생한다.

난 GEOMETRY타입의 컬럼 하나를 더 만들어서 기존의 X,Y데이터들을 모두 GEOMETRY컬럼으로 넣어 버렸다.

SELECT * FROM (
		SELECT
		/*+ RULE */
		GEOMETRY'POLYGON(($polygon$))' AS F1	--폴리곤 공간
		,GEOMFROMTEXT('POINT(' || T.X|| ' ' || T.Y ||')')) AS F2 -- row 각각의 포인트(좌표)
		FROM TABLE_NAME T
		) A
WHERE INTERSECTS(A.F1, A.F2)	--알티베이스 함수. 포함되냐?
		

 

 

 

이제  사각 폴리곤 내의 포인트들을 가져왔다.

원형의 공간 내에 존재하는 것들만 골라내자.

var makeLatLngBounds = function(listData){
	var arr = new Array();			//원 안의 포인트 데이터만 담을 ARRAY.
	var radius = circle.getRadius();//그려진 원의 반지름.
	
	$(listData).each(function() {
		//x,y를 리플릿 맵 내 좌표 계산등에 이용되는 함수에 담는다.
		var dataLatLng = new L.LatLng(this.x, this.y);
		//해당 포인트의 위치와 원의 중심(내위치중심)과의 거리가 반지름 보다 작으면 false.
		if(circle.getLatLng().distanceTo(dataLatLng) < radius){
			arr.push(this);//true면 array에 담는다.
		}
	});

	return arr;

};

 

 

 

 

골라내기와 뿌리기

var resultList = "";
$.ajax({
		type:		"POST",
		url:		"/test.do",
		data:		{polygon : polygon},
		dataType:	"json",
		success: function(data) {
			resultList = data.resultList;
			resultList = makeLatLngBounds(resultList);	//반경 내 결과물만 추출
            
            
            //이제 골라낸 결과 가지고 여기다가 맵관련 함수 써서
            //마커도 생성하거나 결과목록만 뿌려도 되고
            //마음대로 하면 됨
            
            
            
		},
		error : function(request, status, error) {
			alert("에러가 발생하였습니다.");
		}
	});

 

 

 

 

 

최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함