OpenLayers 获得多边形顶点坐标

OpenLayers官网目前为止,并没有提供获取多边形顶点坐标的直接DEMO。各位小菜鸟是不是很心机如焚、满世界找不到答案,自我怀疑了呢?不要着急,在这里将会柳暗花明。看官请看:

1、通过debug可以发现,多边形顶点坐标其实已经存在, 如下图是一条线段:

其实当线段被绘制后,对象顶点坐标保存在feature>geometry>A:Array(4)中,既然已经存在,我们怎么把它拿出来呢?

这就是关键部分了。(第二部是关键部分,并不难大虾可直接使用)

2、通过三个步骤获取,使用drawend监听事件:

var raster=new ol.layer.Tile({
    source:new ol.source.OSM(),
});

var source=new ol.source.Vector();

var vector=new ol.layer.Vector({
    source:source,
});
var map=new ol.Map({
    layers:[raster,vector],
    target:'map',
    view:new ol.View({
        center: [-11000000, 4600000],
        zoom:15
    })
});
function drawPolygon(){
 var polygon=new ol.interaction.Draw({
 source:source,
 type:'Polygon'
 });
 polygon.on('drawend',function(evt){
 var feature=evt.feature;
 var geometry=feature.getGeometry();
 var coordinate=geometry.getCoordinates();
 alert(coordinate);}
map.addInteraction(polygon); 

作个简单分析:通过对象的feature得到ol.feature类,调用ol.feature中getGeometry()方法等到ol.geom子类(此次为ol.geom.Polygon),调用ol.geom.Polygon类的getCoordinate()方法等到顶点坐标(隐藏的够深的,难怪不好找)。

看官可以发现,对一个四边形来说其实上面alert有五个点。第一和第五是一样的,这样闭合了(知道即可,不需要解释吧);

3、获取圆心:这里获取圆心的方式略有不同:

circle.on('drawend',function(evt){
    var feature=evt.feature;
    var geometry=feature.getGeometry();
    var coordinate=geometry.getCenter();
    alert(out);
});

对于默认坐标系的坐标又臭又长,简直不能忍。做开发我们必须讲究。也就是转换坐标和设置样式。

4、转换坐标系,ol的坐标转换全在ol.proj...子类中,

查来查去,用到一个是坐标转换:返回ol.Coordinate

ol.proj.transform(coordinate, source, destination){ol.Coordinate}

使用ol.coordinate,format()定义输出样子,format第一个参数为{ol.Coordinate}类型
,第二个参数为样式,使用{x},{y}占位符方式传递值,第三个参数是小数位数

circle.on('drawend',function(evt){

var feature=evt.feature; 

var geometry=feature.getGeometry(); 

var coordinate=geometry.getCenter(); 

var wgs=ol.proj.transform(coordinate,'EPSG:3857','EPSG:4326'); 

var out=ol.coordinate.format(wgs,'{x},{y}',2);

alert(out);});

对于绘制图形'Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon' or 'Circle' 他们之间有哪些区别和联系呢,他们之间的不同对于坐标系转换该如何实现呢。笔者将在下篇介绍。

转载自:https://blog.csdn.net/qq_31933363/article/details/80386314

You may also like...