Vue+Openlayer使用modify修改要素的完整代码

Vue+Openlayer使用modify修改要素,具体内容如下所示:

import { Modify } from "ol/interaction";

  1. 可自动捕捉 
  2. 可修改点、线、面。不用自己声明要修改的要素类型

直接修改要素 

 Vue+Openlayer使用modify修改要素的完整代码_第1张图片

核心代码:  

 // 修改要素核心代码
    modifyFeature() {
      this.modify = new Modify({
        source: this.lineStringLayer.getSource(),
      });
      this.map.addInteraction(this.modify);
    },

完整代码: 


 

此外,可通过this.modify.setActive(false)来禁用modify对象,this.modify.getActive()获取激活状态

先选中要素,再修改要素

Vue+Openlayer使用modify修改要素的完整代码_第2张图片

核心代码:

注意:这里一定要用features属性,不要用source!!!!

modifyFeature() {
      this.modify = new Modify({
        //注意:这里一定要用features属性,不要用source!!!!
        features: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },

完整代码: 


 

ps:Openlayers修改矢量要素

将以下代码放到demo下examples中即可运行







Modify Feature







到此这篇关于Vue+Openlayer使用modify修改要素的文章就介绍到这了,更多相关Vue Openlayer修改要素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue+Openlayer使用modify修改要素的完整代码)