Skip to content

Image Map

Jump to bottom
Sung Gyun Oh edited this page Jul 24, 2018 · 1 revision

목차

  1. 요구 사항
  2. 기능 정의
  3. 라이브러리 선정

1. 요구 사항

1.1 편집 화면

  • 맵에 이미지 업로드가 가능 해야한다.
  • 이미지맵 내부에서 여러개의 맵을 추가 할 수 있어야 한다.
  • 이미지는 맵에 고정 될 수 있어야 한다.
  • 레이어 컴포넌트를 드래그/드랍으로 맵으로 위치 시킬 수 있어야 한다.
  • 레이어 컴포넌트는 목록에서 종류에 따라 클릭시 맵에 추가되거나 그리기의 경우 연속적인 클릭이 지원되어야 한다.
  • 멥과 이미지, 레이어 컴포넌트는 같은 스케일로 줌 인/아웃이 될 수 있어야 한다.
  • 레이어 컴포넌트는 각종 이벤트를 지원해야 한다
    • 드래그/드랍
    • 리사이즈
    • 로테이션
    • 클릭
    • 호버
  • 이미지와 레이어 컴포넌트는 단일 대상이 선택 되었을 경우, 속성 정보를 수정/저장을 할 수 있어야 한다.
  • Polygon, Line, Rect, Circle 등 도형 레이어 컴포넌트를 그릴 수 있어야 한다.
  • 레이어 컴포넌트는 다중 선택을 통해 그룹화할 수 있어야 한다.
  • 맵에 추가된 컴포넌트들은 트리 형태로 관리 되어, 트리에서 컴포넌트 추가/삭제/이동이 가능할 수 있어야 한다.
  • 유틸성 기능을 포함한 툴바를 지원해야 한다.
    • 마우스 커맨드 (기본, 그립, 셀렉션)
    • 정렬 (좌, 우, 중앙, 수직, 수평)
    • 줌 (인, 아웃, 1:1)
    • Undo/Redo
  • JSON 포맷으로 Export/Import가 가능해야 한다.
  • 레이어 컴포넌트는 상태를 정의 하여, 해당 상태를 동작 시킬 수 있어야 한다.
    • 다른 맵으로 이동
    • 외부 경로로 이동
    • 다른 대시보드로 이동
    • 리소스 이동
    • 다른 위젯이나 해당 이미젯 위젯 내에 리소스, 리소스타입, 지표 필터
  • 최종적으로 위젯 편집 후, 저장이 가능해야 한다.

1.2 뷰 화면

  • 맵에 놓여진 레이어 컴포넌트는 상태가 정의 되어 있을 경우, 해당 상태를 동작 시킬 수 있어야 한다.
    • 다른 맵으로 전환
    • 외부 경로로 이동
    • 다른 대시보드로 이동
    • 리소스 이동
    • 다른 위젯이나 해당 이미젯 위젯 내에 리소스, 리소스타입, 지표 필터
  • 이미지맵 위젯에서는 다른 맵으로 전환 시킬 수 있다.
  • 위젯 리사이즈시, 맵의 스케일과 맵의 넓이 능동적 변경
  • 편집 전용 유틸성 기능들이 제거되어야 한다.
  • 지표를 선택할 수 있는 레이어 컴포넌트는 기간 및 실시간 선택에 따른 조회가 가능해야 한다.

↑ 목차로 이동

2. 기능 정의

2.1 사용자 인터랙션

  • 드래그/드랍
  • 줌 인/아웃
  • 셀렉션
  • 클릭
  • Copy/Paste
  • Undo/Redo
  • 리사이즈
  • 로테이션
  • 정렬
  • 도형 그리기

2.2 위젯 기능

2.2.1 편집 화면

  • 맵 관리
    • 맵 추가/수정/삭제
  • 컴포넌트 관리
    • 트리 제공
    • 툴팁 설명 제공
    • 추가/복제/삭제/위치 이동/리사이즈/로테이션/그룹화
  • 컴포넌트 속성 관리
    • 툴팁 설명 제공
    • 초기화/수정/저장/커스텀 툴팁
  • Context Menu
    • 추가/복제/삭제
    • 순서 변경
  • 툴바
    • 마우스 커맨드 (기본, 그립, 셀렉션)
    • 정렬 (좌, 우, 중앙, 수직, 수평)
    • 줌 (인, 아웃, 1:1)
    • Undo/Redo
    • 복제
    • 삭제
  • 위젯
    • Import/Export
    • Preview
    • 취소/저장

2.2.2 뷰 화면

  • 컴포넌트 관리
    • Internal Link
      • Map
      • Resource
      • Dashboard
    • External Link
      • URL
    • Filter
    • 툴팁 제공
  • 위젯
    • Map Combobox
    • Fullscreen

2.3 속성

  • 위젯
    • 일반 위젯 속성
    • 툴팁
      • Enabled
      • Show Action
        • Hover
        • Click
    • Fullscreen
    • Zooming
    • Enabled Multiple Map
  • 맵
    • 일반
      • Responsive/Fixed
      • Name
      • Width
      • Height
      • Rotation
    • 이미지
      • 파일
      • URL
  • 레이어 컴포넌트
    • 일반
      • Name
      • Width
      • Height
      • Rotation
      • X Position
      • Y Position
      • Fixed
      • Visible
    • 꾸미기
      • Border
        • Color
        • Opacity
        • Width
        • Dashed
      • Background
        • Color
        • Opacity
    • 상태
      • Internal Link
        • Map
        • Dashboard
        • Resource
      • External Link
        • URL
      • Filter
        • Resource
        • ResourceType
        • MeasurementDefinition
    • 툴팁
      • Enabled
      • Show Action
        • Hover
        • Click
      • 텍스트 입력
      • Dom Element
    • 차트(?)
      • 지표 선택
      • 임계치 지정
      • 차트 위젯의 기본 설정 따라갈 예정
    • 테이블
      • 지표 선택
      • 임계치 지정
      • 테이블 위젯 기본 설정 따라갈 예정
    • 라벨
      • 텍스트 입력
    • 마커
      • 이미지
        • 파일
        • URL
    • 이미지
      • 맵에 크기 맞추기
      • 파일
      • URL
    • 도형
      • 그리기 (Polygon, Line, Rect, Circle)

↑ 목차로 이동

3. 라이브러리 선정

3.1 일반적인 측면

GoJS Fabric.js Konva Leaflet
GitHub Not Supported 10,395 2,760 21,899
Commit Not Supported Latest 8 days, 3,910 commits Latest 4 days, 2,248 commits Lastest 2 days, 6,582 commits
React Not Supported Not Supported Support Support
Maturity Very High High Middle Very High
Document Very High High High Middle
Reference Middle High Middle High
Difficulty Low Middle Middle Middle
Extension Not Supported Middle Middle Very High
Licence Pricing (Buy) MIT MIT BSD-2-Clause
Cross Browsing all modern browsers (IE9+), including mobile browsers. Firefox 2+, Safari 3+, Opera 9.64+, Chrome (all versions), IE10, IE11, Edge HTML5 canvas supported browser Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, including mobild browsers
Usage Diagram Editor Design Editor Design Editor Map
Web Site GoJS Homepage reference https://ludus.one https://pixteller.com General Supported Map in website

3.2 기능적인 측면

GoJS Fabric.js Konva Leaflet
Responsive Support Support Support Support
Normal Event Support Support Support Support
Resize Support Support Support Not Supported
Rotation Support Support Support Support
Grouping Support Support Support Not Supported
Multi Select Support Support Support Not Supported
Undo/Redo Support Not Supported Not Supported Not Supported
Copy/Paste Support Not Supported Not Supported Not Supported
Zoom Support Support Support Support
Selection Support Support Not Supported Not Supported
Alignment Support Not Supported Not Supported Not Supported
Tooltip Support Support Support Support
Drawing Shapes Support Support (Development) Support (Development) Support
Supported SVG Support Support Support Support
Supported Export Support Support Support Support
Clone this wiki locally