Kā pievienot vektoru funkcijas OpenLayers 3 kartei (ar attēliem)

Satura rādītājs:

Kā pievienot vektoru funkcijas OpenLayers 3 kartei (ar attēliem)
Kā pievienot vektoru funkcijas OpenLayers 3 kartei (ar attēliem)

Video: Kā pievienot vektoru funkcijas OpenLayers 3 kartei (ar attēliem)

Video: Kā pievienot vektoru funkcijas OpenLayers 3 kartei (ar attēliem)
Video: How To Track Logon Sessions with Windows Security Log 2024, Marts
Anonim

OpenLayers ir spēcīgs JavaScript rīks, kas ļauj mums izveidot un attēlot visu veidu kartes vietnē. Šis raksts palīdzēs jums pievienot punktu un līniju virknes līdzekli, pēc tam pārveidot to projekcijas, lai izmantotu koordinātas, pēc tam pievienojot krāsu, iestatot slāņa stilu.

Lūdzu, ņemiet vērā, ka, lai izpildītu šo rakstu, tīmekļa lapā ir jābūt instalētai strādājošai OpenLayers kartei. Ja jums tādas nav, skatiet sadaļu Kā izveidot karti, izmantojot OpenLayers 3.

Soļi

1. daļa no 3: Punktu un līniju virkņu funkciju pievienošana

1. solis. Izveidojiet punktu līdzekli

Vienkārši nokopējiet šādu koda rindiņu savā

elements:

var point_feature = new ol. Feature ({});

2. solis. Iestatiet punkta ģeometriju

Lai pastāstītu OpenLayers, kur novietot punktu, jums ir jāizveido ģeometrija un jāpiešķir tai koordinātu kopa, kas ir masīvs [garuma (E-W), platuma (N-S)] formā. Šis kods to izveido un nosaka punkta ģeometriju:

var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);

Solis 3. Izveidojiet līnijas virknes līdzekli

Līniju virknes ir taisnas līnijas, kas sadalītas segmentos. Mēs tos veidojam tāpat kā punktus, bet katram līnijas virknes punktam sniedzam koordinātu pāri:

var linestring_feature = new ol. Feature ({ģeometrija: new ol.geom. LineString (

Solis 4. Pievienojiet funkcijas vektoru slānim

Lai kartei pievienotu funkcijas, tās jāpievieno avotam, ko pievienojat vektoru slānim, un pēc tam varat pievienot kartei:

var vector_layer = new ol.layer. Vector ({avots: new ol.source. Vector ({Features: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);

2. daļa no 3: Objektu ģeometrijas pārveidošana, lai izmantotu koordinātas

Tāpat kā jebkurai jaudīgai kartēšanas programmatūrai, OpenLayers kartēm var būt dažādi slāņi ar dažādiem informācijas parādīšanas veidiem. Tā kā Zeme ir globuss un nav plakana, tad, mēģinot to parādīt mūsu plakanās kartēs, programmatūrai ir jāpielāgo atrašanās vietas, lai tās atbilstu plakanajai kartei. Tiek saukti šie dažādie kartes informācijas attēlošanas veidi prognozes. Lai vienā kartē kopā izmantotu vektoru slāni un flīžu slāni, mums ir jāpārveido slāņi no vienas projekcijas uz otru.

1. darbība. Ievietojiet funkcijas masīvā

Mēs sākam, apvienojot funkcijas, kuras mēs vēlamies pārveidot, masīvā, kuru mēs varam atkārtot.

var features = [punkta_iezīme, iezīmju_iezīme];

2. solis. Uzrakstiet pārveidošanas funkciju

OpenLayers mēs varam izmantot funkciju transform () katra objekta ģeometrijas objektā. Ievietojiet šo pārveidošanas kodu funkcijā, kuru varam izsaukt vēlāk:

funkcija transform_geometry (elements) {var current_projection = new ol.proj. Projection ({kods: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }

Solis 3. Izsauciet funkciju pārveidošanas funkciju

Tagad vienkārši atkārtojiet masīvu.

features.forEach (transform_geometry);

3. daļa no 3: Vektora slāņa stila iestatīšana

Lai mainītu katras kartes funkcijas, mums ir jāizveido un jāpiemēro stils. Stili var mainīt krāsu, izmēru un citus punktu un līniju atribūtus, kā arī var parādīt katra punkta attēlus, kas ir ļoti ērti pielāgotajām kartēm. Šī sadaļa nav nepieciešama, taču tā ir jautra un noderīga.

1. solis. Izveidojiet pildījumu

Izveidojiet aizpildījuma stila objektu un daļēji caurspīdīgu sarkanu krāsu, kā arī insulta (līnijas) stilu, kas ir stabila sarkana līnija.

var fill = new ol.style. Fill ({krāsa: [180, 0, 0, 0,3]}); var insults = new ol.style. Stroke ({krāsa: [180, 0, 0, 1], platums: 1});

2. solis. Izveidojiet stilu un izmantojiet to slānim

OpenLayers stila objekts ir diezgan spēcīgs, taču pagaidām mēs tikai iestatīsim aizpildījumu un insultu:

var stils = jauns ol.style. Style ({attēls: jauns ol.style. Circle ({fill: fill, stroke, stroke: radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (stils);

Ieteicams: