The New WebGIS Component-based Development Tool

27 June,2019

As a cloud GIS web client development platform of SuperMap, SuperMap iClient JavaScript introduces a Vue component library. The MVVM model (Model-View-ViewModel) is used in the architecture design, and it is also compatible with other frameworks, for instance, React and Angular and Native H5 development.

The component library can be used directly. Currently, it provides 2D and 3D map components, geographic visualization components, chart components, and basic GIS components. By using the SuperMap iClient Vue component library, the customized WebGIS applications can be quickly created.

The component-based development method reduces the coupling of the different functions of various system, the development difficulties and cost, and improves the system scalability and the development efficiency.

SuperMap iClient Vue Component Library Architecture

The SuperMap iClient Vue component library adopts the popular MVVM solution, in which the data layer (M) and the view layer (V) are connected to each other through the business logic layer (VM), and their changes are synchronized, so that the map page interactions remains high consistency. At the same time, based on the low coupling of different layers, the M layer and the VM layer can be reused across the framework. If users want to use the React framework, they only need to rewrite the V layer interaction with React.

SuperMap iClient Vue Component Library Architecture

Bountiful Component Library

The SuperMap iClient Vue component library introduces basic application-related components, includes:
Map Components, Visualization Components, Chart Components and Tool Components.

The File Structure of the Single Component

A complete SuperMap iClient Vue component contains templates, types, interactions and other contents. Developers can call the contents according to the component elements of attribute, functions, and event handling without considering the internal implementation logic of the component. For developers, the component is a complete black box. For instance, when open the file component with OpenFile, its file structure will show as follows:

The file structure of the OpenFile Component

Use Components to Block-build Application

For instance, if users want to add a LayerList layer list component to the map, it can be conducted through adding the "webmap" and "layer-list" tags in the "template" tag, and assigning the map service address and map id.

The components can be packaged in multiple layers at the same time. The multiple widgets are packaged into a large component for external calls. The component-based development splices individual components and integrates them into a complete system which is similar to the blocks building. For instance, an industry application WebAPP can be built by combining and packing a WebMap map component with multiple Chart table components and text components.

Internationalization: Support for Multi-language

The SuperMap iClient Vue component supports multiple languages by loading the corresponding language packs. If users’ project has already used the plug-in vue-i18n, there is no need to worry about compatibility issues when using the SuperMap iClient Vue component. The SuperMap iClient Vue is fully compatible with the vue-i18n plugin.

More Articles