1.5.3.2.6 绘制符号与图形

绘制几何图形是指绘制点、线、面、圆等，并叠加或覆盖在地图上。几何图形会固定在地图的某个位置上，会随着地图的平移或缩放而移动。OpenLayers 提供了基本绘制、手写绘制、捕捉绘制三种图形绘制方式。本节将介绍这些控件的使用方式。

基本绘制

首先在地图上添加几何图形绘制的按钮，并设置其样式，以绘制点为例：

//设置绘制控件界面，以绘制点为例
<div class="btn-group">
    <button id="drawPoint" value='Point' type="button" class="btn btn-default">绘点</button>
</div>

在本例中，首先在地图容器中加载一个矢量图层绘制层并创建一个绘图控件对象（ol.interaction.Draw），然后通过调用 addInteraction() 方法添加此绘制图形控件，再根据设置的几何图形类型绘制图层。绘制图层的关键代码如下：

//获取需要绘制的类型
var buttons = $('.btn-group').children();
//实例化矢量图层作为绘图层。
var vector = new ol.layer.Vector({
    source: source
});
map.addLayer(vector);
//创建一个绘图控件对象
var draw = new ol.interaction.Draw({
    source: source,
    type: buttons[key].value,
    snapTolerance: 20
});
//添加绘图控件
map.addInteraction(draw);

查看完整示例代码

手写绘制

手写绘制是指按住左键不放随意绘制图形，放手绘制完成。关键代码如下：

//获取需要绘制的类型
var buttons = $('.btn-group').children();
//创建一个矢量图层作为绘图层。
var vector = new ol.layer.Vector({
    source: source
});
map.addLayer('vector');
//创建手写图形绘制控件
var draw = new ol.interaction.Draw({
    source: source,
    type: buttons[key].value,
    snapTolerance: 20,
    freehand: true //设置可手写图形绘制
});
//添加手写图形绘制控件
map.addInteraction(draw);

查看完整示例代码

捕捉绘制

捕捉绘制是指绘制时鼠标进入到一个已经绘制好的点的一定容差范围内，鼠标点会被吸附到那个已经绘制好的点的位置。关键代码如下：

var source = new ol.source.Vector({wrapX: false});
//创建捕捉绘制控件
var snap = new ol.interaction.Snap({
    source: source  //绘制源
});
//添加捕捉控件
map.addInteraction(snap);

查看完整示例代码