本文使用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/
參考資料：