새로운 WebGIS 구성 요소 기반 개발 도구

SuperMap 클라우드 GIS 클라이언트 개발 플랫폼인 SuperMap iClient JavaScript Vue 구성 요소 라이브러리가 도입되었습니다. MVVM 모델 (Model-View-ViewModel) 아키텍처 설계에서 사용되며, 다른 프레임워크(: React, Angular Native H5 개발)와도 호환됩니다.

구성 요소 라이브러리를 직접 사용할 수 있습니다. 현재 2D 3D 지도 구성 요소, 지리적 시각화 구성 요소, 차트 구성 요소 및 기본 GIS 구성 요소를 제공합니다. SuperMap iClient Vue 구성 요소 라이브러리를 사용하면 사용자 정의된 WebGIS 응용 프로그램을 빠르게 생성할 수 있습니다.

구성 요소 기반 개발 방식은 다양한 시스템의 다른 기능의 결합을 줄이고 , 개발 난이도 및 비용 문제를 해결할 수 있으며 시스템 확장성과 개발 효율성을 향상시킵니다.

 

SuperMap iClient Vue 구성 요소 라이브러리 아키텍처

SuperMap iClient Vue 구성 요소 라이브러리는 널리 사용되는 MVVM 솔루션을 채택합니다. 이 솔루션은 데이터 계층(M)과 보기 계층(V) VM(비즈니스 로직 계층)을 통해 서로 연결되고 변경 내용이 동기화되므로 지도 페이지 상호 작용이 높은 일관성을 유지합니다. 동시에, 서로 다른 계층의 낮은 결합을 기반으로, M 계층과 VM 계층을 프레임워크 전체에서 재사용할 수 있습니다. 사용자가 React 프레임워크를 사용하려면 React V 도면층 상호 작용만 다시 작성하면 됩니다.

 

SuperMap iClient Vue 구성 요소 라이브러리 아키텍처

 

풍부한 구성 요소 라이브러리

SuperMap iClient Vue 구성 요소 라이브러리는 다음과 같은 기본 애플리케이션 관련 구성 요소를 제공합니다. (, 시각화, 차트, 도구 구성 요소 포함)

 

 

 

단일 구성 요소의 파일 구조

전체 SuperMap iClient Vue 구성 요소에는 템플릿, 유형, 상호 작용 및 기타 내용이 포함됩니다. 개발자는 구성 요소의 내부 구현 논리를 고려하지 않고 속성, 기능, 이벤트 처리 등의 구성 요소에 따라 컨텐츠를 호출할 수 있습니다. 개발자들에게, 구성 요소는 완전한 블랙박스입니다. 예를 들어 OpenFile을 사용하여 파일 구성 요소를 열면 파일 구조는 다음과 같이 표시됩니다.

 

OpenFile 구성 요소의 파일 구조

 

 

구성 요소를 사용하여 응용 프로그램 Block-build하기

예를 들어, 사용자가 LayerList 계층 목록 구성 요소를 맵에 추가하려면템플릿태그에웹 맵계층 목록태그를 추가하고 맵 서비스 주소와 맵 ID를 할당하여 수행할 수 있습니다.

 

 

구성 요소는 여러 계층으로 동시에 패키징할 수 있습니다. 여러 위젯은 외부 호출을 위한 대규모 구성 요소로 패키징됩니다. 구성 요소 기반 개발은 개별 구성요소를 분할하여 블록 구성요소와 유사한 전체 시스템에 통합합니다. 예를 들어 산업 응용 프로그램 WebAPP WebMap 맵 구성 요소를 여러 차트 테이블 구성 요소 및 텍스트 구성 요소와 결합하여 패키징하여 구축할 수 있습니다.

 

 

다국어 지원

SuperMap iClient Vue 구성 요소는 해당 언어 팩을 로드하여 여러 언어를 지원합니다. 사용자의 프로젝트에서 플러그인 vue-i18n 이미 사용한 경우 SuperMap iClient Vue 구성 요소를 사용할 호환성 문제를 걱정할 필요가 없습니다. SuperMap iClient Vue vue-i18n 플러그인과 완전히 호환됩니다.

 

SPH는 CARTO, Google Maps, SuperMap 등 다양한 케이스에 적용될 수 있는 다채로운 제품군을 보유하고 있으며 고객의 사례에 꼭 맞는 무료 세미나 및 개별 컨설팅을 제공하고 있습니다. 각 케이스에 맞춰 더욱 자세한 이야기를 나누고 싶으시다면 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS/로케이션 인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해 주시길 바랍니다. 감사합니다.