当前位置： 移动技术网 > IT编程>网页制作>CSS > WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形教程

WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形教程

2019年04月19日  | 移动技术网IT编程  | 我要评论

郑海潮是谁,潍坊四中网,初熏门


//绘制长方形
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);
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网