脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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-08-08
  • 解决Vue项目中tff报错的问题

    解决Vue项目中tff报错的问题

    这篇文章主要介绍了解决Vue项目中tff报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue.js实现含搜索的多种复选框（附源码）

    vue.js实现含搜索的多种复选框（附源码）

    这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • vue 配置多页面应用的示例代码

    vue 配置多页面应用的示例代码

    这篇文章主要介绍了vue 配置多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue改变对象或数组时的刷新机制的方法总结

    vue改变对象或数组时的刷新机制的方法总结

    这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    小编最近为了优化vue项目性能，需要使用webpack-bundle-analyzer插件来分析报文件，在网上没有找到合适的，下面小编给大家写出来一个供大家参考
    2019-10-10
  • vue中的生命周期及钩子函数

    vue中的生命周期及钩子函数

    这篇文章主要介绍了vue中的生命周期及钩子函数,Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染,下面文章详细介绍,需要的朋友可以参考一下
    2021-12-12
  • Vue单文件组件开发实现过程详解

    Vue单文件组件开发实现过程详解

    这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • ant-design-vue 时间选择器赋值默认时间的操作

    ant-design-vue 时间选择器赋值默认时间的操作

    这篇文章主要介绍了ant-design-vue 时间选择器赋值默认时间的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随过来看看吧
    2020-10-10
  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    vue+mockjs模拟数据实现前后端分离开发的实例代码

    本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08

最新评论