本文详细介绍了如何使用OpenLayers库进行图形绘制，并提供了获取绘制图形顶点坐标的完整步骤。从画笔初始化到执行绘制，再到通过API获取顶点坐标，文章涵盖了实现这一功能的所有关键环节。
摘要生成于
，由 DeepSeek-R1 满血版支持，
虽使用Interaction无数次，进行图形绘制与用户交互等，但当需要获取绘制图形的顶点坐标时还是不晓得咋弄？
都知道在绘制完成后回调中能获取到当前的event对象
draw.on('drawend', function(e) {})
而这个对象中就能拿到feature,根据这个就可以找到如下feature api , 踏又可以通过getGeometry得到对应的polygon
根据上面获得了polygon, so再找到polygon api ，他就有一个getCoordinates的方法
根据上面顺藤摸瓜就可以得出如下操作—>
具体操作方法是这样的
* 画笔初始化
drawPrepare
(
)
{
const
source
=
new
VectorSource
(
)
const
vector
=
new
VectorLayer
(
{
source
:
source
,
style
:
new
Style
(
{
fill
:
new
Fill
(
{
color
:
'rgba(255,218,185, 0.4)'
}
)
,
stroke
:
new
Stroke
(
{
color
:
'#ffcc33'
,
width
:
2
}
)
,
image
:
new
Circle
(
{
radius
:
7
,
fill
:
new
Fill
(
{
color
:
'#ffcc33'
this
.
map
.
addLayer
(
vector
)
var
modify
=
new
Modify
(
{
source
:
source
this
.
map
.
addInteraction
(
modify
)
this
.
sourceOfPolygon
=
source
* 执行绘制
drawPattern
(
)
{
const
_self
=
this
const
source
=
this
.
sourceOfPolygon
const
draw
=
new
Draw
(
{
source
:
source
,
type
:
'Polygon'
this
.
map
.
addInteraction
(
draw
)
const
snap
=
new
Snap
(
{
source
:
source
this
.
map
.
addInteraction
(
snap
)
draw
.
on
(
'drawend'
,
function
(
e
)
{
const
geometry
=
e
.
feature
.
getGeometry
(
)
const
corrdinates
=
geometry
.
getCoordinates
(
)
console
.
log
(
corrdinates
)
_self
.
map
.
removeInteraction
(
draw
)
_self
.
map
.
removeInteraction
(
snap
)
ok 顶点坐标获取到了接下来就是业务逻辑了…
这个是上一篇博客中的电子围栏中的一部分功能，但是因为有点小坑啥的我自己就单独拎出来写了。所以我写的也算是基于上一篇：
openLayers
3（四）电子围栏—使用画图工具绘图
话不多说，代码附上
class drawFence{
//转换
坐标
点（多）
transPoints(points) {
let arr = points.split(';');
//
获取
图像
var view = map.getView();
//
获取
一个
经纬度的数组(两组数据)->[13417639.537659956, 3657508.94839583, 13434990.743080692, 3682503.8566450826]
var arr = view.calculateExtent...
