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 获得多边形顶点坐标相关推荐

已知多边形各顶点坐标如何计算多边形面积
多边形的面积可通过分割成很多个三角形面积之和来求得! 通过多边形各顶点坐标可以求得各边长,再采用海伦公式,计算分割后的小三角形的面积. 海伦公式如下: 假设在平面内,有一个三角形,边长分别为a.b.c ...
五边形顶点坐标_任意给定五边形的5个顶点坐标，利用多边形填充的扫描算法，编写程序生成一个实心五边形...
// // 功能: 填充多边形 // // 参数: lpPoints: 指向顶点坐标数组的指针,数组类型为POINT,多边形由它们顺次封闭连接得到 // nCount: 顶点的个数 // nColor ...
识别图片文本坐标；透视变换；输入点集坐标，输出凸包（最大多边形）顶点坐标
'''识别图片文本坐标 ''' import cv2 import pytesseract from pytesseract import Output from PIL import Image f ...
Openlayers中多边形的聚合
关于OpenLayers的Cluster ol.source.Cluster ol利用这个js对象实现对地图上feature进行聚合展示的控制,所有的features需要被放在一个feature数组中 ...
根据凸多边形顶点坐标来计算面积算法与实现
本文我们来介绍一下如何利用凸多边形的所有顶点的坐标来计算其面积,并使用该算法制作一个小的示例程序. 注:对于凹多边形的面积,可以将其分解为若干个凸多边形分别计算求和,关于凹多边形的分解算法请参考Box ...
python计算直角三角形顶点坐标
已知圆上三个点坐标分别为(a,b).(c,d).与(a,b)夹角是60度,求顶点坐标 import numpy as np import matplotlib.pyplot as pltdef get ...
Java黑皮书课后题第4章：*4.7（顶点坐标）假设一个正五边形的中心位于（0,0），其中一个点位于0点位置。编写程序，提示用户输入正五边形外接圆的半径，显示p1到p5的5个坐标，保留两位小数
*4.7(顶点坐标)假设一个正五边形的中心位于(0,0),其中一个点位于0点位置.编写程序,提示用户输入正五边形外接圆的半径,显示p1到p5为5个坐标,保留两位小数题目题目概述运行示例破题代 ...
Halcon求取矩形顶点坐标
文章目录简介 Halcon源码博主写作不容易,孩子需要您鼓励万水千山总是情 , 先点个赞行不行简介我们在使用Halcon画矩形时,并不能得到矩形四角顶点坐标.但是我们可以通过数学计算得到矩形 ...
怎么用c语言做出等妖三角形_初二数学培优，怎么用顶点坐标求三角形面积？割补法这样用很简单...
点击右上角关注"陈老师初中数理化"分享学习经验,一起畅游快乐的学习生活. 根据顶点坐标求解三角形的面积是初二数学的重要知识点,本文就例题详细解析这类题型的解题思路,希望能给初二学生 ...

OpenLayers 获得多边形顶点坐标

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

OpenLayers 获得多边形顶点坐标相关推荐

最新文章

热门文章