OpenLayers is een krachtige JavaScript-tool waarmee we allerlei soorten kaarten op een website kunnen maken en weergeven. Dit artikel zal u helpen bij het instellen van OpenLayers 3 en vervolgens een eenvoudige kaart maken met één tilelaag van OpenStreetMaps.

Deel een van de twee:
Installeren en instellen van OpenLayers

  1. 1 Open of maak uw webpagina. Als u nog geen webpagina heeft waar u de kaart in wilt invoegen, kunt u de volgende HTML5-sjabloon gebruiken; sla het op als 'map_page.html': 
      <html LANG="En"> <hoofd> <meta charset="UTF-8"> <titel>Mijn OpenLayers 3-kaart</titel> </hoofd> <lichaam>  </lichaam> </html>
  2. 2 Inclusief OpenLayers. Uw webpagina moet het JavaScript-bestand van de OpenLayers-bibliotheek bevatten. Plak hiertoe de volgende regel code in uw HTML-bestand, in de gebied, op een nieuwe regel onder de : 
     <script src="Http://openlayers.org/en/v3.0.0/build/ol.js"  type="Text / javascript"></script>
  3. 3 Voeg een HTML-kaartcontainer toe. OpenLayers geeft de kaart weer in een HTML-element, dus u moet er een opgeven. Plak de volgende regel met markeringen in de : 
     <div ID kaart="kaart" klasse="kaart"></div>
  4. 4 Stijl de kaartcontainer. U moet instellen hoe groot de kaart zal zijn wanneer deze wordt weergegeven en u moet CSS gebruiken om dit te doen. U kunt het volgende aan het document toevoegen :  
     <>> .kaart  hoogte: 500px; breedte: 700px;  >


Deel twee van twee:
De kaart maken

  1. 1 Maak het kaartobject. Als u wilt beginnen met het schrijven van de JavaScript-code die de kaart instelt, moet u een gebied naar de na de kaartcontainer div. Ook hierbinnen kunt u het kaartobject maken door te bellen nieuwe ol.Map () soortgelijk: 
     <scripttype='Text / javascript'> var kaart = nieuwe ol.Kaart( ); script>
  2. 2 Stel het doel-HTML-element van de kaart in. OpenLayers zullen de kaart weergeven (weergeven) binnen een HTML-element zoals een div of a p. De waarde die u moet doorgeven aan de functie setTarget () is eenvoudig ID kaart van het element, dat we instellen op 'kaart': 
     kaart.bepaal doel('kaart');
  3. 3 Stel de kaartweergave in. De weergave van een OpenLayers-kaart is wat beheert welk deel van de kaart dat u ziet. Maak een nieuw view-object dat zich centreert op de coördinaten [0, 0] (voor de kust van centraal Afrika):
    Notitie: In tegenstelling tot de Leaflet-toewijzingsbibliotheek, behandelt OpenLayers 3 coördinaten in het formaat [lengtegraad, breedtegraad]. 
     var uitzicht = nieuwe ol.Uitzicht( centrum: [0, 0], zoom: 1 ) kaart.setview(uitzicht);
  4. 4 Voeg een tegellaag toe. OpenLayers-kaarten hebben lagen die op elkaar zijn gestapeld en zijn wat u daadwerkelijk op een kaart ziet. Er zijn drie soorten lagen: afbeelding, tegel en vector. Tegellagen zijn de standaard 'basislagen' en kunnen afkomstig zijn van kaartaanbieders zoals Google Maps, MapQuest of OpenStreetMaps. Elke laag heeft een bron, die OpenLayers vertelt waar de laaginformatie vandaan komt. 
     var tile_layer = nieuwe ol.laag.Tegel( bron: nieuwe ol.bron.MapQuest(laag: 'Osm') ) kaart.addLayer(tile_layer);
  5. 5 Stel het zoomniveau in. In OpenLayers kunnen kaarten worden ingezoomd op een van de verschillende niveaus, van 0 (de meest uitgezoomde) tot ongeveer 20 (de meest ingezoomde niveaus). Het zoomniveau wordt ingesteld op het weergaveobject, dus we moeten dat instellen en de zoomfunctie instellen: 
     kaart.getView().setZoom(2);
  6. 6 Controleer uw code. Hieronder ziet u hoe uw webpagina-code eruit zou moeten zien: 
     doctype html> <html lang="En"> <hoofd> <meta charset="UTF-8"> <titel>Mijn OpenLayers 3 Kaarttitel> <script src="Http://openlayers.org/en/v3.0.0/build/ol-debug.js" type="Text / javascript">script> <stijl> .kaart  hoogte: 500px; breedte: 700px;  stijl> hoofd> <lichaam> <div id="kaart" klasse="kaart">div> <scripttype='Text / javascript'> var kaart = nieuwe ol.Kaart( ); kaart.bepaal doel('kaart'); var uitzicht = nieuwe ol.Uitzicht( centrum: [0, 0], zoom: 1 ) kaart.setview(uitzicht); var tile_layer = nieuwe ol.laag.Tegel( bron: nieuwe ol.bron.MapQuest(laag: 'Osm') ) kaart.addLayer(tile_layer); kaart.getView().setZoom(2); script> lichaam> html>
  7. 7 De voltooide kaart.