OpenLayers 3 газрын зураг дээр векторын онцлогийг хэрхэн нэмэх вэ (зурагтай)

Агуулгын хүснэгт:

OpenLayers 3 газрын зураг дээр векторын онцлогийг хэрхэн нэмэх вэ (зурагтай)
OpenLayers 3 газрын зураг дээр векторын онцлогийг хэрхэн нэмэх вэ (зурагтай)

Видео: OpenLayers 3 газрын зураг дээр векторын онцлогийг хэрхэн нэмэх вэ (зурагтай)

Видео: OpenLayers 3 газрын зураг дээр векторын онцлогийг хэрхэн нэмэх вэ (зурагтай)
Видео: 10 впечатляющих лагерей | Таможня и Конверсии Караваны 2024, Гуравдугаар сар
Anonim

OpenLayers бол вэбсайт дээр бүх төрлийн газрын зураг үүсгэх, харуулах боломжийг олгодог хүчирхэг JavaScript хэрэгсэл юм. Энэ нийтлэл нь цэг, шугамын тэмдэгт функцийг нэмж, координатыг ашиглахын тулд тэдгээрийн төсөөллийг өөрчилж, давхаргын хэв маягийг тохируулах замаар өнгө оруулах болно.

Энэ нийтлэлийг дагаж мөрдөхийн тулд вэб хуудсан дээр OpenLayers -ийн ажлын зураг суулгасан байх шаардлагатайг анхаарна уу. Хэрэв танд байхгүй бол OpenLayers ашиглан газрын зураг хэрхэн хийх талаар үзнэ үү 3.

Алхам

3 -ийн 1 -р хэсэг: Цэг ба шугамын онцлогийг нэмэх

Алхам 1. Цэгийн онцлогийг бий болгох

Дараах кодын мөрийг өөрийнх рүүгээ хуулж авахад л болно

бүрэлдэхүүн:

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

Алхам 2. Цэгийн геометрийг тохируулна уу

OpenLayers-т цэгийг хаана байрлуулахыг хэлэхийн тулд та геометр үүсгэж, [уртраг (E-W), өргөрөг (N-S)] хэлбэрийн массив болох координатын багц өгөх хэрэгтэй. Дараах код нь үүнийг үүсгэж, цэгийн геометрийг тохируулна.

var point_geom = шинэ ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);

Алхам 3. Шугамын мөрийн функцийг бий болгох

Шугамын мөрүүд нь сегментүүдэд хуваагдсан шулуун шугамууд юм. Бид тэдгээрийг цэгүүд шиг бүтээдэг боловч шугамын мөрийн цэг бүрт хос координат өгдөг.

var linestring_feature = шинэ ol. Feature ({геометр: шинэ ol.geom. LineString (

Алхам 4. Функцийг векторын давхаргад нэмнэ үү

Газрын зураг дээрх онцлог шинж чанаруудыг нэмэхийн тулд та тэдгээрийг эх сурвалж руу нэмэх хэрэгтэй бөгөөд үүнийг векторын давхаргад нэмж, дараа нь газрын зураг дээр нэмж болно.

var vector_layer = new ol.layer. Vector ({эх сурвалж: new ol.source. Vector ({онцлог: [point_feature, linestring_feature]})})) map.addLayer (vector_layer);

3 -ийн 2 -р хэсэг: Координатыг ашиглахын тулд геометрийн шинж чанарыг өөрчлөх

Аливаа хүчирхэг зураглалын програм хангамжийн нэгэн адил OpenLayers газрын зураг нь мэдээллийг харуулах өөр өөр аргуудтай өөр өөр давхаргатай байж болно. Дэлхий бол бөмбөрцөг бөгөөд хавтгай биш тул бид үүнийг хавтгай газрын зураг дээрээ харуулахыг оролдоход програм хангамж нь хавтгай газрын зурагтай таарч байршлыг нь тохируулах ёстой. Газрын зургийн мэдээллийг харуулах эдгээр өөр аргыг дууддаг төсөөлөл. Нэг газрын зураг дээр вектор давхарга ба хавтангийн давхаргыг хамт ашиглах нь давхаргыг нэг проекцоос нөгөө проекц руу шилжүүлэх ёстой гэсэн үг юм.

Алхам 1. Онцлогуудыг массивт оруулах

Бид хамтад нь хувиргахыг хүсч буй онцлог шинж чанаруудаа давтаж давтах боломжтой массив болгон эхлүүлж эхэлдэг.

var онцлог шинж чанарууд = [цэгийн_үйлчилгээ, linestring_feature];

Алхам 2. Трансформацийн функцийг бичнэ үү

OpenLayers дээр бид функц бүрийн геометрийн объект дээрх transform () функцийг ашиглаж болно. Энэхүү хувиргах кодыг дараа нь дуудаж болох функц болгон тавь:

transform_geometry функц (элемент) {var current_projection = new ol.proj. Projection ({код: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). хувиргах (current_projection, new_projection);); }

Алхам 3. Онцлог шинж чанарууд дээр хувиргах функцийг дуудах

Одоо зүгээр л массивыг давтана уу.

онцлог.forEach (transform_geometry);

3 -р хэсгийн 3: Векторын давхаргын хэв маягийг тохируулах

Газрын зураг дээрх онцлог шинж чанар бүрийг өөрчлөхийн тулд бид хэв маягийг бий болгож, хэрэглэх хэрэгтэй. Загвар нь өнгө, хэмжээ, цэг, шугамын бусад шинж чанарыг өөрчилж чаддаг бөгөөд цэг тус бүрийн зургийг харуулах боломжтой бөгөөд энэ нь өөрчлөн тохируулсан газрын зураг дээр маш тохиромжтой байдаг. Энэ хэсэг шаардлагагүй, гэхдээ хөгжилтэй, хэрэгтэй.

Алхам 1. Дүүргэлт ба сток үүсгэнэ үү

Бөглөх загварын объект, хагас тунгалаг улаан өнгө, хатуу улаан шугамтай цус харвалт (шугам) хэв маягийг үүсгэнэ үү.

var fill = new ol.style. Fill ({өнгө: [180, 0, 0, 0.3]}); var цус харвалт = шинэ ol.style. Sroke ({өнгө: [180, 0, 0, 1], өргөн: 1});

Алхам 2. Загварыг үүсгэж, давхаргад хэрэглэнэ

OpenLayers загварын объект нь нэлээд хүчирхэг боловч бид одоохондоо дүүргэлтийг тохируулах болно.

var style = new ol.style. Style ({image: new ol.style. Circle ({дүүргэх: дүүргэх, цус харвалт: цус харвалт, радиус: 8}), бөглөх: дүүргэх, цус харвалт: цус харвалт}); vector_layer.setStyle (хэв маяг);

Зөвлөмж болгож буй: