Sådan tilføjer du Vector Funktioner til et OpenLayers 3 MAP (med billeder)

OpenLayers er et kraftfuldt jаvascript-værktøj, der gør det muligt for os at oprette og vise alle mulige kort på en hjemmeside. Denne artikel vil guide dig i at tilføje et punkt og en linjestrengfunktion, og derefter omdanne deres fremskrivninger til at bruge koordinater, og tilsæt derefter en farve ved at indstille lagets stil.

Bemærk venligst, at du skal have et Working OpenLayers-kort installeret i en webside for at følge denne artikel. Hvis du ikke har en, skal du se, hvordan du laver et kort ved hjælp af OpenLayers 3.

Trin

Del 1 af 3:

Tilføjelse af punkt og line streng funktioner

1. Opret en punktfunktion. Du skal blot kopiere følgende kode for kode i din element:.

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

2. Indstil punktets geometri. For at fortælle OpenLayers, hvor du skal placere det punkt, skal du oprette en geometri og give det et sæt koordinater, hvilket er et array i form af [Longitude (E-W), Latitude (N-S)]. Følgende kode skaber dette og sæt er punktets geometri:

var point_geom = ny ol.Geom.PUNKT ([20, 20]) - POINT_FEATURE.setgeometri (point_geom)-

3. Opret en line streng funktion. Line strings er lige linjer brudt i segmenter. Vi skaber dem ligesom point, men vi leverer et par koordinater for hvert punkt af linjestrengen:

var linestring_feature = ny ol.Feature ({Geometry: New OL.Geom.Linestring ([[10, 20], [20, 10], [30, 20]])})-

4. Tilføj funktionerne til et vektorlag. For at tilføje funktionerne til kortet skal du tilføje dem til en kilde, som du tilføjer til et vektorlag, som du derefter kan tilføje til kortet:

var vektor_layer = ny ol.lag.Vektor ({Kilde: Ny OL.kilde.Vector ({Funktioner: [Point_Feature, Linestring_Feature]})}) Kort.Addlayer (vector_layer)-

Del 2 af 3:

Omdanne funktionerne `geometrier at bruge koordinater

Som med enhver kraftig kortlægningssoftware kan OpenLayers-kortene have forskellige lag med forskellige måder at vise information på. Fordi Jorden er en kloden og ikke flad, når vi forsøger at vise det på vores flade kort, skal softwaren justere placeringen for at matche det flade kort. Disse forskellige måder at vise kortoplysninger kaldes Fremskrivninger. For at bruge et vektorlag og et fliserlag sammen på samme kort betyder vi, at vi skal omdanne lagene fra et projektion til en anden.

1. Sæt funktionerne i en matrix. Vi starter med at sætte de funktioner, vi ønsker at omdanne sammen til en matrix, som vi kan iterative gennem.

VAR-funktioner = [point_feature, linestring_feature]-

2. Skriv transformationsfunktionen. I OpenLayers kan vi bruge transformationen () -funktionen på geometriobjektet for hver funktion. Sæt denne transformationskode til en funktion, som vi kan ringe senere:

funktion transform_geometri (element) {var current_projektion = ny ol.Proj.Projektion ({kode: "EPSG: 4326"}) - Var New_Projection = Tile_Layer.GetSource ().Getprojektion () - Element.gentometri ().Transform (Current_Projection, New_Projection) -) -}

3. Ring til transformationsfunktionen på funktionerne. Nu simpelthen iterere gennem arrayet.

funktioner.foreach (transform_geometri)-

Del 3 af 3:

Indstilling af vektorlagens stil

For at ændre, hvad hver funktion på kortet ser ud, skal vi oprette og anvende en stil. Stil kan ændre farver, størrelser og andre attributter af point og linjer, og de kan også vise billeder til hvert punkt, hvilket er meget praktisk for tilpassede kort. Dette afsnit er ikke nødvendigt, men det er sjovt og nyttigt.

1. Opret fill og stoke. Opret en Fill Style objekt og en halvgennemsigtig rød farve og en slagtilfælde (linje) stil, der er en solid rød linje:

Var Fill = New OL.stil.Fyld ({farve: [180, 0, 0, 0.3]}) - Var Stroke = New OL.stil.Stroke ({farve: [180, 0, 0, 1], bredde: 1})-

2. Lav stilen og anbring det på laget. OpenLayers Style-objektet er ret kraftfuld, men vi vil kun sætte fyld og slagtilfælde for nu:

var stil = ny ol.stil.Style ({image: New OL.stil.Cirkel ({Fill: Fyld, Stroke: Stroke, Radius: 8}), Fyld: Fyld, Stroke: Stroke}) - Vector_Layer.SetStyle (Style)-