Så här lägger du till vektorfunktioner till ett OpenLayers 3-karta (med bilder)

OpenLayers är ett kraftfullt jаvascript-verktyg som gör det möjligt för oss att skapa och visa alla typer av kartor på en webbplats. Den här artikeln kommer att styra dig när du lägger till en punkt och en radsträngsfunktion, omvandla sedan sina utsprång för att använda koordinater och lägg sedan till lite färg genom att ställa in skiktets stil.

Observera att du måste ha en Working OpenLayers Map installerad i en webbsida för att följa den här artikeln. Om du inte har en, se hur du gör en karta med OpenLayers 3.

Steg

Del 1 av 3:

Lägga till punkt och linjesträngfunktioner

1. Skapa en punktfunktion. Helt enkelt kopiera följande rad av kod till din element:.

var punkt_feature = ny ol.Funktion({ })-

2. Ställ in punktens geometri. För att berätta för öppet lager där du ska placera punkten måste du skapa en geometri och ge den en uppsättning koordinater, vilket är en array i form av [longitud (E-W), Latitude (N-S)]. Följande kod skapar detta och set är poängens geometri:

var point_geom = ny ol.geom.Punkt ([20, 20]) - punkt_feature.Setgeometri (Point_geom)-

3. Skapa en linjesträngfunktion. Linjesträngar är raka linjer som är brutna i segment. Vi skapar dem precis som poäng, men vi ger ett par koordinater för varje punkt i linjesträngen:

var linestring_feature = ny ol.Funktion ({geometri: ny ol.geom.Linestring ([[10, 20], [20, 10], [30, 20]])})-

4. Lägg till funktionerna i ett vektorskikt. För att lägga till funktionerna i kartan måste du lägga till dem i en källa, som du lägger till i ett vektorskikt, som du sedan kan lägga till i kartan:

var vector_layer = ny ol.lager.Vektor ({Källa: Ny ol.källa.Vektor ({Funktioner: [Point_Feature, Linestring_Feature]})}) Karta.Addlayer (Vector_Layer)-

Del 2 av 3:

Transformera funktionerna "geometrier för att använda koordinater

Som med alla kraftfulla kartläggningsprogram kan OpenLayers Maps ha olika lager med olika sätt att visa information. Eftersom jorden är en jordklot och inte platt, när vi försöker visa den på våra platta kartor, måste programvaran justera platserna för att matcha den platta kartan. Dessa olika sätt att visa kartinformation kallas prognoser. Att använda ett vektorskikt och ett kakelskikt tillsammans på samma karta innebär vi att vi måste förvandla skikten från en projicering till en annan.

1. Sätt funktionerna i en array. Vi börjar med att sätta de funktioner som vi vill omvandla tillsammans till en array som vi kan iterative genom.

var funktioner = [punkt_feature, linestring_feature]-

2. Skriv transformationsfunktionen. I OpenLayers kan vi använda funktionen Transform () på geometriobjektet för varje funktion. Sätt den här transformationskoden till en funktion som vi kan ringa senare:

Funktionstransformation_geometri (Element) {Var Current_Projection = NEW OL.proj.Projektion ({kod: "EPSG: 4326"}) - VAR New_Projection = Tile_Layer.Getsource ().getprojektion () - element.getGeometri ().Transform (Current_Projection, New_Projection) -) -}

3. Ring omvandlingsfunktionen på funktionerna. Nu helt enkelt iterera genom matrisen.

funktioner.foreach (transform_geometri)-

Del 3 av 3:

Ställa in vektorskiktets stil

För att ändra vad varje funktion på kartan ser ut, måste vi skapa och tillämpa en stil. Stilar kan ändra färger, storlekar och andra attribut av poäng och linjer, och de kan också visa bilder för varje punkt, vilket är mycket praktiskt för anpassade kartor. Det här avsnittet är inte nödvändigt, men det är roligt och användbart.

1. Skapa fyllningen och stoke. Skapa ett Fill Style-objekt och en halvtransparent röd färg och en stroke (linje) stil som är en solid röd linje:

var fyllning = ny ol.stil.Fyll ({färg: [180, 0, 0, 0.3]}) - var stroke = ny ol.stil.Stroke ({Färg: [180, 0, 0, 1], Bredd: 1})-

2. Skapa stilen och applicera den på lagret. Openlayers Style-objektet är ganska kraftfullt, men vi kommer bara att ställa in fyllningen och stroke för nu:

var stil = ny ol.stil.Stil ({bild).stil.Cirkel ({Fill: Fill, Stroke: Stroke, Radius: 8}), Fyll: Fyll, Stroke: Stroke}) - Vector_Layer.setstyle (stil)-

3. Kolla in den färdiga kartan.

Tips

Var inte rädd att använda OpenLayers 3 API-dokumentation: Även om det är överväldigande först, är det viktigt att lära sig att göra nya saker med öppet lager.

Dela på det sociala nätverket:

Så här lägger du till vektorfunktioner till ett openlayers 3-karta

Steg

Tips