OpenLayers - bu JavaScript -ning kuchli vositasi bo'lib, u bizga har xil veb -sayt xaritalarini yaratish va ko'rsatish imkonini beradi. Ushbu maqola sizga nuqta va chiziqlar qatorini qo'shish bo'yicha ko'rsatma beradi, so'ngra ularning proektsiyalarini koordinatalardan foydalanishga o'zgartiradi, so'ngra qatlam uslubini o'rnatib, rang qo'shadi.
E'tibor bering, ushbu maqolaga amal qilish uchun veb -sahifada OpenLayers ishchi xaritasi o'rnatilgan bo'lishi kerak. Agar sizda yo'q bo'lsa, qarang: OpenLayers yordamida xaritani qanday qilish kerak 3.
Qadamlar
3dan 1 -qism: nuqta va chiziqlar qatorini qo'shish
Qadam 1. nuqta xususiyatini yarating
Quyidagi kod qatorini o'zingizga nusxa ko'chiring
element:
var point_feature = yangi ol. Feature ({});
2 -qadam. Nuqtaning geometriyasini o'rnating
OpenLayers-ga nuqtani qaerga qo'yish kerakligini aytish uchun siz geometriya yaratishingiz va unga [uzunlik (E-V), kenglik (N-S)] shaklidagi koordinatalar to'plamini berishingiz kerak. Quyidagi kod buni yaratadi va nuqta geometriyasini o'rnatadi:
var point_geom = yangi ol.geom. Point ([20, 20]); point_feature.setGeometry (nuqta_geom);
Qadam 3. Chiziq satrining xususiyatini yarating
Chiziq satrlari - bu segmentlarga bo'lingan to'g'ri chiziqlar. Biz ularni xuddi nuqta kabi yaratamiz, lekin biz chiziqlar satrining har bir nuqtasi uchun bir juft koordinatalarni taqdim etamiz:
var linestring_feature = yangi ol. Feature ({geometriya: yangi ol.geom. LineString (
Qadam 4. Xususiyatlarni vektor qatlamiga qo'shing
Xususiyatlarni xaritaga qo'shish uchun siz ularni manbaga qo'shishingiz kerak, uni vektor qatlamiga qo'shasiz, keyin xaritaga qo'shishingiz mumkin:
var vector_layer = yangi ol.layer. Vector ({manba: yangi ol.source. Vector ({xususiyatlar: [nuqta_funktsiyasi, linestring_feature]})})) map.addLayer (vektor_layer);
3 -qismning 2 -qismi: Xususiyatlar geometriyasini koordinatalarni ishlatish uchun o'zgartirish
Har qanday kuchli xaritalash dasturida bo'lgani kabi, OpenLayers xaritalarida ham ma'lumotlarni ko'rsatish usullari har xil bo'lgan turli qatlamlar bo'lishi mumkin. Er - bu globus va tekis emasligi sababli, biz uni tekis xaritalarimizda ko'rsatishga harakat qilsak, dasturiy ta'minot tekis xaritaga mos keladigan joylarni sozlashi kerak. Xarita ma'lumotlarini ko'rsatishning bu xil usullari deyiladi prognozlar. Vektorli qatlam va kafel qatlamini bir xaritada birgalikda ishlatish, biz qatlamlarni bir proektsiyadan ikkinchisiga o'tkazishimiz kerakligini bildiradi.
Qadam 1. Xususiyatlarni qatorga qo'ying
Biz aylantirmoqchi bo'lgan xususiyatlarni birlashtiruvchi qatorga qo'shishdan boshlaymiz.
var xususiyatlari = [nuqta_funktsiyasi, linestring_feature];
Qadam 2. O'zgartirish funktsiyasini yozing
OpenLayers -da biz har bir xususiyatning geometriya ob'ektidagi transform () funktsiyasidan foydalanishimiz mumkin. Ushbu konvertatsiya kodini keyinchalik chaqira oladigan funktsiyaga qo'ying:
transform_geometry funktsiyasi (element) {var current_projection = new ol.proj. Projection ({kod: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). aylantirish (joriy_projeksiyon, yangi_projeksiyon);); }
Qadam 3. Xususiyatlar bo'yicha o'zgartirish funktsiyasini chaqiring
Endi faqat qator orqali takrorlang.
xususiyatlari.forEach (transform_geometry);
3 dan 3 qism: Vektor qatlamining uslubini sozlash
Xaritadagi har bir xususiyatning ko'rinishini o'zgartirish uchun biz uslub yaratishimiz va qo'llashimiz kerak. Uslublar ranglarni, o'lchamlarni va nuqta va chiziqlarning boshqa atributlarini o'zgartirishi mumkin, shuningdek, har bir nuqta uchun tasvirlarni ko'rsatishi mumkin, bu moslashtirilgan xaritalar uchun juda qulaydir. Bu bo'lim shart emas, lekin qiziqarli va foydali.
Qadam 1. To'ldirish va stoke yarating
To'ldirish uslubi ob'ektini va yarim shaffof qizil rangni va qizil chiziqli chiziq (chiziq) uslubini yarating:
var fill = new ol.style. Fill ({rang: [180, 0, 0, 0.3]}); var insult = yangi ol.style. Strok ({rang: [180, 0, 0, 1], kenglik: 1});
Qadam 2. Uslubni yarating va uni qatlamga qo'llang
OpenLayers uslubidagi ob'ekt juda kuchli, lekin biz hozircha to'ldirish va chizishni o'rnatamiz:
var style = new ol.style. Style ({image: new ol.style. Circle ({to'ldirish: to'ldirish, urish: zarba, radius: 8}), to'ldirish: to'ldirish, urish: urish}); vector_layer.setStyle (uslub);
