OpenLayers on võimas JavaScripti tööriist, mis võimaldab meil luua ja kuvada veebisaidil igasuguseid kaarte. See artikkel juhendab teid punkti ja joonestringi funktsiooni lisamisel, seejärel nende projektsioonide muutmisel koordinaatideks, seejärel lisage kihi stiili määrates värvi. Pange tähele, et jälgimiseks peab teil olema veebilehele installitud töötav OpenLayersi kaart see artikkel. Kui teil seda pole, vaadake jaotist Kuidas teha kaarti OpenLayers 3 abil.
1
Loo punktifunktsioon. Lihtsalt kopeerige järgmine koodirida oma elementi :.var point_feature = new ol.Feature({ });
2
Määrake punkti geomeetria. Et anda OpenLayersile teada, kuhu punkt paigutada, peate looma geomeetria ja andma sellele koordinaatide komplekti, mis on massiiv kujul [pikkuskraad (E-W), laiuskraad (N-S)]. Järgmine kood loob selle ja määrab punkti geomeetria:var point_geom = new ol.geom.Point( [20, 20]);point_feature.setGeometry(point_geom);
3
Looge reastringi funktsioon. Line stringid on sirgjooned, mis on jagatud segmentideks. Loome need täpselt nagu punktid, kuid anname igale joonestringi punktile koordinaatide paari:var linestring_feature = new ol.Feature({ geometry: new ol.geom.LineString( [[10, 20], [20, 10], [30, 20]] )});
4
Lisage funktsioonid vektorkihile. Objektide lisamiseks kaardile peate need lisama allikasse, mille lisate vektorikihile, mille saate seejärel lisada kaardile:var vector_layer = new ol.layer.Vector({ allikas: new ol. source.Vector({ funktsioonid: [punkti_funktsioon, joonestringi_funktsioon] })})map.addLayer(vektori_kiht);
5
Pange funktsioonid massiivi. Alustuseks paneme funktsioonid, mida tahame teisendada, kokku massiiviks, mida saame itereerida läbi.var features = [ point_feature, linestring_feature];
6
Kirjutage teisendusfunktsioon. OpenLayersis saame iga funktsiooni geomeetriaobjektil kasutada funktsiooni transform(). Pane see teisenduskood funktsiooniks, mida saame hiljem kutsuda:function transform_geometry(element) { var current_projection = new ol.proj.Projection({kood: “EPSG:4326”}); var uus_projektsioon = plaadi_kiht.getSource().getProjection(); element.getGeometry().transform(praegune_projektsioon, uus_projektsioon); );}
7
Kutsuge funktsioonide teisendusfunktsiooni. Nüüd lihtsalt korrake massiivi.features.forEach(transform_geometry);
8
Loo täidis ja keeda. Looge täitmisstiili objekt ja poolläbipaistev punane värv ning joone (joone) stiil, mis on pidev punane joon:var fill = new ol.style.Fill({ color: [180, 0, 0, 0.3]} );var insult = new ol.style.Stroke({värv: [180, 0, 0, 1], laius: 1});
9
Looge stiil ja rakendage see kihile. OpenLayersi stiiliobjekt on üsna võimas, kuid me määrame praegu ainult täidise ja joone: var style = new ol.style.Style({ pilt: new ol.style.Circle({ fill: fill, stroke: tõmme, raadius: 8 }), täitmine: täitmine, tõmme: tõmme});vector_layer.setStyle(style);
10
Vaadake valmis kaarti.