Jinsi ya Kuongeza Vipengele vya Vector kwa Ramani ya OpenLayers 3 (na Picha)

Orodha ya maudhui:

Jinsi ya Kuongeza Vipengele vya Vector kwa Ramani ya OpenLayers 3 (na Picha)
Jinsi ya Kuongeza Vipengele vya Vector kwa Ramani ya OpenLayers 3 (na Picha)

Video: Jinsi ya Kuongeza Vipengele vya Vector kwa Ramani ya OpenLayers 3 (na Picha)

Video: Jinsi ya Kuongeza Vipengele vya Vector kwa Ramani ya OpenLayers 3 (na Picha)
Video: Una USB Flash imeharibika? Njoo tuitengeneze 2024, Machi
Anonim

OpenLayers ni zana yenye nguvu ya JavaScript ambayo inatuwezesha kuunda na kuonyesha kila aina ya ramani kwenye wavuti. Nakala hii itakuongoza katika kuongeza alama na safu ya safu ya laini, kisha ubadilishe makadirio yao kutumia kuratibu, kisha uongeze rangi kwa kuweka mtindo wa safu.

Tafadhali kumbuka kuwa unahitaji kuwa na ramani ya OpenLayers inayofanya kazi iliyosanikishwa kwenye ukurasa wa wavuti kufuata nakala hii. Ikiwa huna moja, angalia Jinsi ya Kutengeneza Ramani Ukitumia OpenLayers 3.

Hatua

Sehemu ya 1 ya 3: Kuongeza Vipengele vya Kamba na Mstari

Hatua ya 1. Unda kipengele cha uhakika

Nakili tu mstari ufuatao wa nambari kwenye yako

kipengee:

kipengele cha var point_feature = ol mpya. Makala ({});

Hatua ya 2. Weka jiometri ya uhakika

Ili kuwaambia OpenLayers mahali pa kuweka uhakika, unahitaji kuunda jiometri na kuipatia seti ya kuratibu, ambayo ni safu katika mfumo wa [longitude (EW), latitudo (NS)]. Nambari ifuatayo inaunda hii na kuweka jiometri ya uhakika:

var point_geom = mpya ol.geom. Point ([20, 20]); onyesha_kuonyesha. Jometri (point_geom);

Hatua ya 3. Unda kipengee cha kamba ya laini

Kamba za laini ni mistari ya moja kwa moja iliyogawanywa katika sehemu. Tunaunda kama alama, lakini tunatoa kuratibu kwa kila hatua ya kamba ya laini:

safu ya var linestring_feature = ol mpya. Makala ({jiometri: ol ol mpya geom. LineString (

Hatua ya 4. Ongeza huduma kwenye safu ya vector

Ili kuongeza huduma kwenye ramani, unahitaji kuiongeza kwenye chanzo, ambacho unaongeza kwenye safu ya vector, ambayo unaweza kuongeza kwenye ramani:

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

Sehemu ya 2 ya 3: Kubadilisha Jiometri za Vipengele ili Kutumia Uratibu

Kama ilivyo na programu yoyote ya ramani yenye nguvu, ramani za OpenLayers zinaweza kuwa na tabaka tofauti na njia tofauti za kuonyesha habari. Kwa sababu Dunia ni ya ulimwengu na sio tambarare, tunapojaribu kuionyesha kwenye ramani zetu tambarare, programu hiyo inapaswa kurekebisha maeneo ili kufanana na ramani tambarare. Njia hizi tofauti za kuonyesha habari ya ramani zinaitwa makadirio. Kutumia safu ya vector na safu ya tile pamoja kwenye ramani hiyo inamaanisha lazima tubadilishe tabaka kutoka kwa makadirio moja hadi nyingine.

Hatua ya 1. Weka huduma kwenye safu

Tunaanza kwa kuweka huduma ambazo tunataka kubadilisha pamoja kuwa safu ambayo tunaweza kupitia.

makala var =

Hatua ya 2. Andika kazi ya kubadilisha

Katika OpenLayers, tunaweza kutumia kazi ya kubadilisha () kwenye kitu cha jiometri cha kila kipengee. Weka nambari hii ya kubadilisha kuwa kazi ambayo tunaweza kupiga simu baadaye:

kazi transform_geometry (element) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). kupataProjection (); element.getGeometry (). transform (sasa_projection, new_projection);); }

Hatua ya 3. Piga kazi ya kubadilisha kwenye huduma

Sasa tu iterate kupitia safu.

makala.kwaEach (transform_geometry);

Sehemu ya 3 ya 3: Kuweka Mtindo wa Vector Layer

Ili kubadilisha jinsi kila kipengee kwenye ramani kinaonekana, tunahitaji kuunda na kutumia mtindo. Mitindo inaweza kubadilisha rangi, saizi, na sifa zingine za alama na mistari, na zinaweza pia kuonyesha picha kwa kila nukta, ambayo ni rahisi sana kwa ramani zilizobinafsishwa. Sehemu hii sio lazima, lakini ni ya kufurahisha na muhimu.

Hatua ya 1. Unda kujaza na stoke

Unda kitu cha mtindo wa kujaza na rangi nyekundu yenye uwazi nusu, na mtindo wa kiharusi (mstari) ambao ni laini nyekundu.

var kujaza = mtindo mpya ol. Jaza ({rangi: [180, 0, 0, 0.3]}); var stroke = mpya ol.style. Stroke ({rangi: [180, 0, 0, 1], upana: 1});

Hatua ya 2. Unda mtindo na uitumie kwenye safu

Kitu cha mtindo wa OpenLayers kina nguvu kabisa, lakini tutaweka tu kujaza na kupigwa kwa sasa:

mtindo wa var = mpya ol.style. Style ({image: new ol.style. Circle ({jaza: jaza, kiharusi: kiharusi, radius: 8}), jaza: jaza, kiharusi: kiharusi}); vector_layer.setStyle (mtindo);

Ilipendekeza: