一、OpenLayer3可以绘制一些基本的图形，例如点、线、多边形、圆，这四个基本的图形，如果想绘制出正方形，长方形需要用到geometryFunction函数进行变更，总体思路是加载一个矢量图层（vector）作为几何图形展示平台，还需要用到Interaction交互；开车
二、HTML布局
三、地图函数（这里我用到Jquery）
var source = new ol.source.Vector()
var layerVetor1 = new ol.layer.Vector({
source: source
});
var map1 = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
target: 'map',
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.OverviewMap(),
new ol.control.Zoom(),
new ol.control.MousePosition()
]),
});
map1.addLayer(layerVetor1);四、绘图变量与函数
var draw;
var typeselect = $("#drawTool");
//绘图函数
function Draw1() {
Drawtype = $("#drawTool option:selected").val()
console.log(Drawtype);
if (Drawtype != 'none') {
if (source==null) {
source = new ol.source.Vector({ wrapX: false })
layerVetor1.setSource(source);
}
var geometryFunction, maxPoint;
if (Drawtype == 'Square') {
Drawtype = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
if (Drawtype == 'Box') {
Drawtype = 'LineString';
//设置最大点数
maxPoint = 2;
//变更函数
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: Drawtype,
wrapX: false,
maxPoints: maxPoint,
geometryFunction:geometryFunction,
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'
})
})
})
})
map1.addInteraction(draw);
}
else {
source= null
layerVetor1.setSource(source);
}
}
五、select的改变事件
typeselect.change(function () {
map1.removeInteraction(draw);
Draw1();
})
六、调用方法
Draw1();七、效果图
八、总结，整个流程关键的时使用 ol.interaction.Draw函数，结合下拉框中的选中value去绘制不同的图形，本文参考了郭明强的书