iClient for JavaScript VectorLayer详细使用指南
作者：MR.
铺垫：图形（Geometry）、要素（Feature）、矢量图层（客户端图层 【注1】，Layer.Vector）、地图（map）的关系
在上图中，左边的可以依次放入右边，其中：
- 同类集合表示多个同种类型图形的集合，目前支持以下类型：多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）。顾名思义，即将多个点（Point）、线（LineString）、面（多边形，Polygon）对象组合到一个对象中。
- 集合（Collection），能把任意数量、不同不同个类型的Geometry对象组合成一个对象。
- 图形风格化后变成要素、一个图形风格化后对应一个要素。图形对象只具有形状而不具有风格、事件等等属性，所以当然也不可视化，只有给它风格之后才能添加到Vector图层上可视化显示出来，并且获得诸多属性及方法、事件等。一个Vector图层可以添加任意多个要素，数量上唯一的限制就是浏览器和硬件性能的高低，数量太多会让浏览器卡顿甚至崩溃，Vector图层不同的渲染方式对浏览器的支持情况不一样，性能也会不一样，下面详解。
- 地图是多个图层的集合，所以map对象可以添加任意数量、任意类型（SuperMap.Layer）的图层，当然，基于与第三点相似的原因，数量不宜过多。另外map对象和地图还是有所差别的，map对象不止是图层的集合，它还有更多地属性和方法、事件等。
- 注意类的继承关系，活用其自身的属性、方法和继承的属性、方法。
下面进入主题，本文涉及代码会在最后给出，本文引用最新客户端版本。
一、几何对象的创建
Vector图层上添加的要素的形状来自SuperMap.Geometry类（以下简称Geometry或几何对象），详细结构及继承关系请参考类参考。以下几何对象的的创建，其坐标及宽高相关参数的单位均与当前map对象的坐标系一致，map对象坐标系与baseLayer一致，可通过map. getProjection()及map. getUnits()方法获取当前坐标系和地图单位，建议统一坐标系；不支持创建指定坐标系坐标和单位的几何对象，若要使用，需先进行转换，推荐转换方法本节最后进行介绍。
1.1 点及多点
点要素是Geometry的基础，所有Geometry对象都是由点构成的。点对象（Geometry.Point）继承自Geometry对象，是单个的点；相应的多点对象（Geometry.MultiPoint）是将多点对象组合成一个对象，创建代码如下：
//点对象
var point = new SuperMap.Geometry.Point(-111.11, 22.22);//Geometry.Point(x,y,tag)
var point1 = new SuperMap.Geometry.Point(-111.11, -22.22);
var point2 = new SuperMap.Geometry.Point(111.11, -22.22);
var point3 = new SuperMap.Geometry.Point(111.11, 22.22);
//多点对象
var MultiPoint=new SuperMap.Geometry.MultiPoint([point,point1,point2,point3]);//点对象数组1.2 文本对象
文本对象（Geometry.GeoText）与其他类型在样式设置、添加到Vector略有不同，下面会涉及到。创建代码如下：
//文本对象
var geoText = new SuperMap.Geometry.GeoText(0, 0,"中华人民共和国");//Geometry.GeoText(x,y.Text)
1.3 线及多线
线对象（Geometry. LineString）由点组成，通过依次连接传入的点对象形成线，可以是直线也可以是曲线。目前曲线直接支持的类型有：贝塞尔曲线、B样条曲线、扇形。其他线型可以通过自己计算线上的点得到。创建代码如下：
//线对象
var line=new SuperMap.Geometry.LineString([point1,point2]);
var line1= SuperMap.Geometry.LineString.createBezierN([point,point1,point2,point3],20);//第二个参数为曲线平滑度，大于1的整数
var line2= SuperMap.Geometry.LineString.createBspline([point,point1,point2,point3],10);//第二个参数为曲线平滑度，大于1的整数
var line3= SuperMap.Geometry.LineString.createCurve([point,point1,point2,point3]);//四个参数，详见类参考，需要引用开发包examples\js目录下的Smooth.js文件
//多线对象
var MultiLine=new SuperMap.Geometry.MultiLineString([line,line1,line2,line3]);//线对象数组
1.4 闭合曲线
闭合曲线（Geometry.LinearRing），即，封闭的线串，创建代码如下：
//闭合曲线
var linearRing = new SuperMap.Geometry.LinearRing([point,point1,point2]);//点对象数组,自动闭合
1.5 多边形及多面
创建多边形对象（Geometry.Polygon）需要传入的参数是上述的闭合曲线对象数组，创建代码如下：
//多边形
var polygon= new SuperMap.Geometry.Polygon([linearRing]);//闭合曲线数组
//多面
var multiPolygon = new SuperMap.Geometry.MultiPolygon([polygon]);//多边形数组
注意多边形对象的方法，使用方法类似线对象的方法，目前支持以下多边形，另外，圆可以通过创建规则多边形即正多边形，设置足够多的边数来逼近，建议不宜过多；其他形状可以自己计算多边形上的点得到。
| 方法 | 描述 |
|---|---|
| createBsplinesurface | 创建3G B样条曲面，电信3G专业符号，由B样条曲线模拟生成 |
| createRegularPolygon | 创建规则多边形对象 |
| createRegularPolygonCurve | 创建扇形对象 |
| createRegularPolygonTriangle | 创建4G三角形,电信行业4G专业符号形容类似为：-▷ |
1.6 矩形
矩形对象（Geometry.Rectangle）和多边形对象不同，需要传入的参数不同，支持的方法较少，创建代码如下：
//矩形
var recttangle = new SuperMap.Geometry.Rectangle(0, 0, 10, 10);//x、y、宽、高
1.7 集合及其他（以椭圆为例）
集合对象（Geometry.Collection），可以把上述集合对象组合为一个对象。创建代码如下：
//集合
var Collection = new SuperMap.Geometry.Collection([point1,MultiPoint,line,linearRing,Polygon]);//Geometry对象数组
椭圆的创建方法：
//椭圆
var ellipseLinearRing = new SuperMap.Geometry.LinearRing(createEllipse(100,-10,50,25)),
ellipsePolygon = new SuperMap.Geometry.Polygon([ellipseLinearRing]);
//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴
function createEllipse(x,y,a,b){
var step = (a > b) ? 1 / a : 1 / b,points=[];
//step是等于1除以长轴值a和b中的较大者
//i每次循环增加1/step，表示度数的增加
//这样可以使得每次循环所绘制的路径（弧线）接近1像素
for (var i = 0; i < 2 * Math.PI; i += step)
{
//参数方程为x = a * cos(i), y = b * sin(i)，
//参数为i，表示度数（弧度）
var point=new SuperMap.Geometry.Point(x+a*Math.cos(i),y+b*Math.sin(i));
points.push(point);
}
return points;
}
上述代码中，变量ellipsePolygon即为最终得到的椭圆多边形对象；变量ellipseLinearRing为相应闭合线。可以通过上述思路来绘制各种曲线、面。
1.8 点坐标转换及长度单位转换方法
几何对象都是基于点对象的，转换点坐标为当前map对象坐标系，即可在正确的位置上显示要素，点坐标转换方法如下：
//坐标转换
var point4 = new SuperMap.Geometry.Point(11795517,3780514);
point4.transform(new SuperMap.Projection("EPSG:3857"),new SuperMap.Projection("EPSG:4326"));//Geometry.Point.transform(源对象投影，目标投影)
上述代码中，转换方法的两个参数可以略写为相应字符串。SuperMap 默认支持 EPSG:4326, CRS:84, urn:ogc:def:crs:EPSG:6.6:4326, EPSG:900913, EPSG:3857, EPSG:102113, EPSG:102100 投影间的转换。不支持的需要下载并引用proj4js.js，详细内容可以参考：SuperMap JavaScript API首页-开发指南末尾。
单位的转换主要是经纬度和长度单位之间的互相转换。请自行百度，要保证精度的话需要考虑投影的椭球体参数。最常见的需求是在经纬度坐标下画若干米的线，可以用SuperMap.Util.destinationVincenty()方法得到目标点：
var lonlat=SuperMap.Util.destinationVincenty(point4.getBounds().getCenterLonLat(),0,500);//SuperMap.LonLat对象、角度（度）、距离（米）
var point5 = new SuperMap.Geometry.Point(lonlat.lon,lonlat.lat); 上述代码创建了一个距离point4 500米、角度为0度（正北，顺时针）的点point5。
当然，视具体需求有不同的比较能保证精度的解决办法，比如缓冲区分析、距离量算、里程定点、里程定线等。
单位转换使用情况比较少，在实际应用中一般都能用别的方法达成目的，最后还要重复一句，同一套系统建议设法统一坐标系。
二、要素的创建
前面说过，要素的创建主要涉及样式的设置和属性的添加，下面是创建要素的方法：
var ptFeature=new SuperMap.Feature.Vector(point,{ID:0},{
externalGraphic:"../theme/images/cluster1.png",//引用图片
graphicWidth:48,//图片宽
graphicHeight:53,//图片高
graphicOpacity:0.8,//图片透明度
rotation:45,//图片旋转角度
label:"ID:0",//显示标签
fontColor:"#666",//标签字体颜色
fontOpacity:"0.8",//标签字体透明度
fontFamily:"隶书",//标签字体
fontSize:"2em",//标签字体大小
labelXOffset:24,//标签X方向偏移
labelYOffset:26,//标签Y方向偏移
fontWeight:"bold",//标签字体粗细（加粗）
fontStyle:"italic"//标签字体样式(斜体)
});//Geometry、属性、样式，后二可略，则无附加属性、应用默认样式
更多样式参考API手册，Feature.Vector.style类，点线面的有效样式不同，无效样式不会报错。上述方式，适用GeoText之外的Geometry对象，GeoText使用方法如下：
//GeoText
var geotextFeature = new SuperMap.Feature.Vector(geoText);//样式只能通过Strategy对象设置
//新建一个策略并使用在矢量要素图层(vector)上。
var strategy = new SuperMap.Strategy.GeoText();//GeoText策略
strategy.style = {//支持的样式Strategy.GeoText.style
fontColor:"#FF7F00",
fontWeight:"bolder",
fontSize:"14px",
fill: true,
fillColor: "#FFFFFF",
fillOpacity: 1,
stroke: true,
strokeColor:"#8B7B8B"
};
var vectorLayer= new SuperMap.Layer.Vector("VectorLayer", {strategies:[strategy]});//可选参数strategies
文本对象支持的样式参考Strategy.GeoText.style，并且需要在Vector图层的可选参数中设置要使用的Strategy。
另外，环线对象若设置了填充样式，环线内部会应用该样式，看起来就是多边形。
三、添加要素及其他
通过前面两个步骤得到了需要的要素，就可以把它们添加到Vector图层里了，最后再把该图层添加到地图里就可以显示出来了。代码如下：
vectorLayer.addFeatures([ptFeature,geotextFeature,lnFeature,pgFeature,cltFeature,epsFeature]);//添加要素
map.addLayer(vectorLayer);//创建map对象之后可以添加该图层显示效果：
关于图层默认样式的定义：
可以使用Layer.Vector的style属性及styleMap属性定义Vector图层里要素的默认样式，区别是后者可以设置四种状态下的样式：
vectorLayer.style={//该图层上要素的默认样式
fillColor:"#666"
}; //即未设置要素样式时应用此样式
vectorLayer.styleMap=new SuperMap.StyleMap({
"default":new SuperMap.Style({//该图层上要素的默认样式
fillColor:"#666"
}),
"select":{//该图层上要素被选中时的样式
fillColor:"#999"
}
});
上述二者选其一。StyleMap的另外两种状态是临时（temporary）、删除（delete），这两种状态和select状态都涉及对要素操作的控件，类参考有相关说明，控件将在下一节介绍。
关于Vector图层的渲染方式：
目前Vector图层的渲染方式有以下几种：‘SVG’, ‘VML’, ‘Canvas’，‘Canvas2’,效率最高的是Canvas2，但是存在浏览器兼容问题，现在最新版本的主流浏览器均支持Canvas2渲染，有兴趣的可以添加比较多的数据（比如一万个点）来测试渲染速度及效果。
vectorLayer= new SuperMap.Layer.Vector("VectorLayer", {strategies:[strategy],renderers: ["Canvas2"]});//可选参数strategies、renderers四、交互
Vector图层主要作用就是用于展现实时分析结果、动态变化的数据和交互等等，用法比较灵活。本节介绍对Vector图层上的要素进行绘制、拖拽、编辑、事件触发等等交互的操作。
上述操作一般使用JavaScript客户端的相关控件就可以实现了 【注2】，相关控件有：DrawFeature（绘制要素）、DragFeature（拖拽要素）、ModifyFeature（编辑要素）、SelectFeature（选择要素）。
4.1 DrawFeature
可以通过鼠标点击绘制要素，绘制时的样式对应所关联的Vector图层的StyleMap属性的temporary状态样式，未设置则用默认样式，具体使用请参考另外一篇博客–JavaScript客户端接口之SuperMap.Handler。
4.2 DragFeature
激活后拖动要素，在属性中定义事件执行函数，支持的属性或事件有：
| 属性 | 描述 |
|---|---|
| onComplete | {Function} 拖拽完成时都会调用该方法。该方法传递两个参数：拖拽的矢量要素、鼠标当前位置 |
| onDrag | {Function} 矢量要素的每一次移动都会调用该方法。该方法传递两个参数：拖拽的矢量要素、鼠标当前位置 |
| onEnter | {Function} 当鼠标悬浮在矢量要素上，即将执行拖拽时执行该函数。该函数传递一个参数：准备拖拽的对象 |
| onLeave | {Function} 当拖拽执行完毕，鼠标即将离开矢量要素时执行该函数 |
| onStart | {Function} 拖拽开始时执行的方法。该方法传递两个参数：拖拽的矢量要素、鼠标当前位置 |
示例代码如下：
var dragFeature = new SuperMap.Control.DragFeature(vectorLayer);//关联操作图层
dragFeature.onComplete=function (e) {//完成拖拽执行
//TODO
};
map.addControl(dragFeature);//map上添加控件
dragFeature.activate();//激活控件
4.3 ModifyFeature
有四种模式:拖拽、旋转、改变大小和编辑，后者可以通过编辑节点来实现编辑要素，可以同时设置多个模式，用“|”分隔，并可以开启捕捉、设置虚拟顶点样式（不设置则使用关联的Vector图层默认样式）。
var modifyFeature = new SuperMap.Control.ModifyFeature(vectorLayer);//关联操作图层
modifyFeature.snap= new SuperMap.Snap([vectorLayer],10,10,{actived:true});//关联捕捉对象
modifyFeature.events.on({"afterfeaturemodified":function (e){//要素编辑完成触发
//TODO
}});
map.addControl(modifyFeature);//地图上添加控件
modifyFeature.activate();//激活 modifyFeature 控件4.4 SelectFeature
可以设置要素选中、未选中、鼠标悬浮、鼠标移出、单击、双击、右击等事件的回调方法等。
var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,//操作图层
{
onSelect:function (e) {//选中时调用
//TODO
},onUnselect:function (e) {//退出选中状态时调用
//TODO
},
hover: false,//鼠标悬浮在地物上时，选中地物
callbacks: {//更多事件
over:function(e){/*TODO*/},
rightclick:function(e){/*TODO*/}
},
box:true,//是否允许画矩形框选择
multiple:true, //是否允许多选
selectStyle:{ //选中状态样式
fillColor:"#00bfaf",
strokeColor:"#1d8f86",
strokeWidth:5,
pointRadius:8
}
});
map.addControl(selectFeature); //map上添加控件
selectFeature.activate(); //激活控件
五、小结
Vector图层在在实际项目中几乎都会用到，它的使用比较灵活并且它是纯前端绘制的，使用时请多看看类参考属性和方法的说明，以及其继承关系，以便更好地使用、用好它。很多情况下SuperMap iServer处理请求返回的结果就是由Vector图层呈现的，大家在使用的时候多用用浏览器F12，在控制台那里查看对象结构。
本文完整代码请点击或访问：http://download.csdn.net/detail/supermapsupport/9439239