「顶点坐标」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' 他们之间有哪些区别和联系呢，他们之间的不同对于坐标系转换该如何实现呢。笔者将在下篇介绍。

OpenLayers 获得多边形顶点坐标

顶点坐标

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

相关阅读

栏目导航

推荐阅读

热门阅读