Vue+Openlayer verwendet modify, um den gesamten Code des Elements zu ändern

 // Ändere den Feature-Kerncode modifyFeature() {
      this.modify = neue Ändern({
        Quelle: this.lineStringLayer.getSource(),
      });
      diese.map.addInteraction(diese.ändern);
    },

<Vorlage>
  <div id="Karte" style="Höhe: 100vh; Breite: 100vw"></div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Funktion } von "ol";
importiere { OSM, Vektor als Vektorquelle } aus "ol/source";
importiere { Vektor als Vektorebene, Kachel als Kachelebene } aus "ol/layer";
 
importiere { Punkt, Linienzug, Polygon } aus "ol/geom";
importiere { Ändere } von "ol/interaction";
Standard exportieren {
  Daten() {
    zurückkehren {
      Karte: {},
      Zeilenzeichenfolgeebene: {},
      ändern: {},
    };
  },
  erstellt() {},
  montiert() {
    dies.initMap();
    dies.addLayer();
    dies.modifyFeature();
  },
  berechnet: {},
  Methoden: {
    initMap() {
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues OSM(),
          }),
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [104.2979180563, 30.528298024],
          Zoom: 18,
        }),
      });
    },
    addLayer() {
      this.lineStringLayer = neuer VektorLayer({
        Quelle: neue VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        neue Funktion({
          Geometrie: neuer LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      diese.map.addLayer(diese.lineStringLayer);
    },
    // Ändere den Feature-Kerncode modifyFeature() {
      this.modify = neue Ändern({
        Quelle: this.lineStringLayer.getSource(), //Quelle wird hier verwendet
      });
      diese.map.addInteraction(diese.ändern);
    },
  },
};
</Skript>

Funktion ändern() {
      this.modify = neue Ändern({
        //Hinweis: Verwenden Sie hier unbedingt das Features-Attribut und nicht die Quelle! ! ! !
        Funktionen: this.select.getFeatures(),
      });
      diese.map.addInteraction(diese.ändern);
    },

<Vorlage>
  <div id="Karte" style="Höhe: 100vh; Breite: 100vw"></div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Funktion } von "ol";
importiere { OSM, Vektor als Vektorquelle, XYZ } aus "ol/source";
importiere { Vektor als Vektorebene, Kachel als Kachelebene } aus "ol/layer";
 
Importieren Sie Select aus „ol/interaction/Select“.
 
importiere { Punkt, Linienzug, Polygon } aus "ol/geom";
importiere { Ändere } von "ol/interaction";
Standard exportieren {
  Daten() {
    zurückkehren {
      Karte: {},
      Zeilenzeichenfolgeebene: {},
      ziehen: {},
      ändern: {},
      wählen: {},
    };
  },
  erstellt() {},
  montiert() {
    dies.initMap();
    dies.pointerMove();
    dies.addLayer();
    dies.selectFeature();
    dies.modifyFeature();
  },
  berechnet: {},
  Methoden: {
    initMap() {
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues OSM(),
          }),
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [104.2979180563, 30.528298024],
          Zoom: 18,
        }),
      });
    },
    ZeigerBewegung() {
      diese.map.on("Zeigerbewegung", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "Zeiger" : "";
      });
    },
    addLayer() {
      this.lineStringLayer = neuer VektorLayer({
        Quelle: neue VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        neue Funktion({
          Geometrie: neuer LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      diese.map.addLayer(diese.lineStringLayer);
    },
    wähleFeature() {
      dies.select = neues Select();
      diese.map.addInteraction(diese.select);
    },
    Funktion ändern() {
      this.modify = neue Ändern({
        //Hinweis: Verwenden Sie hier unbedingt das Features-Attribut und nicht die Quelle! ! ! !
        Funktionen: this.select.getFeatures(),
      });
      diese.map.addInteraction(diese.ändern);
    },
  },
};
</Skript>

<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Benutzerskalierung=0">
<meta name="apple-mobile-web-app-fähig" content="ja">
<title>Funktion ändern</title>
<link rel="stylesheet" href="../theme/default/style.css" rel="externes Nofollow" rel="externes Nofollow" type="text/css">
<link rel="stylesheet" href="style.css" rel="externes Nofollow" rel="externes Nofollow" type="text/css">
<style type="text/css">

</Stil>
<script src="../lib/OpenLayers.js"></script>
<Skripttyp="text/javascript">
Var-Maps, Vektoren, Steuerelemente;
Funktion init(){
Karte = neue OpenLayers.Map('Karte');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {Ebenen: 'basic'});
OpenLayers.Feature.Vector.style['Standard']['Strichbreite'] = '2';

Vektoren = neuer OpenLayers.Layer.Vector("Vektorebene");

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

Vektoren.addFeatures([neues OpenLayers.Feature.Vector(Geometrie)]);

map.addLayers([wms, Vektoren]);
//Grafiksteuerelemente zeichnen = neues OpenLayers.Control.DrawFeature(Vektoren,
OpenLayers.Handler.Polygon);

map.addControl(Steuerelemente);
steuert.aktivieren();
map.setCenter(neu OpenLayers.LonLat(110, 20), 3);
}

Funktion update() {
//Controls.deactivate() ändern;
Steuerungen = neues OpenLayers.Control.ModifyFeature(Vektoren);
map.addControl(Steuerelemente);
steuert.aktivieren();

}

Funktion deaktivieren(){
steuert.deaktivieren();
}

</Skript>
</Kopf>
<body onload="init()">
<div id="Karte" Klasse="kleineKarte"></div>
<div><input type = "button" value = "Ändern" onclick = "update()"/>
<input type = "button" value = "Abbrechen" onclick = "deactivate()"/>
</div>
</body>
</html>