Paano Magdagdag ng Mga Tampok ng Vector sa isang OpenLayers 3 Map (na may Mga Larawan)

Talaan ng mga Nilalaman:

Paano Magdagdag ng Mga Tampok ng Vector sa isang OpenLayers 3 Map (na may Mga Larawan)
Paano Magdagdag ng Mga Tampok ng Vector sa isang OpenLayers 3 Map (na may Mga Larawan)

Video: Paano Magdagdag ng Mga Tampok ng Vector sa isang OpenLayers 3 Map (na may Mga Larawan)

Video: Paano Magdagdag ng Mga Tampok ng Vector sa isang OpenLayers 3 Map (na may Mga Larawan)
Video: Pagpupulong #5-4/29/2022 | Pagpupulong at diyalogo ng pangkat ng ETF 2024, Marso
Anonim

Ang OpenLayers ay isang malakas na tool sa JavaScript na nagbibigay-daan sa amin upang lumikha at ipakita ang lahat ng uri ng mga mapa sa isang website. Gagabayan ka ng artikulong ito sa pagdaragdag ng isang punto at isang tampok na linya ng string, pagkatapos ay ibahin ang anyo ang kanilang mga pagpapakita upang magamit ang mga coordinate, pagkatapos ay magdagdag ng ilang kulay sa pamamagitan ng pagtatakda ng estilo ng layer.

Mangyaring tandaan na kailangan mong magkaroon ng isang gumaganang mapa ng OpenLayers na naka-install sa isang webpage upang sundin ang artikulong ito. Kung wala ka, tingnan ang Paano Gumawa ng Mapa Gamit ang OpenLayers 3.

Mga hakbang

Bahagi 1 ng 3: Mga Pagdaragdag ng Mga Tampok ng String ng Point at Line

Hakbang 1. Lumikha ng isang tampok na point

Kopyahin lamang ang sumusunod na linya ng code sa iyong

elemento:

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

Hakbang 2. Itakda ang geometry ng punto

Upang sabihin sa OpenLayers kung saan ilalagay ang punto, kailangan mong lumikha ng isang geometry at bigyan ito ng isang hanay ng mga coordinate, na isang array sa anyo ng [longitude (E-W), latitude (N-S)]. Ang sumusunod na code ay lilikha nito at itakda ang geometry ng punto:

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

Hakbang 3. Lumikha ng isang tampok na linya ng string

Ang mga string ng linya ay tuwid na mga linya na pinaghiwa-hiwalay sa mga segment. Ginagawa namin ang mga ito tulad ng mga puntos, ngunit nagbibigay kami ng isang pares ng mga coordinate para sa bawat punto ng linya ng linya:

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

Hakbang 4. Idagdag ang mga tampok sa isang layer ng vector

Upang idagdag ang mga tampok sa mapa, kailangan mong idagdag ang mga ito sa isang mapagkukunan, na idaragdag mo sa isang layer ng vector, na maaari mong idagdag sa mapa:

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

Bahagi 2 ng 3: Pagbabago ng Mga Tampok na Mga Geometry upang Gumamit ng Mga Coordinate

Tulad ng anumang malakas na software ng pagmamapa, ang mga mapa ng OpenLayers ay maaaring magkaroon ng iba't ibang mga layer na may iba't ibang mga paraan ng pagpapakita ng impormasyon. Dahil ang Earth ay isang mundo at hindi patag, kapag sinubukan naming ipakita ito sa aming mga patag na mapa, kailangang ayusin ng software ang mga lokasyon upang tumugma sa patag na mapa. Ang iba't ibang mga paraan upang maipakita ang impormasyon sa mapa ay tinatawag mga pagpapakita. Upang magamit ang isang layer ng vector at isang tile layer magkasama sa parehong mapa nangangahulugan na kailangan nating ibahin ang mga layer mula sa isang projection papunta sa isa pa.

Hakbang 1. Ilagay ang mga tampok sa isang array

Nagsisimula kami sa pamamagitan ng paglalagay ng mga tampok na nais naming ibahin ang anyo sa isang array na maaari naming ulitin.

var tampok = [point_feature, linestring_feature];

Hakbang 2. Isulat ang pagpapaandar ng pagbabago

Sa OpenLayers, maaari naming gamitin ang transform () na pagpapaandar sa geometry na object ng bawat tampok. Ilagay ang transform code na ito sa isang pagpapaandar na maaari nating tawagan sa ibang pagkakataon:

function transform_geometry (element) {var current_protion = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_proaction = tile_layer.getSource (). getProjection (); element.getGeometry (). ibahin ang anyo (kasalukuyang_project, bagong_project);); }

Hakbang 3. Tumawag sa pagpapaandar ng pagbabago sa mga tampok

Ngayon lamang umulit sa pamamagitan ng array.

Features.forEach (transform_geometry);

Bahagi 3 ng 3: Pagtatakda ng Estilo ng Vector Layer

Upang baguhin kung ano ang hitsura ng bawat tampok sa mapa, kailangan naming lumikha at maglapat ng isang estilo. Maaaring baguhin ng mga istilo ang mga kulay, laki, at iba pang mga katangian ng mga punto at linya, at maaari rin silang magpakita ng mga imahe para sa bawat punto, na napaka-madaling gamiting para sa na-customize na mga mapa. Ang seksyon na ito ay hindi kinakailangan, ngunit ito ay masaya at kapaki-pakinabang.

Hakbang 1. Lumikha ng punan at stoke

Lumikha ng isang bagay ng istilo ng pagpuno at isang semi-transparent na pulang kulay, at isang istilong stroke (linya) na isang solidong pulang linya:

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

Hakbang 2. Lumikha ng estilo at ilapat ito sa layer

Ang bagay na istilo ng OpenLayers ay napakalakas, ngunit itatakda lamang namin ang punan at stroke sa ngayon:

var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (style);

Inirerekumendang: