node-canvas實現百度地圖個性化底圖繪制
隨着nodejs的推出，node的並發和異步的強大能力，越來越多的得到應用，而且取得了非常不錯的效果。
作為一個前端工程師對node.js自然有着一份更深的感情，躍躍欲試的心情，總希望能將它應用到產品中來。
經過努力，node技術在百度LBS開發平台，得到了很好的落地，實現了百度地圖個性化的底圖繪制，並最終推出了百度地圖的個性化地圖平台
百度地圖個性化平台
百度地圖大家可能不會陌生了。我們發現個性化定制地圖樣式的需求非常強烈，開發者有強烈的欲望，希望控制地圖的樣式，打造出與眾不同的地圖風格。
百度地圖個化平台：2014年5月中旬上線，目前已經很好地實現了個性化的配置功能。
在線地址：http://developer.baidu.com/map/custom/
其中的地圖底圖在IE678等瀏覽器下，就是使用node-canvas在后端繪制出來的。給一張效果圖吧。不同主題的效果demo頁，可以看我們的官方網頁
百度地圖底圖技術介紹
簡單介紹一個地圖的底圖的相關知識吧，我們眼中看到的豐富的地圖信息，其中組成地圖的主要元素，莫過於地圖的一張張底圖瓦片了。如下圖所示，
一般我們打開了一個地圖，其實際上可能會像上圖一樣，由一堆瓦片組成。1，2，3，4表示不同的瓦片。 而某一張瓦片如下圖所示
線上鏈接 ：http://online2.map.bdimg.com/tile/?qt=tile&x=790&y=294&z=12&styles=pl&udt=20140613
百度地圖底圖繪制技術現狀
要想繪制上面所示的底圖，目前現在主要有兩類技術
柵格： 也就是傳意義的圖片技術，在server端把圖片畫好。瀏覽器使用<img>標簽拼出來
矢量：在瀏覽器使用canvas技術，將矢量的數據，在瀏覽器完成渲染。它最大的問題在於：只支持高端瀏覽器
百度地圖，目前兩種技術都已經實現，如果大家使用的是mapapi,在高端瀏覽器下打開，你會發現，他是使用canvas繪制的。
http://developer.baidu.com/map/jsdemo.htm#a1_2
有興趣可以使用不同的瀏覽器打開看看就可以看出來。
如圖所示
為什么要用node-canvas來繪制底圖呢？
有如下幾個原因
1. 百度地圖已經很好的實現使用canvas技術在瀏覽器完成渲染。
並有不錯的展現效果和性能，在移動端體驗更好。因為矢量的數據比請求圖片的體積要小的多
2. 在canvas的方案下，已經實現個性化底圖的繪制效果
底圖繪制由樣式+矢量數據組成。只要修改替換樣式文件，就可以實現個性化地圖的渲染。
3. 低端瀏覽器如IE6-8等瀏覽器，是不支持canvas功能的。
展現地圖底圖，必須使用柵格圖實現。需要有后端技術來生成底圖
4. 由於不樣的樣式要求得到不同的底圖。就需要圖片是實時繪制的，而且要求性能必須好。
node-canvas繪制底圖效果怎么樣呢？
先show一張由node-canvas繪制的底圖瓦片吧。
在線地址：http://api.map.baidu.com/customimage/tile?x=788&y=293&z=12&customid=midnight
可以看看請求的速度 ，應該是非常快的。
大圖（9個瓦片生成的效果圖）
在線地址：http://api.map.baidu.com/customimage/snap?customid=light
使用node-canvas的核心思路
上面這個圖，就是我想表達的核心意思。一份代碼即可以在瀏覽器里繪制地圖，也可以在server端繪制地圖。
讓javascript一統天下吧~~~
node-canvas介紹
官網的介紹：Node canvas is a Cairo backed Canvas implementation for NodeJS.
用一句話說： 他允許我們使用canvas的語法和接口寫成的js代碼，放在server跑。
如例子中的介紹
var Canvas = require('canvas')
, canvas = new Canvas(200,200)
, ctx = canvas.getContext('2d');
ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Awesome!", 50, 100);
var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke();
console.log('<img src="' + canvas.toDataURL() + '" />');
經過我的證實，確實是與canvas的接口使用完全一致。
后台繪制的主要邏輯
node-canvas的幾個注意點
- 環境安裝困難。
- 由於依賴多個包，且對版本有各種要求。所以搭建消耗了大量的時間。最好終於搞定。
- 部署形式，采用的是在線下把全部環境編譯好，上線時，全部拷貝即可。
- 圖片資源，換成相對路徑。
- 中文字體安裝，需要在linux機器上安裝所需要的字體。
node的一些性能調優
關於node的一些調優，網上有很多的經驗，方法都較為類似，這里簡單列一下幾個關鍵的。
- 一定要開啟cluster. node為單進程，多核的機器 可以很好的利用cpu的使用率。
- 合理設置網絡等配置。如果 node請求了第三方的http服務，如重試，超時，異常處理一定要全面。maxSocket等限制一定要打開。
- 合理開啟緩存，一些預處理盡量放在node啟動時完成，盡量不要放在request時再重復執行。
- 將node運行中，對cpu的依賴降到最低，盡量不要把復雜的計算放在js中計算，代碼一定優化優化再優化。
node-開發輔助
總結
- node技術越來越成熟，在生產環境中沒有任何問題。並發的優勢非常明顯，也可以實現代碼的前后端復用的目標。
- node-canvas的出現，可以很好解決server繪制圖片的需求，性能表現的很好。
- 開發node的app,對於前端工程師來說，學習成本不高。
轉載自：https://www.cnblogs.com/well1010/articles/baidu-map-node-canvas.html