Hoe om vektorfunksies by `n Openlayers 3-kaart (met prente) te voeg

OpenLayers is `n kragtige jаvascript instrument wat ons in staat stel om allerhande kaarte op `n webwerf te skep en te vertoon. Hierdie artikel sal u lei om `n punt en `n lynstringfunksie by te voeg, en verander dan hul projeksies om koördinate te gebruik, voeg dan `n bietjie kleur by deur die laag se styl te stel.

Let asseblief daarop dat u `n werkopleiding moet hê wat in `n webblad geïnstalleer moet word om hierdie artikel te volg. As jy nie een het nie, kyk hoe om `n kaart te maak met OpenLayers 3.

Stappe

Deel 1 van 3:

Voeg punt- en lynstringfunksies by

1. Skep `n punt funksie. Kopieer die volgende reël kode in u Element:.

Var Point_Feature = New Ol.Funksie ({})-

2. Stel die punt se meetkunde in. Om openlayers te vertel waar die punt moet plaas, moet jy `n meetkunde skep en dit `n stel koördinate gee, wat `n skikking in die vorm van [lengtegraad (e-W), breedtegraad (N-S)]. Die volgende kode skep dit en stel die punt se meetkunde:

VAR PUNT_GEOM = NUWE OL.geom.Punt ([20, 20]) - Point_Feature.SetGometrie (Point_Geom)-

3. Skep `n lynstringfunksie. Lynstringe is reguit lyne in segmente gebreek. Ons skep hulle net soos punte, maar ons bied `n paar koördinate vir elke punt van die lynstring:

var linestring_feature = nuwe ol.Funksie ({geometrie: nuwe ol.geom.Linestring ([[10, 20], [20, 10], [30, 20]]))-

4. Voeg die funksies by `n vektorlaag. Om die funksies by die kaart te voeg, moet jy dit by `n bron voeg, wat jy by `n vektorlaag voeg, wat jy dan kan byvoeg by die kaart:

varvector_layer = nuwe ol.laag.Vector ({Bron: New Ol.bron.Vektor ({funksies: [point_feature, linestring_feature]}))) Kaart.addlayer (vector_layer)-

Deel 2 van 3:

Omskep die funksies se geometrieë om koördinate te gebruik

Soos met enige kragtige kartering sagteware, kan openlayers kaarte verskillende lae hê met verskillende maniere om inligting te vertoon. Omdat die Aarde `n wêreld is en nie plat is nie, wanneer ons dit op ons plat kaarte probeer vertoon, moet die sagteware die plekke aanpas om die platkaart aan te pas. Hierdie verskillende maniere om kaartinligting te vertoon, word genoem projeksies. Om `n vektorlaag en `n teëllaag op dieselfde kaart te gebruik, beteken ons dat ons die lae van een projeksie na `n ander moet verander.

1. Plaas die eienskappe in `n skikking. Ons begin deur die funksies te plaas wat ons wil omskep in `n skikking wat ons kan iteratief deur.

var funksies = [point_feature, linestring_feature]-

2. Skryf die transform funksie. In Openlayers kan ons die transformasie () funksie op die geometrie-voorwerp van elke funksie gebruik. Sit hierdie transformode in `n funksie wat ons later kan bel:

Funksie transform_geometrie (element) {var current_projection = nuwe ol.proj.Projeksie ({Kode: "EPSG: 4326"}) - Var New_Projection = Tile_layer.Getsource ().getprojectie () - element.getsometrie ().Transformeer (huidige_projection, new_projection) -) -}

3. Bel die transformunksie op die kenmerke. Nou herhaal dit deur die skikking.

kenmerke.Foreach (Transform_Geometrie)-

Deel 3 van 3:

Stel die vektorlaag se styl in

Om te verander wat elke kenmerk op die kaart lyk, moet ons `n styl skep en toepas. Styles kan kleure, groottes en ander eienskappe van punte en lyne verander, en hulle kan ook beelde vir elke punt vertoon, wat baie handig is vir persoonlike kaarte. Hierdie afdeling is nie nodig nie, maar dit is pret en nuttig.

1. Skep die vul en stok. Skep `n vulstyl-voorwerp en `n semi-deursigtige rooi kleur, en `n beroerte (lyn) styl wat `n soliede rooi lyn is:

Var vul = nuwe ol.styl.Vul ({kleur: [180, 0, 0, 0.3])) - VAR STROKE = Nuwe OL.styl.Stroke ({kleur: [180, 0, 0, 1], breedte: 1})-

2. Skep die styl en pas dit toe op die laag. Die Openlayers-styl-voorwerp is redelik kragtig, maar ons gaan net die vulling en beroerte stel:

var style = nuwe ol.styl.Styl ({image: New ol.styl.Sirkel ({vul: vul, beroerte: beroerte, radius: 8}), vul: vul, beroerte: beroerte) - Vector_layer.Setstyl (styl)-

3. Kyk na die afgewerkte kaart.

Wenke

Moenie bang wees om te gebruik nie OpenLayers 3 API dokumentasie: Alhoewel dit eers oorweldigend is, is dit noodsaaklik om te leer hoe om nuwe dinge met openlayers te doen.

Deel op sosiale netwerke:

Hoe om vektorfunksies by `n openlayers 3-kaart te voeg

Stappe

Wenke