Oplayer 图形绘制功能
（1）实例化一个Vector作为地图容器的绘制层,source为数据源
（2）添加绘制控件对象（ol.interaction.Draw）
（3）监听typeSelect更改，触发绘制图形改变事件（先删除draw，防止多个draw重叠）
（4）addInteraction()函数来进行交互绘制，如果是正方形或长方形，还需设置回调函数
ol.interaction.Draw
（1）参数一：source，图层源
（2）参数二：type,绘制图形的类型
（3）参数三：geometryFuction,几何坐标变更时的回调函数，如在绘制正方形和长方形时需要通过此函数设置集合对象
（4）参数四：maxPoints,绘制图形结束前多边形或线的最大点数，线默认为2，多边形默认为3（就是你能在地图上点几下，如画直线就是点个起点，点个终点）
绘制图形(type值记得首字母大写)
（1）绘制点：type值为Point
（2）绘制线：type值为LineString
（3）绘制多边形:type值为Ploygon
（4）绘制圆：type值为Circle
（5）绘制正方形：type值为Cirecle，需要调用回调函数
（6）绘制长方形：type值为LineString，需要回调函数
回调函数解析：
（1）ol.interaction.Draw.createRegularPolygon(opt_sides，opt_angle)
opt_sides: 正X边形的边数，缺省值32，如4就是正方形
opt_angle: 角度，0为自由可调，缺省值0
（2） ol.geom.Polygon(coordinates) 多边形几何
主要方法：setCoordinates （coordinates）
coordinates：定义多边形的线性环阵列，类型为Array
关于
[start, [start[0],end[1]],end,[end[0],start[1]],start]在绘制长方形的时候，它会自动导入当前坐标，coordinates[0]即第一个点坐标（start），coordinates[1]即为第二个点坐标，此行代码的意思是从start点开始，连接start的横坐标和end的纵坐标的点，再连接end点，再连接以end横坐标为横坐标和以start的纵坐标为纵坐标的点，最后再连回start，形成闭线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制功能</title>
<link href="libs/ol/ol.css" rel="stylesheet" type="text/css"/>
<script src="libs/ol/ol-debug.js"></script>
<script src="libs/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="menu">
<label> 几何图形类型;</label>
<select id="type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">多边形</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
<option value="Box">长方形</option>
</select>
<div id="map"></div>
</div>
<script>
//卫星图层
satlayer = new ol.layer.Tile({
source: new ol.source.XYZ({
title: "卫星图",
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
})
});
//卫星图标注层
satannolayer = new ol.layer.Tile({
title: "卫星图标注",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
})
});
var map = new ol.Map({
layers: [satlayer, satannolayer],
target: 'map',//目标地图容器div的id
view: new ol.View({
center: ol.proj.fromLonLat([118.55, 28.47]),
zoom: 14,
maxZoom: 18,
minZoom: 1
})
});
var typeSelect = document.getElementById("type"); //绘制类型选择对象
var draw; // 绘制对象
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector({wrapX:false});//warpX:false,内容格式不允许换行
var vector = new ol.layer.Vector({
source: source,
style:new ol.style.Style({
fill: new ol.style.Fill({
color:'rgba(255,255,255,0.2)'
}),//填充样式
stroke: new ol.style.Stroke({
color:'#ffcc33',
width:2
}),//边界样式
image:new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})//图标样式
})
})
});
//将绘制图层添加到地图容器中
map.addLayer(vector);
/**
* 用户更改绘制类型时触发的事件
* @param e 更改事件
*/
typeSelect.onchange = function (e) {
map.removeInteraction(draw); //移除绘制图形,不然会重叠
addInteraction(); //添加交互绘制功能控件
};
/**
* 实例化一个绘制空间对象，ol.interaction.Draw，并添加到地图容器中
*/
function addInteraction(){
var value = typeSelect.value;
//判断数据层数据源
if( value !== 'none'){
if(source == null){
source = new ol.source.Vector({warpX: false});
vector.setSource(source); //添加绘制层数数据源
}
var geometryFunction, maxPoints;//几何函数，最大点数
//判断绘制类型
if(value === "Square"){
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);//正方形
}else if(value === 'Box'){
value = 'LineString';
maxPoints = 2;
//设置几何函数，即设置长方形的坐标点
/**
*
* @param coordinates 坐标
* @param geometry 几何类型
*/
geometryFunction = function(coordinates, geometry){
if(!geometry){
geometry = new ol.geom.Polygon(null); //多边形
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0],end[1]],end,[end[0],start[1]],start]
]);
return geometry;
};
}
//实例化交互绘制对象并添加到地图容器中
draw = new ol.interaction.Draw({
source: source,
type: value,
geometryFunction : geometryFunction, //几个信息变更时的回调函数
maxPoints: maxPoints
});
map.addInteraction(draw);
}else{
source = null;
vector.setSource(source); //清空绘制图形
}
}
</script>
</body>
</html>