Jak dodać elementy wektorowe do mapy OpenLayers 3 (ze zdjęciami)

Spisu treści:

Jak dodać elementy wektorowe do mapy OpenLayers 3 (ze zdjęciami)
Jak dodać elementy wektorowe do mapy OpenLayers 3 (ze zdjęciami)

Wideo: Jak dodać elementy wektorowe do mapy OpenLayers 3 (ze zdjęciami)

Wideo: Jak dodać elementy wektorowe do mapy OpenLayers 3 (ze zdjęciami)
Wideo: jak zalogować się do komputera gdy zapomni się hasła #shorts 2024, Marsz
Anonim

OpenLayers to potężne narzędzie JavaScript, które umożliwia nam tworzenie i wyświetlanie wszelkiego rodzaju map na stronie internetowej. W tym artykule dowiesz się, jak dodać punkt i funkcję ciągu liniowego, a następnie przekształcić ich odwzorowania tak, aby wykorzystywały współrzędne, a następnie dodać kolor, ustawiając styl warstwy.

Pamiętaj, że aby śledzić ten artykuł, musisz mieć zainstalowaną działającą mapę OpenLayers na stronie internetowej. Jeśli go nie masz, zobacz Jak zrobić mapę za pomocą OpenLayers 3.

Kroki

Część 1 z 3: Dodawanie funkcji ciągów punktów i linii

Krok 1. Utwórz obiekt punktowy

Po prostu skopiuj następujący wiersz kodu do swojego

element:

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

Krok 2. Ustaw geometrię punktu

Aby wskazać OpenLayers, gdzie umieścić punkt, musisz utworzyć geometrię i nadać jej zestaw współrzędnych, czyli tablicę w postaci [długość geograficzna (E-W), szerokość geograficzna (N-S)]. Poniższy kod tworzy to i ustawia geometrię punktu:

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

Krok 3. Utwórz funkcję ciągu liniowego

Ciągi linii to linie proste podzielone na segmenty. Tworzymy je tak samo jak punkty, ale dla każdego punktu ciągu linii podajemy parę współrzędnych:

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

Krok 4. Dodaj elementy do warstwy wektorowej

Aby dodać obiekty do mapy, musisz dodać je do źródła, które dodajesz do warstwy wektorowej, którą następnie możesz dodać do mapy:

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

Część 2 z 3: Przekształcanie geometrii obiektów w celu wykorzystania współrzędnych

Podobnie jak w przypadku każdego potężnego oprogramowania do mapowania, mapy OpenLayers mogą mieć różne warstwy z różnymi sposobami wyświetlania informacji. Ponieważ Ziemia jest kulą ziemską, a nie płaską, kiedy próbujemy wyświetlić ją na naszych płaskich mapach, oprogramowanie musi dostosować lokalizacje do płaskiej mapy. Te różne sposoby wyświetlania informacji o mapie są nazywane projekcje. Aby użyć warstwy wektorowej i warstwy kafli razem na tej samej mapie, musimy przekształcić warstwy z jednej projekcji na drugą.

Krok 1. Umieść funkcje w tablicy

Zaczynamy od złożenia razem funkcji, które chcemy przekształcić w tablicę, przez którą możemy iterować.

var features = [point_feature, linestring_feature];

Krok 2. Napisz funkcję przekształcenia

W OpenLayers możemy użyć funkcji transform() na obiekcie geometrii każdej funkcji. Umieść ten kod przekształcenia w funkcji, którą możemy wywołać później:

function transform_geometry(element) { var current_projection = new ol.proj. Projection({kod: "EPSG:4326"}); var nowy_rzut = warstwa_kafelków.getSource().getProjection(); element.getGeometry().transform(bieżący_rzut, nowy_rzut);); }

Krok 3. Wywołaj funkcję transformacji funkcji

Teraz po prostu iteruj po tablicy.

features.forEach(transform_geometry);

Część 3 z 3: Ustawianie stylu warstwy wektorowej

Aby zmienić wygląd każdego obiektu na mapie, musimy utworzyć i zastosować styl. Style mogą zmieniać kolory, rozmiary i inne atrybuty punktów i linii, a także wyświetlać obrazy dla każdego punktu, co jest bardzo przydatne w przypadku map niestandardowych. Ta sekcja nie jest konieczna, ale jest zabawna i przydatna.

Krok 1. Utwórz wypełnienie i stoke

Utwórz obiekt stylu wypełnienia i półprzezroczysty czerwony kolor oraz styl obrysu (linii), który jest ciągłą czerwoną linią:

var fill = new ol.style. Fill({ color: [180, 0, 0, 0.3] }); var stroke = new ol.style. Stroke({ color: [180, 0, 0, 1], width: 1 });

Krok 2. Utwórz styl i zastosuj go do warstwy

Obiekt stylu OpenLayers jest dość potężny, ale na razie ustawimy tylko wypełnienie i obrys:

var style = new ol.style. Style({ image: new ol.style. Circle({ wypełnienie: wypełnienie, obrys: obrys, promień: 8 }), wypełnienie: wypełnienie, obrys: obrys }); warstwa_wektora.setStyle(styl);

Zalecana: