Jag har skrivit om vad OpenLayers är, och nu har jag kommit så långt att jag kan dela med mig av några praktiska exempel hur man kan använda sig av OpenLayers.
Jag tänker skapa en grundkarta med valbara lager och ett antal tilläggslager från olika WMS tjänster på nätet.
I grunden så skall Javaskriptfilen med OpenLayers och katalogerna IMG och THEMES finnas tillgängliga där du skapar din webbkarta, men det behöver inte vara en webbserver.
Du kan redan nu se resultatet på länken här.
Genom att gå igenom källkoden till sidan så hoppas jag att du själv kan anpassa den så att den blir som du vill ha den. Jag kommer heller inte att ha med beskrivning av hela källkoden i denna artikel, men ”högerklick” och ”visa källkod” är inte så svårt. Jag har även laddat upp källkoden som PDF: geosupportsystem_OpenLayers.
I grunden är det en vanlig hemsida med fyra viktiga områden som rör själva kartan.
- Hänvisning till grundläggande skript och andra källor, exempelvis Javaskriptet för OpenLayers.
- Egen Javaskriptkod för att styra hur kartan skall se ut.
- Ett anrop till denna egna kod så att den exekveras när sidan laddas.
- En platshållare för kartan på hemsidan.
Vi börjar med platshållaren, som nästan alltid är en <div> tag i <body> delen av sidan. I mitt fall ser den ut såhär:
<div id=’karta’ style=’width: 700px; height: 500px;’> </div>
Här har jag bestämt storleken på kartan, vilket man annars kan göra i en stilmall (css fil). Platshållaren är döpt med ett id. Detta id anropas sedan från koden. Din hemsida kan se ut hur som helst i övrigt med texter, bilder, tabeller etc, så länge det finns plats för <div> taggen.
När vi ändå är i <body> delen så skall vi peka på anropet till skriptet som sker med ”onload=’starta();’” inbakat i <body> taggen. När sidan laddas så görs ett anrop till funktionen ”starta” som vi skall gå igenom härnäst. Men först måste vi nämna hänvisningarna till grundskripten.
Detta sker med en, eller i mitt fall två, <script> taggar i huvudet (<head>) på sidan.
<script type=’text/javascript’ src=’OpenLayers.js’></script>
Anropet görs till den relativa sökvägen för filen OpenLayers.js, som i mitt fall ligger på samma plats som html-dokumentet.
Jag har även med en hänvisning till ”proj4js” som är en förutsättning för att kunna hantera andra projektioner än WGS-84 och Google Mercator. Men om dina WMS resurser kan hantera EPSG:900913 (=googlE) och EPSG:4326 (WGS-84), eller om du inte vill kunna hantera andra koordinater så behövs den inte. Om du väljer att ha med den så måste du även ladda hem skriptfilerna för den från GitHub.
Själva startfunktionen ”starta” finns i en egen <script> tagg.
Det första som sker är att skapa en kartvariabel: var map;
Eftersom jag vill kunna hantera SWEREF99TM så måste jag även definiera projektionen med raden: Proj4js.defs[”EPSG:3006”] = ”proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs”;
Detta krävs då SWEREF99TM inte är inkluderad i proj4js som standard.
Nästa steg blir att skapa mina ”kontroller” i en variabel. Alla läses in i en array och anropas på samma sätt; new OpenLayers.Control.kontroll({ev inställningar})
Jag lägger till en ”ScaleLine” för att få in en skalstock. ”PanZoomBar” för knappar till zoom och panorering. ”Navigation” gör det möjligt att klicka och dra kartan med musn. ”LayerSwitcher” gör det möjligt att tända och släcka olika lager. ”Permalink” lägger till en länk som skapar en direktlänk till kartan som den ser ut just för tillfället (exempelvis den här vindkraftsparken). ”MousePosition” skriver ut koordinaterna för muspekaren med i mitt fall SWEREF99TM koordinater.
Härnäst så skapas själva kartobjektet med map = new OpenLayers.Map. Kartan hänvisar till platshållaren, eller <div> taggen, för kartan (’karta’) och tilldelas inställningar. Här väljs att enheten för kartan skall vara meter (units: ’m’) och att projektionen skall vara WGS-84. Även kontrollerna från förra steget läggs till kartan här.
Varför väljer jag WGS-84? Jo bland de WMS tjänster som jag vill visa så är det en som inte kan visa sina data i Google Mercator, vilket skulle passa bäst för att få in så mycket grundkartor som möjligt. Enda chansen är därför att välja EPSG:4326 då grundkartorna inte kan visa SWEREF99TM. Om du har en egen kartserver så styr du ju själv över vilka projektioner den skall kunna leverera, men se då till att EPSG:900913 är en av dem! (pik till Länsstyrelserna).Då var det dags för de olika lagerna i kartan. Här finns det två typer nämligen ”grundkartor” och ”lager”. Skillnaden är att bara en grundkarta kan vara tänd åt gången, medan man kan ha många lager tända samtidigt.
Jag har bara med en grundkarta, då de andra självklara valen från Google, Bing, OpenStreetMap, m.fl. inte fungerar med ett av mina WMS lager (se kommentaren ovan). Men principen för att skapa ett Google lager som baskarta är:
var google_lagernamn = new OpenLayers.Layer.Google(’Google Map Karta’, {});
Dessutom så måste en länk till Google API läggas till vid övriga skripthänvisningar:
<script src=”http://maps.google.com/maps/api/js?sensor=false”></scritp>
Som standard så får man då väglagret, vilket enkelt ändras genom att specifiera ”type” i klammerparantesen: {type: google.maps.MapTypeId.SATELLITE}. Möjliga andra alternativ är HYBRID och TERRAIN.
När jag skapar min baskarta från en WMS tjänst så gör jag det med anropet:
var wms_bas = new OpenLayers.Layer.WMS(
’Grundkarta’,
’http://vmap0.tiles.osgeo.org/wms/vmap0’,
{layers: ’basic’},
{isBaseLayer: true}
);
WMS anrop är fyra parametrar. Först ett lagernamn som man själv kan välja (’Grundkarta’) och sökvägen till servern. Därefter något vi kan kalla lager- respektive presentationsparametrar. Lagerparametrar handlar om vilket lager (layers) på servern som skall väljas och om det skall vara transparent bakgrund eller inte (lämpligt om det inte är en baskarta). I presentationsparametrarna så specificerar man om det rör sig om en grundkarta eller inte (isBaseLayer), vilket egentligen bara behövs om det inte är en grundkarta. Här kan man även styra om lagret skall vara släckt som standard (visibility) och om det skall ha någon genomskinlighet (opacity). Skillnaden mot lagerparametern ”transparent” är att där talar man om att bakgrunden skall vara helt transparent, medan ”opacity” sätter genomskinligheten på hela lagret. Hur övriga lager ser ut i kod kan du kontrollera själv i källkoden.
När alla lager är definierade så skall de läggas till på kartan. Detta görs med kommandot: map.addLayers([lista med lagernamn]);
Slutligen så skall man sätta startläget och här kan det vara klokt att använda en if-sats. Anledningen är att det går att ange kartposition med http-anropet, och om man inte har med if-satsen så tar man bort den möjligheten.
If(!map.getCenter()){
map.setCenter(new OpenLayers.LonLat(15,58));
map.zoomTo(8);
}
Här anger jag centerkoordinaten i grader eftersom jag angett att jag vill projicera min karta i WGS-84 (EPSG:4326). Om du väljer Google Mercator eller SWEREF99TM så skall LonLat(X,Y) ovan anges i det koordinatsystemet.
Och svårare än så är det inte att få till grunderna i OpenLayers…
Nu får du prova själv lite och ge dig till tåls tills jag blir klar med fortsättningen av OpenLayers. Då skall jag försöka få till redigering av data via WFS.
/Lycka till!