../_images/logo_openlayers.png ../_images/OSGeo_project.png

Snabbstart för OpenLayers

I den här snabbstarten beskrivs några grundläggande steg som krävs för att börja arbeta med OpenLayers: skapa en grundläggande karta, lägga till raster- och vektorlager och utforma funktioner.

OpenLayers gör det enkelt att lägga in en dynamisk karta på en webbsida. Den kan visa kartplattor, vektordata och markörer som laddats från valfri källa. OpenLayers har utvecklats för att främja användningen av alla typer av geografisk information. Det är helt gratis, Open Source JavaScript, som släpps under 2-clause BSD License (även känd som FreeBSD).

Centrala begrepp

Innan vi börjar arbeta med OpenLayers är det bra att förstå OpenLayers grundläggande begrepp:

Karta

Kartan är kärnkomponenten i OpenLayers. För att en map ska renderas behövs en view, en eller flera layers och en målcontainer.

Visa

Vyn bestämmer hur kartan ska återges. Den används för att ställa in upplösning, mittpunkt osv. Det är som en kamera genom vilken vi tittar på kartans innehåll.

Skikt

Lager kan läggas till på kartan i staplad ordning. Lagren kan vara antingen rasterlager (bilder) eller vektorlager (punkter/linjer/polygoner).

Källa

Varje skikt har en källa som vet hur skiktets innehåll ska laddas. När det gäller vektorlager läser källan vektordata med hjälp av en format-klass (t.ex. GeoJSON eller KML) och förser lagret med en uppsättning funktioner.

Funktioner

Features representerar verkliga ting och kan återges med hjälp av olika geometrier (som punkt, linje eller polygon) med en given style, som bestämmer dess utseende (linjetjocklek, fyllningsfärg etc.).

Skapa en grundläggande karta

Skapa en fil i t.ex. /home/user/ som heter basic-map.html , och kopiera följande innehåll till filen.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <!-- OpenLayers CSS -->
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">

        <!-- Custom styles -->
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <h1>Basic map</h1>

        <div id="map"></div>

        <!-- OpenLayers JS-->
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>

        <!-- App code -->
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([2.1833, 41.3833]),
              zoom: 6
            })
          });
        </script>

    </body>
</html>

Försök nu att öppna basic-map.html från en webbläsare med File->Open File. Du bör se följande:

../_images/openlayers-basic-map.png

Anteckning:

  • Koden följer bästa praxis för att ladda JavaScipt-kod i slutet av html-filen.

  • En OpenLayers-karta måste kopplas till ett HTML DOM-element, så vi har skapat ett <div>-element som identifieras av map-id.

  • Kartor representeras av klassen ol.Map. Vi anger DOM-elementet för att rendera kartan i med hjälp av target-egenskapen.

  • OpenLayers tillåter kartåtergivning med hjälp av två olika mekanismer: Canvas och WebGL. Standardrenderingen är canvas.

  • En karta visar data som finns i lager, så vi har skapat ett kaklat lager, representerat av klassen ol.layer.Tile, som laddar innehåll från OpenStreetMap-projektet med hjälp av källklassen ol.source.OSM.

  • Slutligen ställer vi in kamerans ursprungliga position med hjälp av klassen ol.View, ställer in den ursprungliga zoomnivån och mittpositionen.

Lägg till rasterlager

De mest använda rasterlagren är de kaklade lagren, som tillhandahålls av OpenStreetMap, Stamen, Bing, etc. Tiled-lager representeras av klassen ol.layer.Tile och måste använda en källa som vet hur man laddar tiles från en viss leverantör, t.ex. ol.source.OSM eller ol.source.Stamen:

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

Du kan lägga till lager på kartan på två sätt:

  • När du konstruerar ol.Map ska du använda egenskapen layers:

    var map = new ol.Map({
  ...
  layers: [osm, stamen]
  ...
});

  • Lägg till dem manuellt med metoden map.addLayer():

    map.addLayer(osm);
map.addLayer(stamen);

Lägg till vektorlager

Vektorlager representeras av klassen ol.layer.Vector och måste använda en källa som är lämplig för att läsa vektorformatet, som ol.source.GeoJSON, ol.source.KML eller ol.source.TopoJSON.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

// Add Vector layer to map
map.addLayer(vectorLayer);
../_images/openlayers-vector.png

Observera att vi i den tidigare koden måste ändra url_to_file för att peka på en giltig GeoJSON-fil placerad på vår server. Observera att Javascript-säkerhet förhindrar inköp av datauppsättningar från en extern URL på en annan domän / port (a.k.a. samma ursprungspolicy).

Funktioner kan också skapas manuellt. I det här fallet måste vi skapa en geometri som representerar funktionen:

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add Vector layer to map
map.addLayer(vectorLayer);

Tillämpa stil på funktioner

Funktioner inom vektorlager kan stylas. Stilen bestäms av en kombination av fill, stroke, text och image, som alla är valfria. Dessutom kan en stil tillämpas på ett lager, vilket bestämmer stilen för alla ingående funktioner, eller på en enskild funktion.

En stil representeras av klassen ol.style.Style som har egenskaper för att ställa in fill, stroke, text och image som ska tillämpas. I nästa exempel visas datauppsättningen World’s administrative limits med grön fyllning och streck:

../_images/openlayers-styling.png 
var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

I koden har vi laddat en TopoJSON-fil och stylat den genom egenskapen style. Vi har ställt in fill och stroke, som krävs för linjer och polygoner, och en image (i det här fallet en cirkel) som används för punktfunktioner.

Arbeta med evenemang

De flesta av komponenterna, som karta, lager eller kontroller, utlöser händelser för att meddela ändringar. Vi kan t.ex. få ett meddelande varje gång musen flyttas över kartan eller när en funktion läggs till i ett vektorlager osv.

Händelser kan enkelt registreras på ett objekt med metoden on() och avregistreras med un().

Följande kod registrerar en händelse på en kartinstans och kommer att meddelas varje gång pekaren flyttas. I callback-funktionen erhåller vi pekarens koordinater och skriver ut dem i webbläsarkonsolen i två olika projektioner.

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});

Hur vill du gå vidare?

Ibland är det snabbaste sättet att ta reda på hur OpenLayers fungerar att titta på exempel och deras källkod. Du hittar mer information om OpenLayers här: