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 (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 өзгөчөлүктөрү = [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 (). transform (current_projection, new_projection);); }
Кадам 3. Өзгөчөлүктөрү боюнча трансформациялоо функциясын чакырыңыз
Эми массив аркылуу кайталаңыз.
features.forEach (transform_geometry);
3 -жылдын 3 -бөлүгү: Вектор катмарынын стилин орнотуу
Картадагы ар бир өзгөчөлүк кандай болушун өзгөртүү үчүн, биз стилди түзүп, колдонушубуз керек. Стилдер түстөрдү, өлчөмдөрдү жана чекиттердин жана сызыктардын башка атрибуттарын өзгөртө алат, ошондой эле ар бир чекит үчүн сүрөттөрдү көрсөтө алышат, бул ыңгайлаштырылган карталар үчүн абдан ыңгайлуу. Бул бөлүмдүн кереги жок, бирок кызыктуу жана пайдалуу.
Кадам 1. Толтуруу жана сток түзүү
Толтуруу стилиндеги объектти жана жарым тунук кызыл түстү жана так сызык болгон штрих (сызык) стилин түзүңүз:
var fill = new ol.style. Fill ({color: [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 (стиль);
