Vue+Openlayer使用modify修改要素

悠悠 2022-09-10 07:20 171阅读 0赞

> **import \{ Modify \} from "ol/interaction";**

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

# 直接修改要素  #

![2021090710404272.gif][]

核心代码：

// 修改要素核心代码
        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()**获取激活状态

# 先选中要素，再修改要素 #

![2021090710384573.gif][]

核心代码：

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

[2021090710404272.gif]: /images/20220829/1bdf5093add844918f80d8280cbc1417.png
[2021090710384573.gif]: /images/20220829/194cebecdcbb4db2826db6501cdc826d.png