[發(fā)明專利]一種基于Vue的WebGIS的可視化配置方法和系統(tǒng)

有效

• 申請?zhí)枺?/td>: 202011221876.0
• 申請日: 2020-11-05
• 公開（公告）號: CN112434117B
• 公開（公告）日: 2021-07-30
• 發(fā)明（設計）人: 黃劍華;劉輝;趙瑞祥;梁生紅
• 申請（專利權）人: 廣州和辰信息科技有限公司
• 主分類號: G06F16/29
• 分類號: G06F16/29;G06F16/957
• 代理公司: 廣州名揚高玥專利代理事務所(普通合伙) 44738
• 代理人: 武麗華

1.一種基于Vue的WebGIS的可視化配置方法，其特征在于，包括如下步驟：

步驟1，基于Vue實現(xiàn)地圖適配器，通過地圖適配器的對WebGIS前端框架進行適配；

步驟2，模塊管理器ModuleManager對不同WebGIS框架的API的模塊進行的按需加載；

步驟3，界面管理器UIMananger對組件進行加載管理；

步驟4，圖層管理器對地圖的圖層進行加載管理，包括瓦片服務、要素服務、wms服務、wfs服務以及覆蓋物圖層，所有圖層采用http協(xié)議請求服務數(shù)據(jù)和加載，判斷圖層為TileLayer、FeatureLayer、WMSLayer、WFSLayer或GraphicLayer中的一種或多種時，根據(jù)所述地圖適配器所適配的WebGIS API采用對應的圖層加載API對圖層進行實例化，通過Map對象的addLayer方法加載在地圖上，其中，所述覆蓋物圖層包括點、線、面，所述TileLayer表示瓦片圖層，所述FeatureLayer表示要素圖層，所述WMSLayer表示W(wǎng)MS圖層，所述WFSLayer表示W(wǎng)FS圖層，所述GraphicLayer表示覆蓋層；

步驟5，通過定義地圖、圖層、組件的JSON Schema，對地圖、圖層、組件的JSON配置進行驗證；分別定義地圖、圖層、組件的JSON Schema的type、required、properties，其中地圖的properties詳細定義maptype、xmin、ymin、xmax、ymax、wkid屬性，圖層的properties詳細定義id、layertype、url、title、visible、token、xmin、ymin、xmax、ymax屬性，組件的id、name、type、position、index、templete、config屬性；properties的每個屬性定義type來約定是String、Number還是Object類型，并定義minLength、maxLength、maximum、minimum、pattern來約定具體的規(guī)則，并采用Aju.validate方法對已定義的JSON Schema規(guī)則進行驗證，其中，所述minLength表示最小長度，所述maxLength表示最大長度，所述maximum表示最大數(shù)值，所述minimum表示最小數(shù)值，所述pattern表示正則表達式，Aju為開源的JSON Schema驗證器；

步驟6，通過JSON配置及可視化解析WebGIS應用的地圖、圖層、組件，形成WebGIS的應用；

步驟7，采用Vue的component動態(tài)加載的方式對地圖、組件、圖層進行加載，并對地圖的初始化位置、地圖比例尺、坐標系統(tǒng)基本進行配置可視化渲染，對組件的界面位置進行配置可視化渲染，對圖層的初始化可見性、圖層范圍、圖層覆蓋物的符號化進行配置可視化渲染，渲染后輸出Html生成WebGIS應用，其中，當識別地圖JSON配置時，Vue component實例化并mount加載mapContainer的DOM節(jié)點；當識別組件的JSON配置時,循環(huán)遍歷配置數(shù)組的組件類型，Vue component實例化并mount形成DOM，通過document.getElementById('component')的appendChild方法加載到界面相應的DOM節(jié)點上；當識別圖層的JSON配置，循環(huán)遍歷配置數(shù)組的圖層類型，通過Vue component實例化后，采用圖層管理器中Map對象的addLayer方法進行加載，其中，Vue component的實例化時通過propsData屬性進行參數(shù)傳遞，對地圖、組件、圖層屬性初始化配置。

2.如權利要求1所述的一種基于Vue的WebGIS的可視化配置方法，其特征在于，所述步驟1進一步包括：通過使用npm(node.js包管理工具)安裝各種WebGIS API框架，以多頁面應用模式MPA(Mutil-page Application)來兼容保證各個API互不干擾。

3.如權利要求1所述的一種基于Vue的WebGIS的可視化配置方法，其特征在于，所述步驟2進一步包括：使用AMD(Asynchronous Module Definition異步模塊定義)與vue-router配置路由結合的方式進行按需加載，其中，所述AMD負責對WebGIS API框架按需加載，而vue-router對頁面進行按需加載。