脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Openlayer修改要素

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

 更新时间：2021年09月08日 09:43:53   作者：~疆  
这篇文章主要介绍了Vue+Openlayer使用modify修改要素的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

import { Modify } from "ol/interaction";

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

直接修改要素 

 

核心代码：  

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

完整代码： 

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
 
import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {
  data() {
    return {
      map: {},
      lineStringLayer: {},
      modify: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addLayer();
    this.modifyFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.2979180563, 30.528298024],
          zoom: 18,
        }),
      });
    },
    addLayer() {
      this.lineStringLayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        new Feature({
          geometry: new LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    // 修改要素核心代码
    modifyFeature() {
      this.modify = new Modify({
        source: this.lineStringLayer.getSource(), //这里要用source
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</script>

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

先选中要素，再修改要素

核心代码：

注意：这里一定要用features属性，不要用source！！！！

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

完整代码： 

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
 
import Select from "ol/interaction/Select";
 
import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {
  data() {
    return {
      map: {},
      lineStringLayer: {},
      draw: {},
      modify: {},
      select: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.pointerMove();
    this.addLayer();
    this.selectFeature();
    this.modifyFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.2979180563, 30.528298024],
          zoom: 18,
        }),
      });
    },
    pointerMove() {
      this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
      });
    },
    addLayer() {
      this.lineStringLayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        new Feature({
          geometry: new LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    selectFeature() {
      this.select = new Select();
      this.map.addInteraction(this.select);
    },
    modifyFeature() {
      this.modify = new Modify({
        //注意：这里一定要用features属性，不要用source！！！！
        features: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</script>

ps：Openlayers修改矢量要素

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Modify Feature</title>
<link rel="stylesheet" href="../theme/default/style.css" rel="external nofollow"  rel="external nofollow"  type="text/css">
<link rel="stylesheet" href="style.css" rel="external nofollow"  rel="external nofollow"  type="text/css">
<style type="text/css">

</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

vectors = new OpenLayers.Layer.Vector("Vector Layer");

var geometry = OpenLayers.Geometry.fromWKT(
'POLYGON((110 20,120 20,120 10,110 10,110 20),(112 17,118 18,118 16,112 15,112 17))'
);

vectors.addFeatures([new OpenLayers.Feature.Vector(geometry)]);

map.addLayers([wms, vectors]);
//画图形
controls = new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon);

map.addControl(controls);
controls.activate();
map.setCenter(new OpenLayers.LonLat(110, 20), 3);
}

function update() {
// 修改
controls.deactivate();
controls = new OpenLayers.Control.ModifyFeature(vectors);
map.addControl(controls);
controls.activate();

}

function deactivate(){
controls.deactivate();
}

</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div><input type = "button" value = "修改" onclick = "update()"/>
<input type = "button" value = "取消" onclick = "deactivate()"/>
</div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • Vue刷新修改页面中数据的方法

    Vue刷新修改页面中数据的方法

    今天小编就为大家分享一篇Vue刷新修改页面中数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue+tsc+noEmit导致打包报TS类型错误问题及解决方法

    vue+tsc+noEmit导致打包报TS类型错误问题及解决方法

    当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧
    2023-10-10
  • 基于vue-cli3创建libs库的实现方法

    基于vue-cli3创建libs库的实现方法

    这篇文章主要介绍了基于vue-cli3创建libs库的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue3中超好用的插件整理

    vue3中超好用的插件整理

    最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue实现下拉多选、可搜索、全选功能(示例代码)

    vue实现下拉多选、可搜索、全选功能(示例代码)

    本文介绍了如何在Vue中实现一个树形结构的下拉多选组件,支持任意一级选项的选择,全选功能,以及搜索功能,通过在mounted生命周期中获取数据,并使用handleTree函数将接口返回的数据整理成树形结构,实现了这一功能,感兴趣的朋友一起看看吧
    2025-01-01
  • 详解如何在vue项目中使用eslint+prettier格式化代码

    详解如何在vue项目中使用eslint+prettier格式化代码

    在开发中我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格，这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码，需要的朋友可以参考下
    2018-11-11
  • vue-cli3+echarts实现渐变色仪表盘组件封装

    vue-cli3+echarts实现渐变色仪表盘组件封装

    这篇文章主要为大家详细介绍了vue-cli3+echarts实现渐变色仪表盘组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue自定义元素身上的右键事件问题

    Vue自定义元素身上的右键事件问题

    这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现简单的MVVM框架

    vue实现简单的MVVM框架

    这篇文章给大家分享了基于vue实现一个简单的MVVM框架的相关内容，有需要的朋友们可以参考学习下。
    2018-08-08
  • 如何解决this.$refs.form.validate()不执行的问题

    如何解决this.$refs.form.validate()不执行的问题

    这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09

最新评论