点要素的绘制实际上就是圆的绘制，调用Canvas API [ 8 ] 中的arc方法，以鼠标点击位置为圆心，设定半径以及填充样式，绘制圆即可，代码如下：

ctx=document.getElementById(“myCan”).getContext(“2d”);

ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2, true);

ctx.fill(); //绘制半径为4的圆

绘制线要素就是不断地调用lineTo方法，首先，在鼠标单击下第一点时，通过moveTo绘制线段起点，之后每次单击的位置点作为线段的下一拐点，通过lineTo绘制两点间的线段，直至双击结束，完成该线要素的绘制。

ctx.moveTo(sxy0.x, sxy0.y);

for (var i = 1; i < ptArr.length; i++) {

ctx.lineTo(ptArr[i].x, ptArr[i].y); }

ctx.stroke();

//ctx.closePath(); //ctx.fill(); }

Canvas API中没有提供绘制多边形的方法，只有绘制矩形的drawRect方法，而多边形的绘制和绘制线要素基本一致，不同的是，线要素绘制结束后使用stroke描边，而面要素需使用closePath闭合和fill方法进行填充。

要素绘制过程中，采用的是双层画布，在临时画布上绘制的都是简单多边形，双击结束后，将临时画布上的要素绘制到要素层画布featureCanvas上，在该画布上的绘制会涉及到复杂的岛洞多边形。因此，在将临时画布上的要素向要素层上绘制时，还需要进一步判断当前绘制的多边形与要素层上已存在的多边形的位置关系。如果当前多边形与已有的多边形不存在包含关系，则作为简单多边形处理；否则的话，则会形成岛或者洞多边形如图1，具体地，需要根据两个多边形的方向进行判断。如果两者的方向一致，

图1. 洞多边形

即同为逆时针或顺时针，则形成岛；否则形成洞多边形。

具体过程：在完成一个简单多边形的绘制后，将当前多边形与要素层上的已有多边形要素逐一进行多边形在多边形内的判断(代码见下)。如果存在包含关系，即为岛洞多边形，需要将两个多边形合并成一个新的要素，主要是将其中的坐标信息_lineRings合并，重组成一个新的多边形要素，并从内存数组和要素层中移除原来要素，流程如图2。

//判断多边形在多边形内

function isPolyInPoly(poly,outerPoly){

for(var i=0;i

var pt1 = poly[i];

var pt2 = poly[i+1];

var line = [pt1,pt2];

var isInpoly1 = pointInPoly(pt1,outerPoly);

var isInpoly2 = pointInPoly(pt2,outerPoly);

//两端点不都在多边形内

if(!isInpoly1 || !isInpoly2)return false;

//判断每条边是否在多边形内

var flag = isLineInPoly(line,outerPoly);

if(!flag) return false;}

return true; }

要素的空间信息都存储在lineRings二维数组中，具体的组织方式如下：

1) 简单多边形的空间信息lineRings：[ptArr],其中ptArr是多边形顶点坐标组成的数组。

2) 复杂多边形的空间信息lineRings：[ptArr1,ptArr2,....ptArr i....]，ptArr1是外部多边形的顶点坐标数组，ptArr2...ptArri是内部的岛或洞的顶点坐标数组。

在将临时画布上的简单要素或合并后的复杂要素向要素层上绘制要素时，由于存在岛洞的情况，需要根据每类要素的特点采取不同的绘制策略，具体如表1。

绘制岛洞多边形时，首先，需要判断这个多边形要素的各部分的包含关系，即多边形在多边形内的判断，确定其包含层级关系，然后通过isClockWise方法判断多边形的方向，是顺时针还是逆时针方向；比较存在包含关系的两多边形的方向是否一致，如果方向不一致，则形成一个洞，绘制时将这个内部多边形的填充色设为白色，形成一个空白区域。否则的话，这个内部多边形就是一个岛，绘制时只绘制边框。具体绘制过程如下：

// 岛洞多边形的绘制

var dir_outer = isClockWise(lineRings[ 0 ].points);

for(var i=1;i

var pointArr=lineRings[i].points;

var dir_inner=isClockWise(pointArr);

if((dir_outer&&!dir_inner)||(!dir_outer&&dir_inner)){

holeOrIsland = 'hole'; //方向不一致

}else{ holeOrIsland = 'island';}

drawPoly_inner(ctx,pointArr,holeOrIsland );

}

Canvas绘图是基于位图的，按照像素单位在画布上进行绘制，绘制的内容保存在Canvas对象中。Canvas整体作为一个对象，支持DOM事件模型，但是Canvas中每个图形则无法直接通过DOM事件进行交互。因此，在对画布上的图形进行交互时，需要通过鼠标相关事件模拟交互过程。图3是以绘制多边形为例，作以说明绘制过程中的鼠标事件。

首先，声明两个相同宽高的画布图层，使用绝对定位叠放在一起，一个用于显示绘制好的图形(featureCanvas)，一个用于显示绘制过程中的图形的变化(overlayCanvas)。使用两个画布的目的在于提高绘制效率，在绘制过程中，鼠标每移动一次就需要重绘一次，如果在同一个画布上，则需要反复清空画

图2. 绘制复杂要素的流程

表1. 各种类型的要素绘制策略

布再重绘，图形数量较多时，重绘会降低性能。使用双层画布，将当前绘制的图形放在临时画布上，已经绘制好的放在另一画布上，在绘制过程中，只需要重绘临时画布上的内容即可，能够大大提升性能。

在前后台的通讯过程中，主要通过实验室自主研发的Geoserver2013提供的要素服务接口进行要素的增删改查操作，除了要素服务外，同时它还提供了切片地图服务、动态图服务、文件服务、数据库服务等接口。在前端绘制的要素，使用gFeature对象存储，通过Geoserver提供的要素服务接口，将其提交至服务器进行保存；前端也可以通过属性查询和几何查询向服务器端请求要素集，以Geojson格式返回，在前端处理成gFeature格式，并绘制显示。

WebGIS中的矢量要素通常包含空间和属性两大部分，空间数据主要描述地理对象的位置，属性描述该地理对象的特征信息。在前端存储要素数据时，将要素的两部分信息分别存储在gFeature对象中，空间信息主要存储在shape中，属性信息存储在fields中，具体如图4。

以绘制最简单的多边形为例，测试在同一浏览器中，以相同的绘制样式绘制不同数量的多边形耗费的时间。先声明一个1000 × 600的画布，利用随机函数在画布内生成含有三个结点的多边形，对比绘制不同数量的相同结点数的多边形的耗时。在测试过程中，多边形的绘制样式统一设置了填充色、边框色、线宽、边角样式等，测试使用的浏览器是FireFox33。由于单次测试存在一定偶然性，因此，绘制耗时的计算采用的是取100次测试结果的平均值，最后，得出不同绘制规模下的平均绘制时间(如表2)，绘制时间和绘制数量成线性关系。

要素绘制性能不仅与要素的数目有关，还与每个要素的复杂程度有关，相同数目的要素，要素结构越复杂，即构成每个要素的结点数目越多，绘制时就越耗时。在测试实验中，分别对比同等数量下，三结点和五结点构成的多边形的绘制耗时。结果发现，两者的绘制时间存在一个倍数关系，同等数量下，绘制五边形的时间是三角形的2.26倍左右。

进行要素绘制时，不仅可以使用颜色填充，也可以使用图像填充。但是二者的填充效率如何，需要进一步测试。分别比较使用纯色填充和图片填充的绘制效率，其中，图片大小为3 KB，图片填充样式的设置如下：

var fillImg = new Image();

fillImg .src = 'apple.png';

var pstyle=ctx.createPattern(fillImg ,'repeat');

ctx.fillStyle=pstyle;

图5是对比绘制不同规模数量的三角形，分别使用两种填充方式所需要的时间，从表中可看出，图像填充比较耗时，约是纯色填充耗时的4倍左右。

不同浏览器中绘制效率对比Canvas是由浏览器解析并处理的，因此，其绘图的性能与浏览器平台有

表2. 绘制不同数量要素的耗时对比

直接关系，与客户端的硬件设备性能也有间接关系。不同浏览器对JavaScript的解析与执行速度会有所差异，这也会影响Canvas的绘制性能。部分浏览器开发商实现了Canvas GPU硬件加速，会大大加快了绘制速度。

下面的测试实验是在启用了浏览器的GPU加速功能后，对比三类浏览器中的绘制效率。分别在Chrome43、FireFox33、IE11三个浏览器中，绘制同等数量的三角形，都采用纯色填充的方式，对比要素的绘制效率，测试结果如下所示，从图6中可看出，Chrome中JavaScript的执行效率是最高的，其次是FireFox，IE最慢。各浏览器JS的执行速度还存在一定的数量关系，Chrome中JS的执行速度是Firefox的4~5倍，是IE的6~8倍。

在绘制过程中，要素数量、结点数、填充样式等都会影响绘制性能，而具体地这些因素是如何影响性能的，还需要进一步探讨。要找出绘制过程中时间消耗在哪些操作中，可以借助Chrome提供的Timeline工具，它会将web应用过程中各部分的耗时概况显示出来，主要包括DOM事件的处理、页面布局渲染、向屏幕绘制元素三个层面上的耗时数据，帮助找出耗时操作。

分别对比绘制5000个要素时，启动Chrome的Timeline模块，记录下绘制过程中的具体耗时概况，结果如图7。其中，黄色部分代表分析和执行JavaScript所用的时间，紫色表示计算元素样式和布局所用

图5. 不同绘制样式的耗时对比

图6. 不同浏览器中Canvas绘制耗时对比

时间，绿色是绘制屏幕所用时间，在三者的耗时中，脚本运算耗时最多，占比最大，而且随着要素数量的增加，脚本运算耗时几乎成倍增加。由此可见，绘制过程中，脚本运算对性能影响最大。

Profile模块提供了对脚本中各函数执行时间的统计，可以帮助网站找出哪些函数导致的脚本阻塞。利用该模块下的JavaScript CPU Profile来记录测试页面中的JavaScript各函数的执行时间，从中找出最耗时的操作。在性能优化时，考虑最大程度的减少这些耗时操作。表3是分别绘制1000个和5000个要素时，脚本各函数运行时间的记录。其中，当绘制5000个要素时，描边操作耗费了10.9 ms，填充、画线、移动节点分别消耗4 ms左右。在绘制过程中，绘制时间主要消耗在画线、描边、填充等操作上。

通过上述分析可以看出，stroke、fill、lineTo、moveTo等函数的执行耗时占比较大，这也说明了要素数量、结点数以及填充样式会对要素的绘制时间产生影响。在随着要素数量增多时，这几个耗时函数的调用次数都会增多，导致最终的耗时增加；同等数量的要素，要素结点数越多，会使 moveTo、lineTo函数的调用次数增加，从而增加绘制时间；填充样式的复杂程度会影响fill函数的执行时间，最终影响绘制时间。因此，绘制性能的提升主要体现在对这些操作的优化，如何最大程度地较少耗时操作。