OpenLayers הוא כלי JavaScript רב עוצמה המאפשר לנו ליצור ולהציג כל מיני מפות באתר. מאמר זה ינחה אותך בהוספת נקודה ותכונה מחרוזת קו, ולאחר מכן יהפוך את התחזיות שלהם לשימוש בקואורדינטות, ולאחר מכן הוסיף קצת צבע על ידי הגדרת סגנון השכבה.
שים לב שאתה צריך להתקין מפת OpenLayers עובדת בדף אינטרנט כדי לעקוב אחר מאמר זה. אם אין לך, ראה כיצד להכין מפה באמצעות OpenLayers 3.
צעדים
חלק 1 מתוך 3: הוספת תכונות מחרוזת נקודה וקו
שלב 1. צור תכונת נקודה
פשוט העתק את שורת הקוד הבאה אל שלך
אֵלֵמֶנט:
var point_feature = ol. Feature חדש ({});
שלב 2. הגדר את הגיאומטריה של הנקודה
כדי לומר ל- OpenLayers היכן למקם את הנקודה, עליך ליצור גיאומטריה ולתת לה מערך קואורדינטות, שהוא מערך בצורה [אורך (E-W), קו רוחב (N-S)]. הקוד הבא יוצר זאת ומגדיר את הגיאומטריה של הנקודה:
var point_geom = ol.geom. Point חדש
שלב 3. צור תכונת מחרוזת קו
מחרוזות קו הן קווים ישרים השבורים למקטעים. אנו יוצרים אותן בדיוק כמו נקודות, אך אנו מספקים זוג קואורדינטות לכל נקודה במחרוזת השורה:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
שלב 4. הוסף את התכונות לשכבה וקטורית
כדי להוסיף את התכונות למפה, עליך להוסיף אותן למקור אותו אתה מוסיף לשכבה וקטורית, ולאחר מכן תוכל להוסיף למפה:
var vector_layer = new ol.layer. Vector ({מקור: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
חלק 2 מתוך 3: הפיכת הגיאומטריות של התכונות לשימוש בקואורדינטות
כמו כל תוכנת מיפוי עוצמתית, למפות OpenLayers יכולות להיות שכבות שונות עם דרכים שונות להצגת מידע. מכיוון שכדור הארץ הוא גלובוס ולא שטוח, כאשר אנו מנסים להציג אותו במפות השטוחות שלנו, התוכנה צריכה להתאים את המיקומים כך שיתאימו למפה השטוחה. דרכים שונות אלה להצגת פרטי מפה נקראות הקרנות. שימוש בשכבת וקטור ושכבת אריחים יחד על אותה מפה פירושו שעלינו להפוך את השכבות מהקרנה אחת לאחרת.
שלב 1. הכנס את התכונות למערך
אנו מתחילים בלשים את התכונות שברצוננו להפוך למערך שנוכל לבצע באמצעותן.
var features = [point_feature, linestring_feature];
שלב 2. כתוב את פונקציית השינוי
ב- OpenLayers, אנו יכולים להשתמש בפונקציית ה- transform () באובייקט הגיאומטריה של כל תכונה. הכנס את קוד ההמרה הזה לפונקציה שאנו יכולים לקרוא לה מאוחר יותר:
function transform_geometry (element) {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 stroke = new ol.style. Stroke ({color: [180, 0, 0, 1], רוחב: 1});
שלב 2. צור את הסגנון והחל אותו על השכבה
האובייקט בסגנון OpenLayers הוא די חזק, אבל אנחנו הולכים רק להגדיר את המילוי והקף לעת עתה:
var style = new ol.style. Style ({image: new ol.style. Circle ({מילוי: מילוי, שבץ: שבץ, רדיוס: 8}), מילוי: מילוי, שבץ: שבץ}); vector_layer.setStyle (סגנון);
