開源地圖數據可視化庫——mapnik

  最近的工做重心放在了後端地圖渲染引擎上，所以接觸到了mapnik，用了一段時間感受它的功能至關豐富，具備很強的拓展性，生態也比較強大，想對學習過程作一個記錄。OK，廢話少說。

什麼是Mapnik

  Mapnik是一款開源的具備地圖渲染功能的庫，它可以爲Postgis，Shapefile，Geojson，SQLite等在內的多種數據源提供空間數據計算與可視化服務，包括png瓦片，矢量瓦片，utfGrid，同時它支持自定義渲染樣式配置，具備很高的靈活性，提供了c++，python，node接口。目前在開源社區上已有較多成熟的產品基於Mapnik作了封裝，例如windshaft，tileliev-mapnik等等。

矢量瓦片(mvt)渲染

  矢量瓦片在我理解是將矢量所表示的空間數據和屬性數據按照特定的編碼方式(Google Protocol Buffers)進行編碼，Google Protocol Buffers是一種兼容多語言、多平臺、易擴展的數據序列化格式，採用這種編碼方式，可以最大程度保證矢量數據的精度，提升客戶端和服務端的渲染效率以及查詢效率，詳情能夠參考：https://github.com/jingsam/ve... 以及 https://github.com/mapbox/vec...
以PostGIS爲例Mapnik庫進行矢量瓦片渲染時整個工做流程是：首先根據url中z,x,y參數計算出該瓦片的座標範圍extent，而後將extent與每個幾何要素的最小外包矩形進行overlay計算獲得該瓦片內的全部geometry對象，最後經過Postgis的庫函數ST_AsMVT將全部幾何對象聚合成矢量瓦片，僞代碼以下：

let vt = new Mapnik.VectorTile(z, x, y);

    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);//xml爲配置對象，具體參看https://github.com/mapnik/mapnik/wiki/XMLConfigReference
    
    map.render(vt, (err, tile) => {

        if (err) throw err;
        
        //tile即爲所得數據
        console.log(tile.getData())
    
    })

---

柵格瓦片(PNG)渲染

  柵格瓦片就是將空間數據按照指定的顏色樣式以圖片的形式進行繪製，柵格瓦片多應用於底圖的繪製，因爲空間數據被繪製成了圖片，在前端可視化時候就是繪製在canvas上的像素點，所以它的屬性信息會丟失，須要配合utfGrid同步使用。柵格瓦片的渲染流程與矢量瓦片相似，只是最後一步不是聚合，而是按照指定的樣式進行逐一像素點繪製；在mapnik中，柵格瓦片的渲染主要有兩種方式，1）直接渲染；2）經過矢量瓦片渲染，僞代碼分表以下：

• 直接渲染

let image = new Mapnik.Image(256, 256)；
    
    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);
    
    map.render(image, {}, function(err, image) {
    
    if (err) throw err;
    
    image.encodeSync('png') 
    
    });

• 經過矢量瓦片渲染

let vt = new Mapnik.VectorTile(z, x, y);
     
    vt.addDataSync(tile);//tile即爲前文提到所生成的矢量瓦片
     
    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);
    
    vt.render(this.map, new Mapnik.Image(256，256),function(error,buffer) {
    
    if (error) throw error;
    
    buffer.encodeSync('png')
    
    });

  比較簡單的介紹了mapnik的地理數據渲染功能，以後會作一個比較簡易的地圖渲染服務器，初次使用技術博客，可能不太到位，還請各位前輩多指教