官网
示例地址:ol-ext
代码地址: ol-ext: openlayers开源插件库
文档api:查看OpenLayers - Welcome
简单功能示例
自己项目中用到的是 等比例缩放,旋转,拉伸等功能
代码如下
import ExtTransform from 'ol-ext/interaction/Transform'
import {always} from 'ol/events/condition'
const transform = new ExtTransform({
enableRotatedTransform: false,
hitTolerance: 2,
translate: true, // 拖拽
stretch: false, // 拉伸
scale: true, // 缩放
rotate: true, // 旋转
translateFeature: false, // true值时,点击feature即可移动
keepAspectRatio: always,// always 保持同比例缩放, undefined 任意缩放,形状可能改变
noFlip: true,
layers: [_this.mapObj.drawLayer], // 支持的transform的图层
})
// 事件监听
transform.on(['rotateend', 'translateend', 'scaleend'], function (e) {
_this.resultObj.fea = e.feature
transform.setActive(false)
setTimeout(() => {
transform.setActive(true)
}, 100);
_this.mapObj.savelaybtn.setPosition(e.target.coordinate_);
});
官方示例代码
初始化示例:
var interaction = new ol.interaction.Transform ({
enableRotatedTransform: false,
/* Limit interaction inside bbox * /
condition: function(e, features) {
return ol.extent.containsXY([-465960, 5536486, 1001630, 6514880], e.coordinate[0], e.coordinate[1]);
},
/* */
addCondition: ol.events.condition.shiftKeyOnly,
// filter: function(f,l) { return f.getGeometry().getType()==='Polygon'; },
// layers: [vector],
hitTolerance: 2,
translateFeature: $("#translateFeature").prop('checked'),
scale: $("#scale").prop('checked'),
rotate: $("#rotate").prop('checked'),
keepAspectRatio: $("#keepAspectRatio").prop('checked') ? ol.events.condition.always : undefined,
keepRectangle: false,
translate: $("#translate").prop('checked'),
stretch: $("#stretch").prop('checked')
});
map.addInteraction(interaction);
动态修改某个属性值
/** Set properties
*/
interaction.set("keepAspectRatio", ol.events.condition.always
设置样式
/** Style the transform handles for the current interaction
*/
function setHandleStyle(){
if (!interaction instanceof ol.interaction.Transform) return;
if ($("#style").prop('checked')) {
// Style the rotate handle
var circle = new ol.style.RegularShape({
fill: new ol.style.Fill({color:[255,255,255,0.01]}),
stroke: new ol.style.Stroke({width:1, color:[0,0,0,0.01]}),
radius: 8,
points: 10
});
interaction.setStyle ('rotate',
new ol.style.Style({
text: new ol.style.Text ({
text:'\uf0e2',
font:"16px Fontawesome",
textAlign: "left",
fill:new ol.style.Fill({color:'red'})
}),
image: circle
}));
// Center of rotation
interaction.setStyle ('rotate0',
new ol.style.Style({
text: new ol.style.Text ({
text:'\uf0e2',
font:"20px Fontawesome",
fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
stroke: new ol.style.Stroke({ width:2, color:'red' })
}),
}));
// Style the move handle
interaction.setStyle('translate',
new ol.style.Style({
text: new ol.style.Text ({
text:'\uf047',
font:"20px Fontawesome",
fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
stroke: new ol.style.Stroke({ width:2, color:'red' })
})
}));
// Style the strech handles
/* uncomment to style * /
interaction.setStyle ('scaleh1',
new ol.style.Style({
text: new ol.style.Text ({
text:'\uf07d',
font:"bold 20px Fontawesome",
fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
stroke: new ol.style.Stroke({ width:2, color:'red' })
})
}));
interaction.style.scaleh3 = interaction.style.scaleh1;
interaction.setStyle('scalev',
new ol.style.Style({
text: new ol.style.Text ({
text:'\uf07e',
font:"bold 20px Fontawesome",
fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
stroke: new ol.style.Stroke({ width:2, color:'red' })
})
}));
interaction.style.scalev2 = interaction.style.scalev;
/**/
} else {
interaction.setDefaultStyle ();
}
// Refresh
interaction.set('translate', interaction.get('translate'));
};
事件监听
// Events handlers
var startangle = 0;
var d=[0,0];
// Handle rotate on first point
var firstPoint = false;
interaction.on (['select'], function(e) {
if (firstPoint && e.features && e.features.getLength()) {
interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
}
});
interaction.on (['rotatestart','translatestart'], function(e){
// Rotation
startangle = e.feature.get('angle')||0;
// Translation
d=[0,0];
});
interaction.on('rotating', function (e){
$('#info').text("rotate: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2));
// Set angle attribute to be used on style !
e.feature.set('angle', startangle - e.angle);
});
interaction.on('translating', function (e){
d[0]+=e.delta[0];
d[1]+=e.delta[1];
$('#info').text("translate: "+d[0].toFixed(2)+","+d[1].toFixed(2));
if (firstPoint) {
interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
}
});
interaction.on('scaling', function (e){
$('#info').text("scale: "+e.scale[0].toFixed(2)+","+e.scale[1].toFixed(2));
if (firstPoint) {
interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
}
});
interaction.on(['rotateend', 'translateend', 'scaleend'], function (e) {
$('#info').text("");
});