以項目談WebGIS中Web製圖的設計和實現

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景介紹

通常WebGIS項目中，前端展現數據的流程基本是先作數據入庫、服務發佈、而後前端調用展現。假設用戶沒有基本的GIS背景，須要將本地的excel或CSV等文件快速在地圖上進行展現，此需求該如何解決？

目前市場上針對解決這種需求的產品已陸續出現，好比mapbox的studio，esri的portal，超圖的地圖慧以及由超圖原項目經理離職後創辦的地圖無憂等產品。這類產品通常都以雲服務的概念來包裝，提供本地文件的Web製圖，相關空間分析，數據的編輯，共享等。這裏，我以公司某項目來談談我的對此類需求的設計和實現。

2.產品設計

研究市場上成熟的產品會發現二八定律是普遍存在的，好比esri的portal中提供了大量的空間分析功能，可是這些功能可以被用戶使用上的機率很是低，僅限於賣產品時客戶經理的技能秀狀態。抽出普適的功能，定位使用的用戶，結合公司的需求，是我最開始設計時的原則。

這裏首先定義用戶：公司研發（目標-數據整合、快速開發），工程同事（某些需求可獨立解決），用戶使用（解決用戶簡單需求）。

根據以上三個原則，提出了這樣的產品功能構想：

a.本地文件快速展現（研發、工程、客戶）。

b.本地文件製圖（研發、工程、客戶）。

c.基本空間分析（研發、工程、客戶）。

d.數據編輯（研發、工程、客戶）。

e.數據共享

針對研發：提供數據層面對接、服務層面對接、前端接口對接。

針對工程：提供服務發佈功能。

針對客戶：提供前端對分享數據的查看。

f.數據權限

針對工程、客戶：可配置數據查看權限。

 

3.產品架構設計

以模塊化爲核心，首先將地圖操做和製圖業務進行分裂，構建出兩個大模塊：

 

在portal中對各功能模塊是否能添加進行配置管理：

 

4.本地數據展現的設計和實現

本地數據展現主要針對本地的CSV和本地Excel數據，數據中須要包含座標字段（X、Y），經過portal添加至地圖上進行快速展現：

 

5.Web製圖的設計和實現

5.1簡單渲染

簡單渲染是指用戶能夠選擇渲染的填充色、填充透明度、邊框色、邊框透明度、以及選擇是否用圖標（圖標可上傳選擇）展現:

 

5.2分類渲染

分類渲染是指用戶能夠選中分類的字段，而後對字段對應的不一樣閾值進行不一樣渲染展現:

 

6.空間分析的設計和實現

6.1多維分析

多維分析中提供熱區展示、聚類分析兩種維度，而且各參數能夠選擇控制:

 

6.2緩衝分析

提供針對上傳數據的點、線、面的緩衝分析功能:

 

7.數據管理

7.1數據關鍵字查詢

選中查詢字段，輸入查詢關鍵字後即可以搜索出數據中符合要求的結果，點擊結果面板後能夠在地圖上定位到該要素: 

 

7.2數據編輯

針對數據提供增長、修改、刪除、另存功能，其中另存功能能將修改後的數據導出成本地的CSV文件:

 

8.數據共享

8.1設計

選擇用PostGIS來存儲上傳數據，主要考慮都後期可使用geoserver直接將上傳的數據當作圖層進行發佈。而後設計了三張表來進行數據的元數據管理，分別是tc_user_upload_data,tc_user_upload_data_field,tc_user_upload_data_style表，這三張表中，第一個是存儲上傳的數據對應的數據表、樣式表、上傳人員，第二張表對應的各數據所擁有的字段，第三張表存儲的是數據對應的樣式文件。最後，每上傳一個數據，除了填充這三張元數據表外，還爲該數據生成一個數據存儲表，表中包含geom字段以ST_Geometry格式來存儲，爲之後和地理服務器對接。

8.2實現

點擊上傳按鈕，即將數據上傳至PG庫中:

 

8.3geoserver發佈

利用geoserver發佈:

 

或者利用公司集成了發佈工具的UDIG配圖發佈:

 

Geoserver中預覽：

 

9.權限配置

配置各崗位對服務圖層的權限:

 

圖層樹中對圖層瀏覽:

 

10.擴展設計

a.增長前端以配置樣式讀取上傳數據的接口，爲研發前端調用。

b.針對研發特殊需求，提供數據層面對接方案。

c.增長更多擴展GIS功能，好比路徑糾正、等值線、熱點圖等。

d.擴展支持更多的本地文件格式。

e.增長地圖底圖樣式可切換配置界面。將地圖底圖更換成矢量切圖，對矢量切圖以YAML格式進行樣式配置。

 

 

 　　　　　　　　　　　　　　　　　　　　　　　　　      -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^