超簡單的canvas繪製地圖

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

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

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

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

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

所以為了地圖能居中，計算地圖中心和畫布中心的差值,進行平移變換，然後用畫布進行繪製。

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

    效果圖如下

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

閱讀更多 gis開發 的文章

關鍵字: 寬高 戴爾Latitude 繪製地圖