Vue + OpenLayers Schnellstart-Tutorial

	<Vorlage>
	  <div id="Karte" Klasse="Karte"></div>
	</Vorlage>
	
	<Skript>
	importiere "ol/ol.css";
	Karte aus „ol/Map“ importieren;
	OSM aus „ol/source/OSM“ importieren;
	importiere TileLayer aus „ol/layer/Tile“;
	Ansicht aus „ol/View“ importieren;
	
	Standard exportieren {
	  montiert() {
	    dies.initMap();
	  },
	  Methoden: {
	    initMap() {
	      neue Karte({
	        Schichten:
	          neue Kachelebene({
	            Quelle: neues OSM()
	          })
	        ],
	        Ziel: "Karte",
	        Ansicht: neue Ansicht({
	          Mitte: [0, 0],
	          Zoom: 2
	        })
	      });
	
	      console.log("Init abgeschlossen");
	    }
	  }
	};
	</Skript>
	<Stil>
	.Karte {
	  Breite: 100 %;
	  Höhe: 400px;
	}
	</Stil>

	<Vorlage>
	  <div>
	    <div id="Karte" Klasse="Karte"></div>
	  </div>
	</Vorlage>
	
	<Skript>
	importiere "ol/ol.css";
	importiere ImageLayer aus „ol/layer/Image“;
	Karte aus „ol/Map“ importieren;
	Projektion aus „ol/proj/Projection“ importieren;
	importiere Static aus „ol/source/ImageStatic“;
	Ansicht aus „ol/View“ importieren;
	importiere { getCenter } von "ol/extent";
	
	lass Ausmaß = [0, 0, 338, 600];
	let Projektion = neue Projektion({
	  Code: "xkcd-Bild",
	  Einheiten: "Pixel",
	  Ausmaß: Ausmaß
	});
	
	Standard exportieren {
	  Daten() {
	    zurückkehren {
	      Karte: {}
	    };
	  },
	
	  montiert() {
	    dies.initMap();
	  },
	
	  Methoden: {
	    initMap() {
	      diese.map = neue Map({
	        Schichten:
	          neue Bildebene({
	            Quelle: neu statisch({
	              Zuschreibungen: '© <a href="http://xkcd.com/license.html" rel="external nofollow" >xkcd</a>',
	              URL: "http://localhost:8080/img/123.5cba1af6.jpg",
	              Projektion: Projektion,
	              imageExtent: Ausmaß
	            })
	          })
	        ],
	        Ziel: "Karte",
	        Ansicht: neue Ansicht({
	          Projektion: Projektion,
	          Zentrum: getCenter(Ausdehnung),
	          Zoom: 1,
	          maxZoom: 4,
	          minZoom: 1
	        })
	      });
	    }
	  }
	};
	</Skript>
	<Stil>
	.Karte {
	  Breite: 100 %;
	  Höhe: 400px;
	}
	</Stil>