iClient for JavaScript VectorLayer详细使用指南

作者：MR.

###**铺垫：**图形（Geometry）、要素（Feature）、矢量图层（客户端图层 【注1】，Layer.Vector）、地图（map）的关系

在上图中，左边的可以依次放入右边，其中：

1. 同类集合表示多个同种类型图形的集合，目前支持以下类型：多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）。顾名思义，即将多个点（Point）、线（LineString）、面（多边形，Polygon）对象组合到一个对象中。
2. 集合（Collection），能把任意数量、不同类型的Geometry对象组合成一个对象。
3. **图形风格化后变成要素、一个图形风格化后对应一个要素。**图形对象只具有形状而不具有风格、事件等等属性，所以当然也不可视化，只有给它风格之后才能添加到Vector图层上可视化显示出来，并且获得诸多属性及方法、事件等。一个Vector图层可以添加任意多个要素，数量上唯一的限制就是浏览器和硬件性能的高低，数量太多会让浏览器卡顿甚至崩溃，Vector图层不同的渲染方式对浏览器的支持情况不一样，性能也会不一样，下面详解。
4. 地图是多个图层的集合，所以map对象可以添加任意数量、任意类型（SuperMap.Layer）的图层，当然，基于与第三点相似的原因，数量不宜过多。另外map对象和地图还是有所差别的，map对象不止是图层的集合，它还有更多地属性和方法、事件等。
5. 注意类的继承关系，活用其自身的属性、方法和继承的属性、方法。

下面进入主题，本文涉及代码会在最后给出，本文引用最新客户端版本。

#一、几何对象的创建
      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

---

####注1：客户端图层即在客户端进行添加数据和渲染的图层，不需要与服务器进行交互，当然，添加的数据可以来源于服务器（主要指iServer）查询、分析的结果，数据需要符合iClient for JavaScript API中要求的参数类型，需要什么类型参数，给什么类型参数即可。
####注2：其他要求可以结合要操作的对象本身的属性、方法以及渲染方式（SVG和VML渲染方式，在浏览器中每个要素都是一个标签，可以结合HTML5进行操作）甚至扩展相关类。