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);