OpenLayers - бұл веб -сайтта карталардың барлық түрлерін құруға және көрсетуге мүмкіндік беретін күшті JavaScript құралы. Бұл мақала сізге нүкте мен сызық жолының мүмкіндігін қосуға көмектеседі, содан кейін олардың проекцияларын координаттарды қолдануға түрлендіреді, содан кейін қабат стилін орнату арқылы түс қосады.
Осы мақаланы орындау үшін веб -бетте OpenLayers жұмыс картасы орнатылуы қажет екенін ескеріңіз. Егер сізде жоқ болса, OpenLayers көмегімен картаны қалай жасау керектігін қараңыз 3.
Қадамдар
3 -тің 1 -бөлігі: Нүктелік және сызық жолдарының мүмкіндіктерін қосу
Қадам 1. Нүктелік мүмкіндікті жасаңыз
Келесі код жолын өзіңізге көшіріңіз
элемент:
var point_feature = new ol. Feature ({});
2 -қадам. Нүктенің геометриясын орнатыңыз
OpenLayers-ке нүктені қайда қою керектігін айту үшін геометрия құрып, оған [бойлық (E-W), ендік (N-S)] түріндегі массив болып табылатын координаттар жиынтығын беру керек. Келесі код мұны жасайды және нүктенің геометриясын орнатады:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (нүкте_геомы);
Қадам 3. Сызық жолының мүмкіндігін жасаңыз
Сызық жолдары - бұл сегменттерге бөлінген түзу сызықтар. Біз оларды нүктелер сияқты жасаймыз, бірақ біз жолдың әр нүктесі үшін координаттар жұбын ұсынамыз:
var linestring_feature = new ol. Feature ({геометрия: new 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 функциялары = [point_feature, 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 (). түрлендіру (ағымдағы_жоба, жаңа_жоба);); }
Қадам 3. Мүмкіндіктер бойынша түрлендіру функциясын шақырыңыз
Енді массив арқылы қайталаңыз.
features.forEach (transform_geometry);
3/3 бөлімі: Векторлық қабат стилін орнату
Картадағы әрбір мүмкіндіктің түрін өзгерту үшін бізге стиль жасау және қолдану қажет. Стильдер түстерді, өлшемдерді және нүктелер мен сызықтардың басқа атрибуттарын өзгерте алады, сонымен қатар олар әр нүктеге арналған суреттерді көрсете алады, бұл теңшелген карталар үшін өте ыңғайлы. Бұл бөлім қажет емес, бірақ қызықты және пайдалы.
Қадам 1. Толтырманы және стокты жасаңыз
Толтыру стилі нысанын және жартылай мөлдір қызыл түсті және тұйық қызыл сызық штрих (сызық) стилін жасаңыз:
var fill = new ol.style. Fill ({түс: [180, 0, 0, 0.3]}); var инсульт = new ol.style. Slrok ({түс: [180, 0, 0, 1], ені: 1});
Қадам 2. Стильді жасаңыз және оны қабатқа қолданыңыз
OpenLayers стиліндегі объект өте қуатты, бірақ біз әзірге толтыру мен сызуды орнатамыз:
var style = new ol.style. Style ({сурет: жаңа ol.style. Circle ({толтыру: толтыру, штрих: штрих, радиус: 8}), толтыру: толтыру, штрих: штрих}); vector_layer.setStyle (стиль);
