admin管理员组

文章数量:1590153

交互效果可以单独去设置样式.

1.select

select可以用来选择并获取要素的属性,可以用来实现一些点击交互效果

this.select = new ol.interaction.Select({
      multi: false //单选
    });
this.select.setActive(true);
this._map.addInteraction(this.select);
//select交互开启之后选择就会触发,选中和点击空白处都会触发该方法
this.select.on("select",  (evt)=> {
let selFea = evt.selected;//为选中的feature集合
//***********逻辑操作********************
})
//选择要素时触发
this.select.getFeatures().on(["add"], function(evt) {
let feature = evt.element;
})
//删除选中效果时触发
this.select.getFeatures().on(["remove"], function(e) {
})

//清除所有选中状态
this.select.getFeatures().clear()

选中前

选中后

2.modify

交互之编辑要素,可以对点线面进行要素在线编辑

this.select = new ol.interaction.Select({
      multi: false //单选
    });
let selected = this.select.getFeatures();
this.modify = new ol.interaction.Modify({
  features: selected
});
this.modify.setActive(true);
this.select.setActive(true);
this._map.addInteraction(this.select);
this._map.addInteraction(this.modify);
在select的选中方法获取坐标进行修改
this.select.on("select",  (evt)=> {
//点击空白清除
if(evt.selected.length<=0) return;
 let selFea = evt.selected[0];
 let selCoordinate = selFea.getGeometry().getCoordinates()
****************逻辑操作********************************
})

修改前

修改后

3.draw

交互之draw,用来绘制要素,可以绘制点线圆,区

  this.draw = new ol.interaction.Draw({
                    source: source,
                    type: "Polygon",
                    freehand: true
                });
this._map.addInteraction(draw);
this.draw.setActive(true);
//绘制结束
draw.on("drawend",function (e) {
   this.draw.setActive(false);
   //绘制出的要素
   var feature=e.feature;
//********************逻辑操作******************
});

效果图

本文标签： 要素编辑InteractionselectDraw

版权声明：本文标题：openlayers3-interaction之select、modify和draw(选中、绘制和编辑要素) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728077155a1144625.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。