OpenLayers ist ein leistungsstarkes JavaScript-Tool, mit dem Sie alle Arten von Karten auf einer Website erstellen und anzeigen können. Dieser Artikel wird Sie beim Einrichten von OpenLayers 3 und beim Erstellen einer einfachen Karte mit einer Kachelebene aus OpenStreetMaps unterstützen.

Teil eins von zwei:
Installieren und Einrichten von OpenLayern

  1. 1 Öffnen oder erstellen Sie Ihre Webseite. Wenn Sie noch keine Webseite haben, in die Sie die Karte einfügen möchten, können Sie die folgende HTML5-Vorlage verwenden. Speichern Sie es als 'map_page.html': 
      <html lang="en"> <Kopf> <Meta Zeichensatz="utf-8"> <Titel>Meine OpenLayers 3 Karte</Titel> </Kopf> <Karosserie>  </Karosserie> </html>
  2. 2 Fügen Sie OpenLayers hinzu. Ihre Webseite muss die JavaScript-Datei der OpenLayers-Bibliothek enthalten. Fügen Sie dazu die folgende Codezeile in Ihre HTML-Datei ein Bereich, in einer neuen Linie unter dem : 
     <Skript src="http://openlayers.org/en/v3.0.0/build/ol.js"  Art="Text / Javascript"></Skript>
  3. 3 Fügen Sie einen HTML-Map-Container hinzu. OpenLayers zeigt die Karte in einem HTML-Element an, daher müssen Sie eines bereitstellen. Fügen Sie die folgende Markup-Zeile in das Feld ein : 
     <div Ich würde="Karte" Klasse="Karte"></div>
  4. 4 Style den Kartencontainer. Sie müssen festlegen, wie groß die Karte sein soll, wenn sie angezeigt wird. Dazu sollten Sie CSS verwenden. Sie können dem Dokument Folgendes hinzufügen :  
     <>> .Karte  Höhe: 500px; Breite: 700px;  >


Teil zwei von zwei:
Erstellen der Karte

  1. 1 Erstellen Sie das Kartenobjekt. Um mit dem Schreiben des JavaScript-Codes zu beginnen, der die Karte erstellt, müssen Sie ein hinzufügen Bereich zum nach der Kartencontainer div. Auch innerhalb davon können Sie das Kartenobjekt durch Aufrufen erstellen neue ol.Map () so was: 
     <Skripttyp='Text / Javascript'> var Karte = Neu ol.Karte( ); Skript>
  2. 2 Legen Sie das Ziel-HTML-Element der Karte fest. OpenLayers wird die Karte in einem HTML-Element wie z div oder ein p. Der Wert, den Sie an die Funktion setTarget () übergeben müssen, ist einfach Ich würde des Elements, das wir auf "map" setzen: 
     Karte.anvisieren('Karte');
  3. 3 Stellen Sie die Kartenansicht ein. Eine OpenLayers Map-Ansicht verwaltet, welcher Teil der Karte angezeigt wird. Erstellen Sie ein neues Ansichtsobjekt, das um die Koordinaten [0, 0] (vor der Küste Zentralafrikas) zentriert ist:
    Hinweis: Im Gegensatz zur Leaflet-Mapping-Bibliothek beschäftigt sich OpenLayers 3 mit Koordinaten im Format [Länge, Breite]. 
     var Aussicht = Neu ol.Aussicht( Center: [0, 0], Zoomen: 1 ) Karte.SetView(Aussicht);
  4. 4 Fügen Sie eine Kachelebene hinzu. OpenLayers-Karten haben übereinander gestapelte Ebenen und sind das, was Sie tatsächlich in einer Karte sehen. Es gibt drei Arten von Ebenen: Bild, Kachel und Vektor. Kachel-Layer sind die Standard-Basis-Layer und können von Kartenanbietern wie Google Maps, MapQuest oder OpenStreetMaps stammen. Jede Ebene hat eine Quelle, die OpenLayers mitteilt, woher die Ebeneninformationen stammen. 
     var tile_layer = Neu ol.Schicht.Fliese( Quelle: Neu ol.Quelle.MapQuest(Schicht: 'osm') ) Karte.addLayer(tile_layer);
  5. 5 Stellen Sie die Zoomstufe ein. In OpenLayers können Karten auf eine von mehreren Stufen "gezoomt" werden, von 0 (am meisten herausgezoomt) bis etwa 20 (am meisten gezoomt). Die Zoomstufe ist auf das Ansichtsobjekt eingestellt, also müssen wir das bekommen und den Zoom einstellen: 
     Karte.getView().setZoom(2);
  6. 6 Überprüfen Sie Ihren Code. Im Folgenden sehen Sie, wie Ihr Webseiten-Code aussehen sollte: 
     Doctype HTML> <html lang="en"> <Kopf> <Meta-Zeichensatz="utf-8"> <Titel>Meine OpenLayers 3 KarteTitel> <Skript src="http://openlayers.org/en/v3.0.0/build/ol-debug.js" Art="Text / Javascript">Skript> <Stil> .Karte  Höhe: 500px; Breite: 700px;  Stil> Kopf> <Karosserie> <div id="Karte" Klasse="Karte">div> <Skripttyp='Text / Javascript'> var Karte = Neu ol.Karte( ); Karte.anvisieren('Karte'); var Aussicht = Neu ol.Aussicht( Center: [0, 0], Zoomen: 1 ) Karte.SetView(Aussicht); var tile_layer = Neu ol.Schicht.Fliese( Quelle: Neu ol.Quelle.MapQuest(Schicht: 'osm') ) Karte.addLayer(tile_layer); Karte.getView().setZoom(2); Skript> Karosserie> html>
  7. 7 Die fertige Karte.