摘 要：本文提出一种基于HTML5 Canvas技术实现园区电子地图的方法，该方法通过运用Canvas绘制图片方法绘制预处理过的图片矩阵，实现园区电子地图的缩放、平移、定位功能，该方法克服了对第三方电子地图的依赖性，实现简单，操作便捷，实用性强。目前，该方法已经在某园区可再生能源监测系统中使用，运行效果良好。
关键词：HTML5；Canvas；园区电子地图
0 引言
电子地图（英语：Electronic map），即数字地图，是利用计算机技术，以数字方式存储和查阅的地图[1]。现在流行的百度地图和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）建筑定位：根据建筑在园区中的坐标值，在地图上用锚点标出建筑位置，当鼠标移动锚点时锚点颜色由红色变电蓝色，同时显示建筑名称提示信息，点击锚点可以弹出建筑信息窗口，显示该建筑的一些能耗监测信息。
|
