إنشاء خريطة
توضح لك هذه المقالة طرقا لإنشاء خريطة وتحريك خريطة.
تحميل خريطة
لتحميل خريطة، قم بإنشاء مثيل جديد من فئة الخريطة. عند تهيئة الخريطة، قم بتمرير معرف عنصر DIV لعرض الخريطة وتمرير مجموعة من الخيارات لاستخدامها عند تحميل الخريطة. إذا لم يتم تحديد معلومات المصادقة الافتراضية على atlas مساحة الاسم، فستحتاج هذه المعلومات إلى تحديدها في خيارات الخريطة عند تحميل الخريطة. تقوم الخريطة بتحميل العديد من الموارد بشكل غير متزامن للأداء. على هذا النحو، بعد إنشاء مثيل الخريطة، قم بإرفاق ready حدث أو load حدث بالخريطة ثم أضف أي تعليمات برمجية إضافية تتفاعل مع الخريطة إلى معالج الأحداث. يشتعل ready الحدث بمجرد أن تحتوي الخريطة على موارد كافية محملة للتفاعل معها برمجيا. يتم load تشغيل الحدث بعد انتهاء تحميل طريقة عرض الخريطة الأولية بالكامل.
تلميح
يمكنك تحميل خرائط متعددة على نفس الصفحة. قد تستخدم خريطة متعددة في نفس الصفحة نفس إعدادات المصادقة واللغة أو إعدادات مختلفة.
عرض نسخة واحدة من العالم
عندما يتم تصغير الخريطة على شاشة عريضة، ستظهر نسخ متعددة من العالم أفقيا. يعد هذا الخيار رائعا لبعض السيناريوهات ، ولكن بالنسبة للتطبيقات الأخرى ، من المستحسن رؤية نسخة واحدة من العالم. يتم تنفيذ هذا السلوك عن طريق تعيين خيار الخرائط renderWorldCopies إلى false.
خيارات الخريطة
عند إنشاء خريطة هناك، هناك عدة أنواع مختلفة من الخيارات التي يمكن تمريرها لتخصيص كيفية عمل الخريطة كما هو موضح أدناه.
- يتم استخدام CameraOptions و CameraBoundOptions لتحديد المنطقة التي يجب أن تعرضها الخريطة.
- يتم استخدام ServiceOptions لتحديد كيفية تفاعل الخريطة مع الخدمات التي تقوم بتشغيل الخريطة.
- يتم استخدام StyleOptions لتحديد الخريطة التي يجب أن تكون مصممة وعرضها.
- يتم استخدام UserInteractionOptions لتحديد كيفية وصول الخريطة عندما يتفاعل المستخدم مع الخريطة.
يمكن أيضا تحديث هذه الخيارات بعد تحميل الخريطة باستخدام الدالات setCameraو ، و setServiceOptionssetStyle، و setUserInteraction .
التحكم في كاميرا الخريطة
هناك طريقتان لتعيين المنطقة المعروضة من الخريطة باستخدام كاميرا الخريطة. يمكنك ضبط خيارات الكاميرا عند تحميل الخريطة. أو يمكنك استدعاء الخيار في setCamera أي وقت بعد تحميل الخريطة لتحديث طريقة عرض الخريطة برمجيا.
ضبط الكاميرا
تتحكم كاميرا الخريطة في ما يتم عرضه في إطار العرض الخاص بلوحة الخريطة. يمكن تمرير خيارات الكاميرا إلى خيارات الخريطة عند تهيئتها أو تمريرها إلى وظيفة الخرائط setCamera .
//Set the camera options when creating the map.
var map = new atlas.Map('map', {
center: [-122.33, 47.6],
zoom: 12
//Additional map options.
};
//Update the map camera at anytime using setCamera function.
map.setCamera({
center: [-110, 45],
zoom: 5
});
في التعليمة البرمجية التالية، يتم إنشاء كائن خريطة ويتم تعيين خيارات التوسيط والتكبير/التصغير. تعد خصائص الخريطة، مثل مستوى الوسط والتكبير/التصغير، جزءا من CameraOptions.
تعيين حدود الكاميرا
يمكن استخدام مربع محيط لتحديث كاميرا الخريطة. إذا تم حساب المربع المحيط من البيانات النقطية، فغالبا ما يكون من المفيد أيضا تحديد قيمة حشو بكسل في خيارات الكاميرا لحساب حجم الرمز. سيساعد ذلك في ضمان عدم سقوط النقاط من حافة إطار عرض الخريطة.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
في التعليمة البرمجية التالية، يتم إنشاء كائن خريطة عبر new atlas.Map(). يمكن تعريف خصائص الخريطة مثل CameraBoundsOptions وظيفة setCamera الخاصة بفئة الخريطة. يتم تعيين الحدود وخصائص الحشو باستخدام setCamera.
تحريك طريقة عرض الخريطة
عند تعيين خيارات الكاميرا للخريطة، يمكن أيضا تعيين خيارات الرسوم المتحركة . تحدد هذه الخيارات نوع الرسوم المتحركة والمدة التي يجب أن تستغرقها لتحريك الكاميرا.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
في التعليمة البرمجية التالية، تقوم كتلة التعليمات البرمجية الأولى بإنشاء خريطة وتعيين أنماط خريطة الإدخال والتكبير/التصغير. في كتلة التعليمات البرمجية الثانية، يتم إنشاء معالج أحداث النقر للزر المتحرك. عند النقر فوق هذا الزر ، يتم استدعاء الوظيفة setCamera مع بعض القيم العشوائية ل CameraOptions و AnimationOptions.
طلب تحويلات
في بعض الأحيان يكون من المفيد أن تكون قادرا على تعديل طلبات HTTP التي يقدمها عنصر تحكم الخريطة. على سبيل المثال:
- أضف رؤوس إضافية إلى طلبات التجانبات. غالبا ما يتم ذلك للخدمات المحمية بكلمة مرور.
- تعديل عناوين URL لتشغيل الطلبات من خلال خدمة وكيل.
تحتوي خيارات الخدمة الخاصة بالخريطة على خيار transformRequest يمكن استخدامه لتعديل جميع الطلبات التي تقدمها الخريطة قبل إجرائها. الخيار transformRequest عبارة عن دالة تأخذ معلمتين ؛ عنوان URL للسلسلة ، وسلسلة نوع المورد التي تشير إلى الغرض من الطلب. يجب أن ترجع هذه الدالة نتيجة RequestParameters .
transformRequest: (url: string, resourceType: string) => RequestParameters
يوضح المثال التالي كيفية استخدام هذا لتعديل كافة الطلبات إلى الحجم https://example.com عن طريق إضافة اسم مستخدم وكلمة مرور كرؤوس إلى الطلب.
var map = new atlas.Map('myMap', {
transformRequest: function (url, resourceType) {
//Check to see if the request is to the specified endpoint.
if (url.indexOf('https://examples.com') > -1) {
//Add custom headers to the request.
return {
url: url,
header: {
username: 'myUsername',
password: 'myPassword'
}
};
}
//Return the URL unchanged by default.
return { url: url };
},
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
جرب الرمز
انظر إلى عينات التعليمات البرمجية. يمكنك تحرير شفرة جافا سكريبت داخل علامة التبويب JS ورؤية تغييرات عرض الخريطة في علامة التبويب النتيجة. يمكنك أيضا النقر فوق تحرير على CodePen، في الزاوية العلوية اليسرى، وتعديل التعليمات البرمجية في CodePen.
الخطوات التالية
تعرف على المزيد حول الفئات والأساليب المستخدمة في هذه المقالة:
راجع أمثلة التعليمات البرمجية لإضافة وظائف إلى تطبيقك: