探討如何使用流行的前端技術開發WebGIS系統

一、 先吐槽兩句

傳統GIS軟體行業中，開發的WebGIS系統目前使用的技術（前端）可能就是Flex和JavaScript，而JS則使用 jquery 和基本的 javascript，相當於是互聯網前端在2009年之前左右一直使用的那一套。原因大概有：

1、為了系統穩定（兼容低版本IE或者其他瀏覽器）

2、技術負責人對前沿技術了解不夠深；

3、公司開發人員技術學習成本問題；

4、安於現狀，技術上不考慮創新，能用就行了。

這些都是可能的，不過只要系統做的好，開發成本低（指的是用技術節約成本或者提高效率），自然是最好的吧。

二、如何用 Angualr1.x + ES6 + Webpack 開發 webgis 系統

以下只是簡單說一下技術實現，不深入，不展示代碼，已深夜，或許以後有機會吧（微信公眾號：giscafer）

後端框架設計

用了Angular，框架上肯定是前後端完全分離比較爽。後端Java框架提供 Restful 介面，前端通過 Ajax 調用

前端框架搭建

前端 Angualr1.x + ES6 + Webpack 搭建開發環境

使用 JavaScript 新標準 ES6 書寫代碼，是因為代碼整潔，代碼量也會減少一點，熟悉的話覺得開發效率會比較高，因為ES6提供了一些新特性；最後通過webpack 打包，以及 polyfill 對其轉譯為低版本瀏覽器兼容的JavaScript，比如 ES5

系統菜單通過前端 angular 路由進行跳轉，只要後端提供了完善的介面，一切工作簡單的業務工作可能就在前端處理了。對於業務表單比較多的系統， angular1.x 數據雙向綁定的優勢來說，是比較簡單的。地圖相關的業務代碼，也可以簡單封裝為 Controller，寫法變化比較大的可能就是用了ES6。原有的框架或者工具類，復用起來也很方便，包裝一下支持 CMD規範，最後 import 引用即可。不是 ES6 代碼也無所謂。

原先搭建過一個腳手架：giscafer/angular-webpack-es6

三、總結

再過2年，低版本 IE 瀏覽器（6、7、8）滅絕的時候，技術選型兼容性不再是影響因素了吧。目前angular1.x完美支持 IE8+ 應該是沒有問題的。和客戶溝通好，用 IE8+以上瀏覽器器。不管你用什麼技術，IE6、IE7體驗效果真的很差。看到界面就不爽，也慢。。

業餘搞過一個框架，前後端完全分離（因為我是前端開發工程師）,界面效果如下

----

最後廣告一下

接WebGIS開發相關外包或兼職：首頁-集思客-淘寶網

學習歡迎到GIS520社區：GIS520-最好的GIS學習交流平台 - GIS520.COM