질문:
행정구역 폴리곤 데이터를 DB에 쌓고, 네이버 지도에 폴리곤을 표기할 수 있을까요?
답변:
폴리곤 데이터를 저장하는 방법은 다양합니다. 데이터는 상황에 맞고 편리한 방식으로 저장하시고, 셀렉트 어드민에서는 JS를 통해 네이버지도 폴리곤 양식에 맞게 가공할 수 있습니다.
간단한 방법은 아래와 같습니다. (*참고용 예제입니다.)
폴리곤 데이터를 단일 테이블에 저장합니다. 각 폴리곤의 좌표를 JSON 형식으로 저장하면 됩니다. SQL 데이터베이스에서 JSON 데이터 유형을 지원하는 경우 이를 활용할 수 있습니다.
1. 단일 테이블 설계
Polygons 테이블: 폴리곤의 정보와 좌표를 JSON 형식으로 저장합니다.
CREATE TABLE Polygons (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
color VARCHAR(7) DEFAULT '#ff0000', -- 폴리곤 색상
coordinates JSON NOT NULL, -- 좌표를 JSON 형식으로 저장
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
2. 데이터 삽입 예시
좌표를 JSON 형식으로 삽입할 수 있습니다.
예를 들어:
INSERT INTO Polygons (name, color, coordinates) VALUES
('구역1', '#ff0000',
'[[37.37544345085402, 127.11224555969238], [37.37230584065902, 127.10791110992432], [37.35975408751081, 127.10795402526855], [37.359924641705476, 127.11576461791992], [37.35931064479073, 127.12211608886719], [37.36043630196386, 127.12293148040771], [37.36354029942161, 127.12310314178465], [37.365211629488016, 127.12456226348876], [37.37544345085402, 127.11224555969238]]');
3. 데이터 조회 예시
저장된 데이터를 불러올 때는 다음과 같이 쿼리를 작성할 수 있습니다:
SELECT
id,
name,
address,
color,
coordinates
FROM
Polygons;
4. JavaScript에서 데이터 사용하기
이제 JSON 형식으로 저장된 데이터를 rows 형태로 불러올 수 있습니다.
(*셀렉트 어드민에서는 응답값이 rows로 전달됩니다.)
response 예시:
{
"message": "ok",
"rows": [
{
"id": 1,
"name": "구역1",
"color": "#ff0000",
"coordinates": [[37.37544345085402, 127.11224555969238], [37.37230584065902, 127.10791110992432], [37.35975408751081, 127.10795402526855], [37.359924641705476, 127.11576461791992], [37.35931064479073, 127.12211608886719], [37.36043630196386, 127.12293148040771], [37.36354029942161, 127.12310314178465], [37.365211629488016, 127.12456226348876], [37.37544345085402, 127.11224555969238]]
}
// 다른 폴리곤 객체들...
],
"cached_timezone": "Asia/Seoul",
"has_autolimit": false
}
5. 코드에서 JSON 데이터 사용하기
JavaScript에서 coordinates를 사용하여 폴리곤을 그릴 수 있습니다.
예를 들어:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT "[[37.37544345085402, 127.11224555969238], [37.37230584065902, 127.10791110992432], [37.35975408751081, 127.10795402526855], [37.359924641705476, 127.11576461791992], [37.35931064479073, 127.12211608886719], [37.36043630196386, 127.12293148040771], [37.36354029942161, 127.12310314178465], [37.365211629488016, 127.12456226348876], [37.37544345085402, 127.11224555969238]]" AS coordinates
# sql: >
# SELECT
# id,
# name,
# address,
# color,
# coordinates
# FROM
# Polygons;
display: map
displayFn: |
// 폴리곤 그리기
rows.forEach(function(row) {
// JSON 문자열을 파싱하여 좌표 배열로 변환
var coordinates = JSON.parse(row.coordinates);
// 좌표를 naver.maps.LatLng 객체로 변환
var path = coordinates.map(function(coord) {
return new naver.maps.LatLng(coord[0], coord[1]);
});
// 폴리곤 표시
var polygon = new naver.maps.Polygon({
map: map,
paths: [path],
fillColor: row.color || '#ff0000', // 기본 색상 설정
fillOpacity: 0.3,
strokeColor: row.color || '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 3
});
});
이렇게 하면 단일 테이블을 사용하여 폴리곤 데이터를 저장하고 관리할 수 있으며, 좌표를 JSON 형식으로 저장하여 유연하게 사용할 수 있습니다.
결과 이미지
참고자료
관련하여 도움이 필요하시거나 오류가 있다면 말씀해주세요.
감사합니다.