前言

了解ArcGIS的同仁們應該知道,自從ArcGIS Desktop與ArcGIS Server捆綁銷售後,整個下來成本不菲,所以只有大項目敢上這些重量級的支撐軟體。小項目就只有求助於開源平台,而最近在一直膚淺地學習GeoServer與OpenLayer,發現還是太啰嗦,尤其是使用GeoServer發布數據,各種選項(大多用不著,尤其是從一個小項目角度出發),各種協議(OGC的WMS、WFS、WMTS,這裡說句不愛聽的,一大堆所謂的專家與大學教授聚在一起搞這個,雖然協議與介面是非常重要,但是在目前大前端的發展來講,這些基於XML的WMS、WFS,以及KML與GML,都是落伍的。當然WMS、WFS、WMTS的3.0在考慮基於JSON的協議與介面),總而言之,GeoServer這個採用Java開發的開源GIS Server,對於目前一些Web應用來講,口味還是有點重,這個就好比那些推行Leaflet的同仁們,一直在拿之與OpenLayer比較的過程,以輕量這個優點來克敵制勝。那麼,問題來了,能否自己動手寫一個簡單的GIS Server來滿足採用輕量API(Leaflet)來做GIS開發的Web應用?答案會在這個系列的連載中來回答。(連載的原因,一次沒太多時間來進行總結和寫作)

需求設定

這部分很重要,自己實現的肯定是一隻麻雀,比不了商業的和成熟的,但是簡單有多簡,輕量有多輕,在這一小節會把功能範圍大致框定,可能不一定會適用於各位看官的需求,但整個實現思路會對您有所啟發,這也是個人迫不及待想要寫下來的一個原因。

1.前端支持Leaflet API;(原先也考慮可以用ArcGIS JS API來調用,但嘗試ArcGIS JS API調用GeoServer發布的WFS服務之後,就放棄了,問題之多難以列表)

2.支持GeoJSON,不支持WMS、WFS、WMTS、KML、GML等等,理由如前言所述;

3.發布格式目前只支持ShapeFile,GIS格式由於百花齊放,格式萬萬千,但SHP應該是最基礎的,各平台轉換成該格式的功能也是約定俗成的;

4.框架選用NodeJS+ExpressJS,不多說,也不爭辯,這個基於目前只應用在前端開發上,因此採用Java的同仁請繼續支持GeoServer。(前兩天,一公司的技術副總(Java出身)竟然問我這樣一個問題,Node能訪問資料庫嗎? 。。。。。。)

5.支持靜態柵格切片、動態矢量切片(支持前端和後端渲染,這個是重點,請各位看下去,這個本人也是在摸索中去窺探其它GIS Server的實現方式,請放心,本文能實現的功能,各位只要有基礎也能實現,即使只是GIS開發的初學者)。如果看官有心的話,應該可以做一個簡單對應:WFS用GeoJSON,WMS用柵格切片,WMTS用矢量切片。

6.Mongo資料庫存儲發布數據

7.坐標系只支持wgs84(4326)、web mercator(3857)

8.支持高德地圖、谷歌地圖,暫不支持百度地圖(切片計算方式不同)

補充說明,NodeJS+ExpressJS+Mongo與GeoJSON也是完美結合,如果NodeJS+ExpressJS去支持XML,不是不可以,相信各位也一定會覺得很難受。

技術準備

如果您要動手實現,請先儲備如下技術:

1.GIS初學者或愛好者,老鳥請迴避,抬杠受不鳥;

2.NodeJS+ExpressJS

3.Mongo+mongoose

4.Leaflet

5.開發IDE:WebStorm或VS Code

本文不會手把手來進行教學,所以在了解以上技術的情況,對重點實現思路或部分重點代碼進行講解。

源碼倉庫

1.server(服務):green-gis-server,倉庫地址

2.manager(後台管理以及調用示例):green-gis-manager,倉庫地址

示例效果

  1. 發布數據(publish shp,wkid=4326 or 3857)

2.GeoJSON(use leaflet geojson class to render geojson data)

3.Backend(use node-canvas render data in node)

4.Frontend(extend leaflet GridLayer to render data in browser)

5.Vector Tile(checkout chrome dev tools)

連載章節

1.node-gdal:shapefile in and geojson out

2.tile:generate tile to handle big data

3.node-canvas:draw vector tile from backend

4.leaflet gridlayer:draw vector tile from frontend

5.cache:eat memory for faster tile

6.static tile:the fastest tile


推薦閱讀:
相关文章