<input type="button" class="Interaction" value="drawRectangle" οnclick="drawRectangle()" />
<input type="button" class="Interaction" value="addSquare" οnclick="addSquare()" />
//绘制长方形
function drawRectangle() {
//设置maxPoints及geometryFunction
var maxPoints, geometryFunction;
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
if (!geometry) { //!geometry 意思是如果没有geometry则...
geometry = new ol.geom.Polygon();
}
//设置起始点及终止点
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start] //特别注意,长方形终止点与起始点重合
]);
return geometry;
};
//新建source和layer
var source = new ol.source.Vector({
wrapX: false,
});
var layer = new ol.layer.Vector({
source: source
});
//新建绘制长方形interaction
var drawRectangle = new ol.interaction.Draw({
source: source,
type: "LineString",
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
//将layer和interaction添加到地图中
map.addLayer(layer);
map.addInteraction(drawRectangle);
}
//绘制正方形 ***成功
function addSquare() {
//新建source和layer
var source = new ol.source.Vector({
wrapX: false,
});
var layer = new ol.layer.Vector({
source: source
});
//设置maxPoints及geometryFunction
var maxPoints, geometryFunction;
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
//新建绘制正方形interaction
var drawSquare = new ol.interaction.Draw({
source: source,
type: "Circle",
geometryFunction: geometryFunction,
//maxPoints: maxPoints
});
//将layer和interaction添加到地图上
map.addLayer(layer);
map.addInteraction(drawSquare);
}