ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听

官网

示例地址：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.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);

动态修改某个属性值

/** 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 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'));};

事件监听

  // 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(""); });

ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听相关推荐

Ext JS 5的声明式事件监听
原文:Declarative Listeners in Ext JS 5 在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进--声 ...
Fabricjs对Canvas画布和对象的事件监听
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上, ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
mac os之监听触摸板（捏合、旋转、三指）
文章目录前言一.创建工程实例二.监听事件 1.捏合事件步骤一步骤二 2.捏合事件,以中心为坐标步骤一步骤二 3.监听旋转手势步骤一步骤二 4.滑动手势步骤一步骤二步骤三前言 ...
【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 获取要注入事件的 View 对象 | 通过反射获取 View 组件的事件设置方法 )
文章目录前言一.获取要注入事件的 View 对象二.通过反射获取 View 组件的事件设置方法并执行前言 Android 依赖注入的核心就是通过反射获取类 / 方法 / 字段上的注解 , ...
监听对象中某一项的值_Vue中watch的详细用法
1.基本用法下面代码是watch的一种基本用法: watch去监听单个值是否发生改变直接写一个监听处理函数,当每次监听到cityName值发生改变时,执行函数.也可以在所监听的数据后面直接加字符串 ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
Vue.js开发记录--用watch监听对象中属性的变化
监听对象中所有属性存在对象obj,若想要监听其中所有的值的变化 watch: {obj: {handler (val) {// coding},deep: true}, } 监听对象中某个属性如果 ...

ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听

ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听相关推荐

最新文章

热门文章