OpenLayers በድር ጣቢያ ላይ ሁሉንም ዓይነት ካርታዎች ለመፍጠር እና ለማሳየት የሚያስችለን ኃይለኛ የጃቫስክሪፕት መሣሪያ ነው። ይህ ጽሑፍ አንድ ነጥብ እና የመስመር ሕብረቁምፊ ባህሪን በመጨመር ይመራዎታል ፣ ከዚያ ትንበያዎቻቸውን መጋጠሚያዎችን ለመጠቀም ይለውጡ ፣ ከዚያ የንብርብሩን ዘይቤ በማዋቀር የተወሰነ ቀለም ያክሉ።
ይህንን ጽሑፍ ለመከተል በድረ -ገጽ ውስጥ የሚሰራ የ OpenLayers ካርታ እንዲኖርዎት እባክዎ ልብ ይበሉ። አንድ ከሌለዎት OpenLayers 3 ን በመጠቀም ካርታ እንዴት እንደሚሠሩ ይመልከቱ።
ደረጃዎች
የ 3 ክፍል 1 - ነጥብ እና የመስመር ሕብረቁምፊ ባህሪያትን ማከል
ደረጃ 1. የነጥብ ባህሪን ይፍጠሩ።
በቀላሉ የሚከተለውን የኮድ መስመር ወደ እርስዎ ይቅዱ
ንጥረ ነገር
var point_feature = new ol. Feature ({});
ደረጃ 2. የነጥቡን ጂኦሜትሪ ያዘጋጁ።
ነጥቡን የት እንዳስቀመጡ ለ OpenLayers ለመንገር ፣ ጂኦሜትሪ መፍጠር እና የቅንጅት ስብስቦችን መስጠት ያስፈልግዎታል ፣ እሱም በ [ኬንትሮስ (ኢ-ወ) ፣ ኬክሮስ (ኤን-ኤስ)] ድርድር ነው። የሚከተለው ኮድ ይህንን ይፈጥራል እና የነጥቡን ጂኦሜትሪ ያዘጋጃል-
var point_geom = አዲስ ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
ደረጃ 3. የመስመር ሕብረቁምፊ ባህሪን ይፍጠሩ።
የመስመር ሕብረቁምፊዎች ወደ ክፍሎች የተከፋፈሉ ቀጥ ያሉ መስመሮች ናቸው። እኛ ልክ እንደ ነጥቦች እንፈጥራቸዋለን ፣ ግን ለእያንዳንዱ የመስመር ሕብረቁምፊ ነጥብ ጥንድ መጋጠሚያዎችን እናቀርባለን-
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
ደረጃ 4. ባህሪያቱን ወደ ቬክተር ንብርብር ያክሉ።
ባህሪያቱን በካርታው ላይ ለማከል ወደ ቬክተር ንብርብር የሚያክሉት ወደ ምንጭ ማከል ያስፈልግዎታል ፣ ከዚያ ወደ ካርታው ማከል ይችላሉ-
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
ክፍል 2 ከ 3: አስተባባሪዎችን ለመጠቀም የባህሪያቱን ጂኦሜትሪ መለወጥ
እንደማንኛውም ኃይለኛ የካርታ ሶፍትዌር ፣ OpenLayers ካርታዎች መረጃን በተለያዩ መንገዶች በተለያዩ ንብርብሮች ሊኖራቸው ይችላል። ምድር ሉል እና ጠፍጣፋ ስላልሆነች በጠፍጣፋ ካርታዎቻችን ላይ ለማሳየት ስንሞክር ሶፍትዌሩ ከጠፍጣፋ ካርታው ጋር እንዲመጣጠን ቦታዎቹን ማስተካከል አለበት። የካርታ መረጃን ለማሳየት እነዚህ የተለያዩ መንገዶች ተጠርተዋል ግምቶች. በአንድ ካርታ ላይ የቬክተር ንብርብር እና የሰድር ንብርብርን በአንድ ላይ ለመጠቀም ማለት ንብርብሮችን ከአንድ ትንበያ ወደ ሌላ መለወጥ አለብን ማለት ነው።
ደረጃ 1. ባህሪያቱን ወደ ድርድር ውስጥ ያስገቡ።
እኛ ልንለውጠው የምንፈልጋቸውን ባህሪዎች አብረን ልንደግመው ወደምንችለው ድርድር በማስቀመጥ እንጀምራለን።
የ var ባህሪዎች = [ነጥብ_ምልክት ፣ linestring_feature];
ደረጃ 2. የለውጥ ተግባሩን ይፃፉ።
በ OpenLayers ውስጥ የእያንዳንዱን ባህርይ ጂኦሜትሪ ነገር ላይ የለውጥ () ተግባርን መጠቀም እንችላለን። ይህንን የለውጥ ኮድ በኋላ ልንጠራው ወደሚችለው ተግባር ያስገቡት-
ተግባር transform_geometry (አባል) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry ()። መለወጥ (የአሁኑ_ፕሮጀክት ፣ አዲስ_ፕሮጀክት);); }
ደረጃ 3. በባህሪያቱ ላይ የለውጥ ተግባሩን ይደውሉ።
አሁን በቃ ድርድር ውስጥ ይድገሙት።
ባህሪዎች ለእያንዳንዱ (ትራንስፎርሜሽን_ጂኦሜትሪ);
የ 3 ክፍል 3 - የቬክተር ንብርብር ዘይቤን ማቀናበር
በካርታው ላይ እያንዳንዱ ባህሪ ምን እንደሚመስል ለመለወጥ ፣ አንድ ዘይቤ መፍጠር እና መተግበር አለብን። ቅጦች ቀለሞችን ፣ መጠኖችን እና ሌሎች የነጥቦችን እና የመስመሮችን ባህሪዎች ሊለውጡ ይችላሉ ፣ እንዲሁም ለእያንዳንዱ ነጥብ ምስሎችን ማሳየት ይችላሉ ፣ ይህም ለተበጁ ካርታዎች በጣም ምቹ ነው። ይህ ክፍል አስፈላጊ አይደለም ፣ ግን አስደሳች እና ጠቃሚ ነው።
ደረጃ 1. መሙላቱን እና ስቶክን ይፍጠሩ።
የመሙላት ዘይቤ ነገር እና ከፊል-ግልፅ ቀይ ቀለም እና ጠንካራ ቀይ መስመር የሆነውን የጭረት (መስመር) ዘይቤ ይፍጠሩ
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({ቀለም: [180, 0, 0, 1] ፣ ስፋት: 1});
ደረጃ 2. ቅጥውን ይፍጠሩ እና ወደ ንብርብር ይተግብሩ።
የ OpenLayers ቅጥ ነገር በጣም ኃይለኛ ነው ፣ ግን እኛ አሁን መሙላቱን እና ምታውን እናዘጋጃለን-
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke ፣ radius: 8}) ፣ መሙላት ፤ መሙላት ፣ stroke: stroke}); vector_layer.setStyle (ቅጥ);
