도형을 보내고, 편집 결과를 돌려받으세요
서비스 페이지에서 편집 창을 열고 도형 데이터를 보내세요. 사용자가 편집을 완료하면 결과가 원래 서비스 페이지로 전달됩니다. 받은 결과를 화면에 반영하거나 서버에 저장할 수 있습니다.
서비스 페이지와 편집 창, 두 화면을 연결합니다
서비스 페이지는 여러분이 만드는 웹서비스의 화면입니다. 지도 화면, 관리자 화면, 입력 폼에서 편집 버튼을 제공할 수 있습니다. 자바스크립트로 데이터를 보내고 결과를 받을 수 있으면 됩니다.
| 화면 | 하는 일 |
|---|---|
| 서비스 페이지 | 편집 창을 열고 편집할 데이터를 보냅니다. 편집 결과를 받아 자신의 화면과 데이터에 반영합니다. |
| 편집 창 | Termia 편집기가 열리는 새 창입니다. 받은 도형을 표시하고 편집 도구를 제공하며, 편집 완료 시 결과를 서비스 페이지로 보냅니다. |
다른 도메인의 서비스에서도 연결할 수 있습니다
자바스크립트를 추가할 수 있는 HTTPS 웹서비스라면 도메인이 달라도 연결할 수 있습니다. 공개 편집기의 기본 설정에서는 별도 도메인 등록이 필요하지 않습니다. HTTP·로컬 개발 주소는 연결 조건을 확인하세요.
열기 → 데이터 보내기 → 편집 결과 받기
- 1. 편집 창 열기서비스 페이지의 버튼을 누르면 편집 창이 열립니다. 원래 서비스 페이지는 결과를 받을 때까지 열어 둡니다.
- 2. 편집할 데이터 보내기편집 창의 준비가 끝나면 정해진 JSON 형식으로 도형을 보냅니다. 빈 도형 목록을 보내 새로 그리기부터 시작할 수도 있습니다.
- 3. 편집 결과 받기사용자가 편집을 완료하면 서비스 페이지가 최종 도형 목록을 받습니다. 취소하면 서비스 페이지의 기존 데이터를 유지합니다.
점·선·다각형을 보낼 수 있으며, 기존 지도 라이브러리는 그대로 사용할 수 있습니다. 서비스 개발자는 데이터 전송과 결과 처리를 연결합니다. Termia 편집기의 설치·배포나 내부 코드 수정은 필요하지 않습니다.
편집 완료, 결과 반영, 서버 저장은 각각의 동작입니다
| 동작 | 담당 화면 | 결과 |
|---|---|---|
| 편집 완료 | 편집 창 | 최종 편집 데이터를 서비스 페이지로 보냅니다. |
| 결과 반영 | 서비스 페이지 | 받은 결과로 화면과 보관 중인 도형 데이터를 갱신합니다. |
| 서버에 저장 | 서비스 페이지 | 필요하면 자신의 저장 API를 호출해 결과를 영구 보관합니다. |
편집 결과에는 최종 도형 목록 전체가 들어갑니다. 삭제된 도형은 빠지고 숨긴 도형은 포함됩니다. 참고로 조회한 경계는 사용자가 도형에 추가하거나 합친 부분만 결과에 반영됩니다. 편집 창에서 완료했다고 서비스 서버에도 자동 저장되는 것은 아닙니다.
서비스 페이지로 결과가 돌아오는 흐름을 체험하세요
아래 예제에서는 이 문서가 서비스 페이지 역할을 합니다. 편집 창으로 도형을 보내고, 편집을 완료하면 받은 결과로 아래 지도와 JSON을 갱신합니다. 실제 편집 창의 완료 버튼 이름은 ‘저장하고 편집 완료’입니다.
폴리곤·선·마커가 각각 1개씩 준비되었습니다.
사각형은 권역, 선은 예제 경로, 마커는 경로의 시작 위치입니다. 실제 지적·행정 경계나 공식 관람 동선은 아닙니다. 처음 열린 편집 창에서 경복궁 주변을 확대해 보세요. 이 예제는 서버에 저장하지 않으며 새로고침하면 초기화됩니다.
편집 창에 보낼 데이터 JSON
각 필드의 목적을 주석으로 적은 JSONC 예제입니다. ‘JSON 복사’를 누르면 주석 없는 실제 데이터를 복사합니다. 편집 창에는 이 데이터를 INIT 메시지의 scene 객체로 보냅니다.
{ // 필수: 편집 창과 주고받는 데이터 형식의 버전입니다. 현재는 2를 사용합니다. "version": 2, // 선택: 편집 데이터 전체의 이름입니다. 편집 결과에도 포함됩니다. "name": "경복궁 권역 편집", // 필수: 새 창에 표시할 도형 목록입니다. []이면 도형 없이 시작합니다. // 여러 도형을 넣으면 배열 뒤쪽 도형이 지도 위에 겹쳐 그려집니다. "features": [ { // 선택: 저장 후 같은 도형을 찾기 위한 고유 ID입니다. // 생략하면 자동 생성됩니다. 같은 목록 안에서 중복될 수 없습니다. "id": "gyeongbokgung-area", // 선택: 도형 목록과 지도 라벨에 표시할 이름입니다. "name": "경복궁 예제 권역", // 선택, 기본 false: false는 편집 가능, true는 잠금 상태로 시작합니다. // 사용자가 화면에서 잠금을 해제할 수 있으므로 접근 권한 설정은 아닙니다. "locked": false, // 선택, 기본 true: 지도에 표시할지 정합니다. // false로 숨겨도 도형 데이터는 편집 결과에 포함됩니다. "visible": true, // 필수: 실제 위치와 모양을 나타내는 GeoJSON geometry입니다. "geometry": { // Polygon은 면적을 가진 다각형입니다. "type": "Polygon", // WGS84 [경도, 위도] 순서입니다. 첫 번째 링은 바깥 경계이며, // 뒤에 링을 추가하면 다각형 내부에서 비워 둘 구멍이 됩니다. "coordinates": [ [ [126.972, 37.5745], // 남서쪽 꼭짓점 [126.982, 37.5745], // 남동쪽 꼭짓점 [126.982, 37.5855], // 북동쪽 꼭짓점 [126.972, 37.5855], // 북서쪽 꼭짓점 [126.972, 37.5745], // 첫 좌표를 반복해 바깥 경계를 닫습니다. ], ], }, // 선택: 서비스에서 쓰는 업무 정보를 도형에 붙여 보관합니다. // 이 도형의 좌표를 편집해 저장해도 함께 돌려받습니다. "properties": { // 예제 서비스의 권역 ID입니다. 필드명과 값은 서비스에서 자유롭게 정합니다. "serviceAreaId": "palace-001", }, }, { // 같은 도형 목록에 선을 추가합니다. 폴리곤 위에 그려집니다. "id": "gyeongbokgung-route", "name": "경복궁 예제 경로", "locked": false, "visible": true, "geometry": { // LineString은 두 개 이상의 좌표를 순서대로 잇는 선입니다. "type": "LineString", // Polygon의 링보다 배열이 한 단계 얕습니다. 첫 점으로 닫을 필요가 없습니다. "coordinates": [ [126.976, 37.577], // 시작점: 아래 마커와 같은 위치 [126.976, 37.5795], // 경유점 [126.979, 37.5815], // 도착점: 실제 관람 동선이 아닌 연습용 경로입니다. ], }, "properties": { // 좌표를 수정한 뒤에도 이 업무 ID로 서비스의 경로 데이터와 연결합니다. "routeId": "palace-route-001", }, }, { // 마지막에 넣어 선과 폴리곤 위에 표시할 위치 마커입니다. "id": "gyeongbokgung-marker", "name": "경복궁 예제 마커", "locked": false, "visible": true, "geometry": { // Point는 지도에 핀 모양의 마커로 표시됩니다. "type": "Point", // 좌표 목록이 아닌 [경도, 위도] 한 쌍입니다. 예제 경로의 시작 위치입니다. "coordinates": [126.976, 37.577], }, "properties": { // 서비스에서 장소를 식별하는 업무 ID입니다. 필드명은 자유롭게 정합니다. "placeId": "palace-marker-001", }, }, ],}직접 그리기와 보낸 도형 편집은 로그인 없이 사용할 수 있습니다. 공개 편집기의 참고 경계를 사용할 때 필요한 로그인은 편집 창에서 안내합니다.
이 문서에서 사용하는 용어
| 용어 | 뜻 |
|---|---|
| 편집 데이터 | 편집할 도형 목록과 관련 설정을 담은 데이터 전체 |
| 도형 | 점·선·다각형 하나. 도형 여러 개를 묶어 도형 목록이라고 합니다. |
| 편집 결과 | 편집을 마친 뒤 서비스 페이지가 돌려받는 전체 편집 데이터 |
| 참고 경계 | 도형을 만들거나 수정할 때 참고하는 행정동·법정동·우편번호 등의 경계 |
| 권역 | 배송구역·영업구역처럼 서비스에서 관리하는 구역 |
다음으로 필요한 안내를 선택하세요
| 하려는 일 | 안내 |
|---|---|
| 편집할 데이터를 보내고 결과 처리하기 | 서비스 페이지에 연결하는 코드 예제 |
| 도형을 그리고 수정하는 방법 알아보기 | 편집 도구 안내 |
| 지도 화면에 편집 결과를 반영하는 예제 보기 | 지도 연동 데모 |
| 편집기를 직접 배포하거나 내부 기능 바꾸기 | 직접 운영·커스텀 |