虽使用Interaction无数次，进行图形绘制与用户交互等，但当需要获取绘制图形的顶点坐标时还是不晓得咋弄？
都知道在绘制完成后回调中能获取到当前的event对象draw.on('drawend', function(e) {}) 而这个对象中就能拿到feature,根据这个就可以找到如下feature api , 踏又可以通过getGeometry得到对应的polygon
根据上面获得了polygon, so再找到polygon api ，他就有一个getCoordinates的方法
根据上面顺藤摸瓜就可以得出如下操作—>
具体操作方法是这样的
1、画笔初始化方法
/**
* 画笔初始化
*/
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
},
2、执行绘制方法
/**
* 执行绘制
*/
drawPattern() {
const _self = this
const source = this.sourceOfPolygon
const draw = new Draw({
source: source,
type: 'Polygon'
}) // 添加 interaction
this.map.addInteraction(draw)
const snap = new Snap({
source: source
}) // 添加 snap
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 顶点坐标获取到了接下来就是业务逻辑了…
