摘 要：本文提出一種基于HTML5 Canvas技術實現園區電子地圖的方法，該方法通過運用Canvas繪制圖片方法繪制預處理過的圖片矩陣，實現園區電子地圖的縮放、平移、定位功能，該方法克服了對第三方電子地圖的依賴性，實現簡單，操作便捷，實用性強。目前，該方法已經在某園區可再生能源監測系統中使用，運行效果良好。
關鍵詞：HTML5；Canvas；園區電子地圖
0 引言
電子地圖（英語：Electronic map），即數字地圖，是利用計算機技術，以數字方式存儲和查閱的地圖[1]�，F在流行的百度地圖和Google地圖都提供了API應用接口，人們可以通過JavaScript語言調用這些API接口在電子地圖上實現自己需要的應用。然而對于園區來說，只有幾十平方公里甚至幾平方公里的面積，使用上述的電子地圖，無法滿足它的分辯率要求，顯得大材小用；另外，最重要的是實時性無法保證，很多新建的園區在電子地圖上定位不到。鑒于上述原因，本文提出一種基于HTML5 Canvas技術實現園區電子地圖的方法。該方法首先對園區鳥瞰圖進行縮放分割預處理，然后通過縮放比例和平移參數計算需要繪制的圖片矩陣，最后運用Canvas繪制圖片方法將這些圖片矩陣繪制到畫布上。該方法地圖內容由用戶提供，不需要連接第三方電子地圖服務器，能夠實現園區地圖的縮放、移動、定位功能，實現簡單，操作便捷，具有較強的實用性。
1 HTML5和Canvas簡介
HTML5是指萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的遨游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力[2]。
Canvas是HTML5中新增的元素，它是通過 JavaScript 來繪制 2D圖形。畫布是個矩形區域，可以控制其每一像素，逐像素進行渲染�？梢酝ㄟ^多種方法使用Canvas 元素繪制路徑、矩形、圓形、字符以及添加圖像[3]。Canvas元素給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。
2系統功能需求
（1）縮放功能：園區電子地圖具有5級縮放功能，可以通過鼠標滾輪實現地圖縮放，也可以通過操作縮放標尺實現地圖縮放；
（2）平移功能：運用鼠標可以拖動地圖上下左右平移地圖，也可以通過點擊平移方向盤實現地圖移動；
（3）建筑定位：根據建筑在園區中的坐標值，在地圖上用錨點標出建筑位置，當鼠標移動錨點時錨點顏色由紅色變電藍色，同時顯示建筑名稱提示信息，點擊錨點可以彈出建筑信息窗口，顯示該建筑的一些能耗監測信息。
|
