超簡單的canvas繪製地圖

    本文使用geojson數據，經過縮放和平移把地圖的地理座標系轉換canvas的屏幕座標系，而後將轉換後的數據繪製到canvas上。

    首先要計算數據的最大最小值，遍歷全部座標點的最大最小經緯度。在這個步驟要注意座標點是否都遍歷到，由於數據中可能會有多面和洞的存在。

    第二步就是轉換座標系，地理座標系轉換canvas的屏幕座標系。爲了讓地圖能完整在頁面展現，咱們要有數據的最大最小經緯度，計算出來最大最小經度的差值和最大最小緯度的差值。考慮到canvas也有一個寬高，咱們用以下代碼計算，選用哪一個比例比較合適總體顯示。(地圖數據等比例縮放到屏幕座標系)

var xScale = width / Math.abs(bounds.xMax - bounds.xMin)
var yScale = height / Math.abs(bounds.yMax - bounds.yMin)
var scale = xScale < yScale ? xScale : yScale

    接下來要對地圖數據進行縮放，因爲屏幕座標系y軸與地圖座標系y軸相反。

因此爲了地圖能居中，計算地圖中心和畫布中心的差值,進行平移變換，而後用畫布進行繪製。

var xoffset=width/2.0-Math.abs(bounds.xMax - bounds.xMin)/2*scale
var yoffset=height/2.0-Math.abs(bounds.yMax - bounds.yMin)/2*scale
var point={
    x: (longitude - bounds.xMin) * scale+xoffset,
    y: (bounds.yMax - latitude) * scale+yoffset
}

    效果圖以下,在線地址:https://tpolong.github.io/

參考資料：

1. http://mikefowler.me/journal/2014/06/10/drawing-geojson-in-a-canvas
2. http://mikefowler.me/smallworld.js/