矢量图层

在上一节教程中，我们介绍了影像图层，它提供了世界或者局部的的基础影像。那么矢量就是用来表示真实世界中具体的物体或者符号。其大致分为三类：

第一类是点类型，可以表示世界中某个具体位置的事物，比如人、车、城市、楼房等可以抽象成某一个具体的点位置；

第二类是线类型，可以表示世界中具有连续性质的事物，比如铁路、河流、公路、地下管线等具有代表性的线类型，还可以表示风的流向、飞机航线、运行轨迹等类型。

第三类是面类型，可以表示世界中具有面积性质的事物，比如土地、湖泊等类型。

所有的矢量由矢量图层统一管理、使用。

添加一个矢量点

本示例代码中，假设你已经创建好了二维、三维视图。

代码如下：

// 创建一个矢量图层，并添加到视图，这里会一起操作二维三维，以下同样，不在单独说明，变量名以ol开始的指的是二维，以cs开始的指的是三维
var olVectorLayer = olView.addLayer(new sg.olvector.VectorLayer());
var csVectorLayer = csView.addLayer(new sg.csvector.VectorLayer());

// 创建一个矢量点，需要注意的是在三维里，点有两种：一种是贴地的点，它会随地表高低起伏，在地面上显示，忽略高度信息；一种是空间位置的点，会考虑高度信息，如果其高度低于地表高度，会被遮挡
var olPoint = olVectorLayer.addVector(new sg.olvector.Point({
    lonlat: [100,30]
}));
// 贴地点
var csGroundPoint = csVectorLayer.addVector(new sg.csvector.GroundPoint({
    position: Cesium.Cartesian3.fromDegrees(100,30,100000)
}));
// 空间点
var csPoint = csVectorLayer.addVector(new sg.csvector.Point({
    position: Cesium.Cartesian3.fromDegrees(100,30,100000)
}));

从图中可以看到二维地图里绘制了一个点，三维地图里分别有一个贴地的点和空间位置的点，三维的点的经纬度位置都是经度100，纬度30，高度100000米。

需要注意的是二维坐标是以数组来表示的，比如[100,30]，指示的是经度100，纬度30的位置；而三维坐标是ECEF坐标来表示的，使用的类型是Cesium.Cartesian3。

改变点的属性

绘制完一个矢量之后，该矢量有很多方法可以改变其属性，比如我们要改变点的位置、颜色、大小等。我们使用上面创建的点来演示一些方法的使用，更详细的方法请参考api文档。

// 改变二维点的位置
olPoint.setPosition([130,30]);

// 设置点不显示填充色
olPoint.setFill(false);

// 设置点的线衬色为‘cyan’
olPoint.setStrokeColor('cyan');

// 设置点的半径为10像素
olPoint.setRadius(10);

更改后如下图，可以看到二维视图里的点没有填充色了，边线颜色变成了'cyan'，半径也变大了。

添加一个图标&标签

示例代码接着上面的教程，假设你已经创建好了矢量图层之后，代码如下：

// 创建一个二维图标，并添加到二维矢量图层
var olIcon = olVectorLayer.addVector(new sg.olvector.Icon({
    lonlat: [116.395645,39.929986]
}));
// 创建一个二维标签，并添加到二维矢量图层
var olLabel = olVectorLayer.addVector(new sg.olvector.Label({
    lonlat: [116.395645,39.929986],
    noteText: '北京'
}));

// 创建一个三维贴地图标，并添加到三维矢量图层
var csIcon = csVectorLayer.addVector(new sg.csvector.GroundIcon({
    position: Cesium.Cartesian3.fromDegrees(116.395645,39.929986)
}));
// 创建一个三维贴地标签，并添加到三维矢量图层
var csLabel = csVectorLayer.addVector(new sg.csvector.GroundLabel({
    position: Cesium.Cartesian3.fromDegrees(116.395645,39.929986),
    noteText: '北京'
}));

注意，标签(Label)和标牌(Popup)不是同一个类型，标牌(Popup)会在后面的教程中介绍。

创建的图标，我们没有指定图标的url或者image，会使用默认的图标显示，如上图所示。

改变图标&标签

默认的图标和标签在相同位置显示有些重合，我们希望让标签向右移动一点，并且让图标换个颜色并变大一些，代码如下：

// 设置二维图标的颜色为'red'
olIcon.setColor('red');
// 设置二维图标变大2倍
olIcon.setScale(2.0);
// 设置二维标签的偏移像素为x方向(屏幕向右为正)20像素，y方向(屏幕向下为正)0像素
olLabel.setNoteOffset([20,0]);

// 设置三维贴地图标的颜色为'yellow'
csIcon.setColor('red');
// 设置三维贴地图标变大1.5倍
csIcon.setScale(1.5);
// 设置三维贴地标签的偏移像素为x方向(屏幕向右为正)20像素，y方向(屏幕向下为正)0像素
csLabel.setNoteOffset([20,0]);

所有的二维矢量

二维支持很多矢量，常见的点、线、面、圆、环、扇等，具体请参考api文档。

不同的矢量有不同的方法控制其参数，api文档里会有详细的介绍，此外，所有的矢量都支持显隐、闪烁等通用的控制。

所有的三维矢量

三维支持的矢量比二维更多更复杂，常见的点、线、面、圆、环、扇等都分别有贴地和空间两种类型，此外还有更加复杂的自定义三维网格、模型、大规模数字城市等类型，具体请参考api文档。