雖使用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 頂點座標獲取到了接下來就是業務邏輯了…