WebGIS開發進階練手題（二）

02-02

編程學習需要多寫，多做項目，沒有做什麼應用的想法的同學可以試試下邊的幾個應用，邊學邊練，你才會慢慢成長……

以下內容適合對象：

1、想在Webgis方向學習編程或者工作的學弟妹；

2、相關領域從業者或者教師；

3、有編程基礎的，對編程感興趣者；

如果覺得以下題目困難的請查找歷史信息閱讀《WebGIS開發入門練習題（一）》文章

一、簡單的webgis系統

難度係數：☆☆

（一）、功能點描述：

地圖預覽，圖層切換；
具備距離測量，面積測量；
支持坐標定位，空間要素查詢（點線面支持其一即可），屬性查詢+空間（繪圖）查詢；
支持點線面（其一）要素的新增、刪除；

（二）、可能涉及的軟體或者技術：

arcgis server做地圖容器的話，需要安裝arcgis、arcgis server；如果考慮自己做存儲可能要arcsde+oracle（新手可能有點坑，可以不考慮上邊功能4）；
以上功能實現可以使用的地圖前端框架有arcgis api for JavaScript，或者openlayers2.x或者openlayers3.x
做得簡單一些可以不需要後台，全部是前端JavaScript+HTML+CSS靜態代碼，部署Tomcat或者IIS調試訪問

二、個人旅遊地圖應用——路線篇

難度係數：

（一）、功能點描述：

用戶通過添加旅行起始站（火車或飛機），在地圖上繪製起點和終點路線，相當於數據可視化；
可對路線進行描述，挂圖片（掛火車票或者飛機票）等，點擊路線或者起點終點可以展示行程車票；
列印，導出地圖；可將展示結果生成效果圖分享社區，如微信，微博，QQ等；
高級功能：

用戶定製：支持用戶登錄，用戶可以自行對上邊的功能操作，自定義行程統計圖；可保存歸檔；
支持保存：第二次進入可編輯更新；
支持路線導入：指定導入的數據格式，導入後自動繪製或者直接生成效果圖

【參考大致效果圖：】

（二）、可能涉及技術：

1、地圖方面，可以選擇有 Mapbox、ArcGIS、OpenLayers、百度地圖BMap、高德地圖AMap、Google Map 等；看個人熟悉程度。

2、說明一下，上邊給的效果圖是 Echarts 地圖可視化統計圖，使用Echarts這種圖表可視化庫實現應該也是可以的，另外類似的 Highchart 的地圖模塊 highMaps 也可以了解一下，Echarts是中文的，另外 Echarts 官方結合了百度地圖展示很多栗子，建議如果選擇，選 Echarts 吧，開源免費+國產！

3、涉及後端框架和存儲技術，建議是Java+MySQL，因為Java 語言是WebGIS在服務端用的最多的。當然，這只是學習練手的應用，編程語言不限制，重要的是過程+結果！有能力可能採用目前流行的 NodeJS+MongoDB 做後端服務和存儲（那就是JavaScript統治前後端啦~哈哈）

4、功能頁面上，就隨意發揮了，原生 JavaScript + HTML 或者用 AngularJS 這些都行吧，注意前端功能效果和體驗第一位。

5、功能點4 裡邊的高級功能可以不考慮，給覺得此應用簡單的同學參考。

三、個人旅遊地圖應用——相冊篇

難度係數：

類似應用二，只是路線改成了相冊罷了。

我們都會去旅遊，遊山玩水的過程會拍照，智能機或者單反普遍的時代，相片裡邊都可以記錄地理位置，這個位置信息有切確的拍照地點的經緯度坐標信息。所以，相片就能定位了……

之前簡單的寫過一個小demo：

GitHub - gis520/amap-photomap: 使用amap API實現相冊在地圖上定位展示demo，滑鼠移動圖片marker時放大展示

功能思路大致描述：

1、獲取照片的經緯度信息後（如果程序實現不了，可以通過網上現有的工作或者軟體提出照片的經緯度信息出來），支持圖片上傳，上傳後保存圖片的經緯度信息到資料庫，已經圖片上傳伺服器的相對路徑。以便程序可以根據介面讀取照片和位置信息，在地圖上標註出來。

2、地圖標註照片縮略圖效果：地圖縮放級別不同，展示不同密度的縮略圖發布情況（截圖來自IPhone相冊的地圖定位效果）；

3、點擊縮略圖或者某個旅遊地點，可以展示該區域的照片（相冊），可以切換查看照片或者輪播的方式（可參考高德地圖的實景圖片功能）。

微信公眾號：giscafer