VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion

	var Bild = neuer Kreisstil({
	  Radius: 5,
	  füllen: neue Füllung({
	    Farbe: "rgba(255, 0, 0, 1)"
	  }),
	  Strich: neuer Strich({ Farbe: "rot", Breite: 1 })
	});
	
	var Stile = {
	  Punkt: neuer Stil({
	    Bild: Bild
	  })
	};
	
	var Stilfunktion = Funktion(Feature) {
	  Stile zurückgeben[feature.getGeometry().getType()];
	};

	var geojsonObject = {
	  Typ: "FeatureCollection",
	  Merkmale: [
	    {
	      Typ: "Feature",
	      Geometrie:
	        Typ: "Punkt",
	        Koordinaten: [0, 0]
	      }
	    }
	    //Hier können Sie weitere Funktionen hinzufügen
	  ]
	};

	// GeoJSON lesen und als Datenquelle von vectorSource verwenden var vectorSource = new VectorSource({
	  Funktionen: neues GeoJSON().readFeatures(geojsonObject)
	});
	
	var VektorLayer = neuer VektorLayer({
	  Quelle: Vektorquelle,
	  Stil: Stilfunktion
	});

      montiert() {
    diese.map = neue Map({
      Schichten:
        neue Kachelebene({
          Quelle: neues OSM()
        }),
        Vektorebene
      ],
      Ziel: "Karte",
      Ansicht: neue Ansicht({
        Mitte: [0, 0],
        Zoom: 2
      })
    });
	
	//Legen Sie die geplante Aufgabe fest und rufen Sie die mobile Label-Methode auf: setInterval(this.translate, 500);
  },

	 Methoden: {
	    übersetzen() {
	      //Beschriftungen durchlaufen und Koordinatenpositionen ändern vectorSource.forEachFeature(function(f) {
	        console.log("übersetzen");
	        
	        // Koordinateninkremente zufällig generieren (hier keine absoluten Koordinatenwerte!!!)
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }

	<Vorlage>
	  <div>
	    <span>Hallo, Karte</span>
	    <div id="Karte" Klasse="Karte"></div>
	  </div>
	</Vorlage>
	
	<script lang="ts">
	importiere "ol/ol.css";
	GeoJSON aus „ol/format/GeoJSON“ importieren;
	Karte aus „ol/Map“ importieren;
	Ansicht aus „ol/View“ importieren;
	importiere { Kreis als Kreisstil, Füllung, Strich, Stil } aus "ol/style";
	importiere { OSM, Vektor als Vektorquelle } aus "ol/source";
	importiere { Kachel als Kachelebene, Vektor als Vektorebene } aus "ol/layer";
	
	importiere Vue von „vue“;
	
	var Bild = neuer Kreisstil({
	  Radius: 5,
	  füllen: neue Füllung({
	    Farbe: "rgba(255, 0, 0, 1)"
	  }),
	  Strich: neuer Strich({ Farbe: "rot", Breite: 1 })
	});
	
	var Stile = {
	  Punkt: neuer Stil({
	    Bild: Bild
	  })
	};
	
	var Stilfunktion = Funktion(Feature) {
	  Stile zurückgeben[feature.getGeometry().getType()];
	};
	
	var geojsonObject = {
	  Typ: "FeatureCollection",
	  Merkmale: [
	    {
	      Typ: "Feature",
	      Geometrie:
	        Typ: "Punkt",
	        Koordinaten: [0, 0]
	      }
	    }
	  ]
	};
	
	var Vektorquelle = neue Vektorquelle ({
	  Funktionen: neues GeoJSON().readFeatures(geojsonObject)
	});
	
	var VektorLayer = neuer VektorLayer({
	  Quelle: Vektorquelle,
	  Stil: Stilfunktion
	});
	
	exportiere Standard Vue.extend({
	  Daten() {
	    zurückkehren {
	      Karte: {}
	    };
	  },
	  montiert() {
	    diese.map = neue Map({
	      Schichten:
	        neue Kachelebene({
	          Quelle: neues OSM()
	        }),
	        Vektorebene
	      ],
	      Ziel: "Karte",
	      Ansicht: neue Ansicht({
	        Mitte: [0, 0],
	        Zoom: 2
	      })
	    });
	
	    setInterval(dieses.translate, 500);
	  },
	
	  Methoden: {
	    übersetzen() {
	      vectorSource.forEachFeature(Funktion(f) {
	        console.log("übersetzen");
	        var x = Math.random() * 1000000;
	        var y = Math.random() * 1000000;
	        f.getGeometry().translate(x, y);
	      });
	    }
	  }
	});
	</Skript>
	<Stil>
	.Karte {
	  Breite: 100 %;
	  Höhe: 600px;
	}
	</Stil>