移动图形后,获取到的中心点坐标正常。旋转、缩放车位后,获取到的中心点坐标有误。
更改车位图形
this.interaction.on(['rotateend', 'translateend', 'scaleend'], e => {
const curItem = e.feature._extProperties
// const center = e.target.coordinate 原来会引发 bug 的写法
// 不应该使用 e.target 的坐标点
// 缩放和旋转是通过右下角的圆圈触发的,所以 e.target 的坐标点是圆圈的坐标。
// 移动是通过中心点的正方形触发的,所以 e.target 的坐标点恰好等于图形的中心点。
const center = curItem.center // 应该使用feature的坐标点
const shape = e.feature.getCoordinates()
const angle = e.feature.get('angle')
localStorage.setItem('carportShape', JSON.stringify({center, shape, angle}))
curItem.carportShape = shape[0].map(item => {return item.join(',')}).join(';')
curItem.center = center
curItem.angle = angle
const { id, carportShape, carportCode } = curItem
carportApi.updateCarport({
mapId: this.EvoMap.id,
id,
carportCode,
carportShape,
carportCenterX: center[0],
carportCenterY: center[1],
angle
}).then(() => {
this.addCarport(curItem)
})
})