官網(wǎng)

示例地址：ol-ext

代碼地址：?ol-ext: openlayers開源插件庫

文檔api：查看OpenLayers - Welcome

簡單功能示例

?

自己項目中用到的是 等比例縮放，旋轉(zhuǎn)，拉伸等功能

代碼如下

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, // 旋轉(zhuǎn)translateFeature: false, // true值時，點擊feature即可移動keepAspectRatio: always,// always 保持同比例縮放， undefined 任意縮放，形狀可能改變noFlip: true,layers: [_this.mapObj.drawLayer], // 支持的transform的圖層})// 事件監(jiān)聽transform.on(['rotateend', 'translateend', 'scaleend'], function (e) {_this.resultObj.fea = e.featuretransform.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);

動態(tài)修改某個屬性值

/** Set properties*/ interaction.set("keepAspectRatio", ol.events.condition.always

設(shè)置樣式

/** Style the transform handles for the current interaction*/function setHandleStyle(){if (!interaction instanceof ol.interaction.Transform) return;if ($("#style").prop('checked')) {// Style the rotate handlevar 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 rotationinteraction.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 handleinteraction.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 ();}// Refreshinteraction.set('translate', interaction.get('translate'));};

事件監(jiān)聽

// Events handlersvar startangle = 0;var d=[0,0];// Handle rotate on first pointvar 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){// Rotationstartangle = e.feature.get('angle')||0;// Translationd=[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(""); });

?

總結(jié)

以上是生活随笔為你收集整理的ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。