OpenLayers引用ol-ext:Transform能够对Feature图形进行放大、缩小、移动、旋转、拉伸等操作,非常好用。
代码:
transformFeature() {
var _this = this
if (this.transform !== null || this.transform !== '') {
this.map.removeInteraction(this.transform)
}
this.editMenuStyle.height = '0px'
const transform = new Transform({
enableRotatedTransform: false,
addCondition: shiftKeyOnly,
hitTolerance: 2,
// Translate when click on feature
translateFeature: false,
// Can translate the feature
translate: true,
stretch: true,
scale: true,
rotate: true
})
var firstPoint = false
var startangle = 0
var d = [0, 0]
transform.on(['select'], function(e) {
if (firstPoint && e.features && e.features.getLength()) {
transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
}
})
transform.on(['rotatestart', 'translatestart'], function(e) {
// Rotation
startangle = e.feature.get('angle') || 0
// Translation
d = [0, 0]
})
transform.on('rotating', function(e) {
// Set angle attribute to be used on style !
e.feature.set('angle', startangle - e.angle)
})
transform.on('translating', function(e) {
d[0] += e.delta[0]
d[1] += e.delta[1]
if (firstPoint) {
transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
}
})
transform.on('scaling', function(e) {
if (firstPoint) {
transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
}
})
transform.on(['rotateend', 'translateend', 'scaleend'], function(e) {
_this.editFeatureCoord(e.feature)
})
this.transform = transform
this.map.addInteraction(this.transform)
},