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()获取激活状态

js封装修改功能

ModifyTool.js:

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 { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default class ModifyTool {
    constructor({ domId_map }) {
        this.domId_map = domId_map
        this.map = null
        this.source = new VectorSource()
        this.lineStringLayer = null
        this.modify = null
    }
    initMap() {
        this.map = new Map({
            target: this.domId_map,
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url:
                            "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",
                    }),
                    visible: true,
                    // name: "OSM",
                }),
            ],
            view: new View({
                projection: "EPSG:4326",
                center: [115, 39],
                zoom: 4,
            }),
        })

        this.addLayer()

    }
    addLayer() {
        this.source.addFeature(
            new Feature({
                geometry: new LineString([
                    [104.2979180563, 30.528298024],
                    [114.2987389704, 30.527798338],
                ]),
            })
        )
        this.lineStringLayer = new VectorLayer({
            source: this.source,
        });
        this.map.addLayer(this.lineStringLayer);
    }
    // 修改要素核心代码
    modifyFeature() {
        if (this.modify) {
            this.map.removeInteraction(this.modify);
        }
        this.modify = new Modify({
            source: this.lineStringLayer.getSource(), //这里要用source
        });
        this.map.addInteraction(this.modify);
    }
    // 取消修改
    cancelModify() {
        this.map.removeInteraction(this.modify);
    }
}

测试：

<template>
    <div class="main">
        <el-button @click="state.modify.modifyFeature()">开始修改</el-button>
        <el-button @click="state.modify.cancelModify()">取消修改</el-button>

        <div id="olContainer" style="height: 100vh; width: 100vw"></div>
    </div>

</template>
  
<script setup>
import { reactive } from 'vue';
import ModifyTool from './ModifyTool'

const state = reactive({
    modify: null
})
onMounted(() => {
    let modify = new ModifyTool({ domId_map: 'olContainer' })
    modify.initMap()

    state.modify = modify
})
</script>
<style lang="scss" scoped>
.main {
    position: relative;
    height: 100vh;
    width: 100vw;

    #olContainer {
        position: absolute;
        height: 100vh;
        width: 100vw;
    }

}
</style>

 

先选中要素，再修改要素

核心代码：

注意：这里一定要用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>