OpenLayers هي أداة JavaScript قوية تمكننا من إنشاء وعرض جميع أنواع الخرائط على موقع الويب. ستوجهك هذه المقالة إلى إضافة ميزة نقطة وسلسلة خطية ، ثم تحويل إسقاطاتها لاستخدام الإحداثيات ، ثم إضافة بعض الألوان عن طريق تعيين نمط الطبقة.
يرجى ملاحظة أنك بحاجة إلى تثبيت خريطة OpenLayers عاملة في صفحة ويب لمتابعة هذه المقالة. إذا لم يكن لديك واحدة ، فراجع كيفية إنشاء خريطة باستخدام OpenLayers 3.
خطوات
جزء 1 من 3: إضافة ميزات النقطة وسلسلة الخط
الخطوة 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 = 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 features = [point_feature، linestring_feature]؛
الخطوة 2. اكتب وظيفة التحويل
في OpenLayers ، يمكننا استخدام وظيفة التحويل () على الكائن الهندسي لكل ميزة. ضع كود التحويل هذا في وظيفة يمكننا استدعاؤها لاحقًا:
دالة transform_geometry (عنصر) {var current_project = new ol.proj. Project ({code: "EPSG: 4326"}) ؛ var new_project = tile_layer.getSource (). getProject () ؛ element.getGeometry (). transform (current_project، new_project) ؛) ؛ }
الخطوة 3. استدعاء وظيفة التحويل على الميزات
الآن ببساطة كرر خلال المصفوفة.
features.forEach (تحويل_ الهندسة) ؛
جزء 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]، width: 1})؛
الخطوة 2. قم بإنشاء النمط وتطبيقه على الطبقة
كائن نمط OpenLayers قوي جدًا ، لكننا سنقوم فقط بتعيين التعبئة والحد في الوقت الحالي:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill، stroke: stroke، radius: 8})، fill: fill، stroke: stroke}) ؛ vector_layer.setStyle (نمط) ؛
