Az OpenLayers egy hatékony JavaScript eszköz, amely lehetővé teszi számunkra, hogy mindenféle térképet hozzunk létre és jelenítsünk meg egy webhelyen. Ez a cikk útmutatást ad egy pont és egy vonal karakterlánc funkció hozzáadásához, majd átalakítja a vetületeiket a koordináták használatához, majd hozzáad egy színt a réteg stílusának beállításával.
Felhívjuk figyelmét, hogy a cikk követéséhez működő OpenLayers térképet kell telepítenie egy weboldalra. Ha még nincs ilyen, olvassa el a Térkép készítése az OpenLayers 3 használatával című részt.
Lépések
Rész 1 /3: Pont és vonal karakterláncok hozzáadása
1. lépés. Hozzon létre egy pontfunkciót
Egyszerűen másolja be az alábbi kódsort a saját kódjába
elem:
var point_feature = new ol. Feature ({});
2. lépés Állítsa be a pont geometriáját
Ha meg szeretné mondani az OpenLayers számára, hogy hová helyezze a pontot, létre kell hoznia egy geometriát, és meg kell adnia egy koordináta-halmazt, amely tömb [hosszúság (K-Ny), szélesség (É-S)] formájában. A következő kód létrehozza ezt, és beállítja a pont geometriáját:
var pont_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (pont_geom);
3. Létrehoz egy vonal karakterlánc funkciót
A vonalláncok szegmensekre bontott egyenesek. Pontként hozzuk létre őket, de megadunk egy pár koordinátát az egyenes karakterlánc minden pontjához:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
4. lépés: Adja hozzá a jellemzőket egy vektorréteghez
A funkciók térképhez való hozzáadásához hozzá kell adnia őket egy forráshoz, amelyet hozzáadhat egy vektorréteghez, majd hozzáadhatja a térképhez:
var vector_layer = new ol.layer. Vector ({forrás: new ol.source. Vector ({features: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
2. rész a 3 -ból: A szolgáltatások geometriájának átalakítása a koordináták használatára
Mint minden erőteljes leképező szoftver, az OpenLayers térképek különböző rétegekkel rendelkezhetnek, különböző módon megjelenítve az információkat. Mivel a Föld egy földgömb, és nem lapos, amikor megpróbáljuk megjeleníteni azt a lapos térképeinken, a szoftvernek hozzá kell igazítania a helyeket a lapos térképhez. Ezeket a térképi információk megjelenítésének különböző módjait hívják előrejelzések. Ha egy vektorréteget és egy csempefóliát együtt használunk ugyanazon a térképen, azt jelenti, hogy át kell alakítanunk a rétegeket egyik vetületről a másikra.
1. lépés. Tegye a funkciókat egy tömbbe
Kezdjük azzal, hogy az átalakítani kívánt funkciókat tömbré tesszük, amelyen keresztül iterálhatunk.
var features = [pont_funkció, vonalvezetés_feature];
2. lépés Írja be az átalakítási függvényt
Az OpenLayers alkalmazásban az egyes funkciók geometriai objektumán használhatjuk a transform () függvényt. Helyezze ezt az átalakítási kódot egy függvénybe, amelyet később meghívhatunk:
function transform_geometry (elem) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Lépés 3. Hívja fel a funkciókon található átalakítási funkciót
Most egyszerűen ismételje meg a tömböt.
features.forEach (transform_geometry);
Rész 3 /3: A vektorréteg stílusának beállítása
Ahhoz, hogy megváltoztassuk a térkép egyes jellemzőit, létre kell hoznunk és alkalmazni kell egy stílust. A stílusok megváltoztathatják a pontok és vonalak színét, méretét és egyéb attribútumait, és képeket is megjeleníthetnek minden ponthoz, ami nagyon praktikus a testreszabott térképeknél. Ez a rész nem szükséges, de szórakoztató és hasznos.
1. lépés. Hozza létre a kitöltést és a töltést
Hozzon létre egy kitöltési stílusú objektumot és egy félig átlátszó vörös színt, valamint egy vonal (vonal) stílust, amely egyszínű piros vonal:
var fill = new ol.style. Fill ({szín: [180, 0, 0, 0,3]}); var stroke = new ol.style. Stroke ({szín: [180, 0, 0, 1], szélesség: 1});
2. lépés: Hozza létre a stílust, és alkalmazza a rétegre
Az OpenLayers stílusú objektum meglehetősen erős, de egyelőre csak a kitöltést és a körvonalat állítjuk be:
var stílus = new ol.style. Style ({kép: new ol.style. Circle ({fill: fill, stroke, stroke: stroke, sugar: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (stílus);
