تعيين نمط الخريطة (Android SDK)

توضح لك هذه المقالة طريقتين لتعيين أنماط الخريطة باستخدام خرائط Azure Android SDK. يحتوي خرائط Azure على ستة أنماط خرائط مختلفة للاختيار من بينها. لمزيد من المعلومات حول أنماط الخريطة المدعومة، راجع أنماط الخريطة المدعومة في خرائط Azure.

المتطلبات الأساسية

تأكد من إكمال الخطوات الواردة في التشغيل السريع: إنشاء مستند تطبيق Android .

هام

يتطلب الإجراء الوارد في هذا القسم حساب خرائط Azure في طبقة تسعير Gen 1 أو Gen 2. لمزيد من المعلومات حول مستويات التسعير، راجع ⁧⁩اختيار مستوى التسعير المناسب في خرائط Azure⁧⁩.

تعيين نمط الخريطة في التخطيط

يمكنك تعيين نمط خريطة في ملف التخطيط لفئة النشاط عند إضافة عنصر تحكم الخريطة. تقوم التعليمة البرمجية التالية بتعيين موقع المركز ومستوى التكبير/التصغير ونمط الخريطة.

<com.azure.android.maps.control.MapControl
    android:id="@+id/mapcontrol"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:azure_maps_centerLat="47.602806"
    app:azure_maps_centerLng="-122.329330"
    app:azure_maps_zoom="12"
    app:azure_maps_style="grayscale_dark"
    />

تعرض لقطة الشاشة التالية التعليمة البرمجية أعلاه التي تعرض خريطة طريق بنمط رمادي داكن.

Map with grayscale dark road map style

تعيين نمط الخريطة في التعليمات البرمجية

يمكن تعيين نمط الخريطة برمجيا في التعليمات البرمجية باستخدام setStyle طريقة الخريطة. تقوم التعليمة البرمجية التالية بتعيين موقع المركز ومستوى التكبير/التصغير باستخدام طريقة الخرائط setCamera ونمط الخريطة إلى SATELLITE_ROAD_LABELS.

mapControl.onReady(map -> {

    //Set the camera of the map.
    map.setCamera(center(Point.fromLngLat(-122.33, 47.64)), zoom(14));

    //Set the style of the map.
    map.setStyle(style(MapStyle.SATELLITE_ROAD_LABELS));
});
mapControl!!.onReady { map: AzureMap ->
    //Set the camera of the map.
    map.setCamera(center(Point.fromLngLat(-122.33, 47.64)), zoom(14))

    //Set the style of the map.
    map.setStyle(style(MapStyle.SATELLITE_ROAD_LABELS))
}

تعرض لقطة الشاشة التالية الرمز أعلاه الذي يعرض خريطة بنمط تسميات الطرق عبر الأقمار الصناعية.

Map with satellite road labels style

إعداد كاميرا الخريطة

تتحكم كاميرا الخريطة في أي جزء من العالم يتم عرضه في منفذ عرض الخريطة. يمكن أن تكون الكاميرا في التخطيط لدينا برمجيا في التعليمات البرمجية. عند تعيينه في التعليمات البرمجية ، هناك طريقتان رئيسيتان لتحديد موضع الخريطة ؛ باستخدام التوسيط والتكبير/التصغير، أو المرور في مربع محيط. توضح التعليمة البرمجية التالية كيفية تعيين كافة خيارات الكاميرا الاختيارية عند استخدام center و zoom.

//Set the camera of the map using center and zoom.
map.setCamera(
    center(Point.fromLngLat(-122.33, 47.64)), 

    //The zoom level. Typically a value between 0 and 22.
    zoom(14),

    //The amount of tilt in degrees the map where 0 is looking straight down.
    pitch(45),

    //Direction the top of the map is pointing in degrees. 0 = North, 90 = East, 180 = South, 270 = West
    bearing(90),

    //The minimum zoom level the map will zoom-out to when animating from one location to another on the map.
    minZoom(10),

    //The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
    maxZoom(14)
);
//Set the camera of the map using center and zoom.
map.setCamera(
    center(Point.fromLngLat(-122.33, 47.64)), 

    //The zoom level. Typically a value between 0 and 22.
    zoom(14),

    //The amount of tilt in degrees the map where 0 is looking straight down.
    pitch(45),

    //Direction the top of the map is pointing in degrees. 0 = North, 90 = East, 180 = South, 270 = West
    bearing(90),

    //The minimum zoom level the map will zoom-out to when animating from one location to another on the map.
    minZoom(10),

    //The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
    maxZoom(14)
)

غالبا ما يكون من المستحسن تركيز الخريطة على مجموعة من البيانات. يمكن حساب مربع محيط من المعالم باستخدام الطريقة MapMath.fromData ويمكن تمريره إلى bounds خيار كاميرا الخريطة. عند تعيين طريقة عرض خريطة استنادا إلى مربع محيط، غالبا ما يكون من المفيد تحديد padding قيمة لحساب حجم البيكسل للنقاط التي يتم تقديمها كفقاعات أو رموز. توضح التعليمة البرمجية التالية كيفية تعيين كافة خيارات الكاميرا الاختيارية عند استخدام مربع محيط لتعيين موضع الكاميرا.

//Set the camera of the map using a bounding box.
map.setCamera(
    //The area to focus the map on.
    bounds(BoundingBox.fromLngLats(
        //West
        -122.4594,

        //South
        47.4333,

        //East
        -122.21866,

        //North
        47.75758
    )),

    //Amount of pixel buffer around the bounding box to provide extra space around the bounding box.
    padding(20),

    //The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
    maxZoom(14)
);
//Set the camera of the map using a bounding box.
map.setCamera(
    //The area to focus the map on.
    bounds(BoundingBox.fromLngLats(
        //West
        -122.4594,

        //South
        47.4333,

        //East
        -122.21866,

        //North
        47.75758
    )),

    //Amount of pixel buffer around the bounding box to provide extra space around the bounding box.
    padding(20),

    //The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
    maxZoom(14)
)

قد لا تكون نسبة العرض إلى الارتفاع للمربع المحيط هي نفسها نسبة العرض إلى الارتفاع للخريطة، على هذا النحو غالبا ما تظهر الخريطة مساحة المربع المحيط الكاملة، ولكنها غالبا ما تكون ضيقة رأسيا أو أفقيا فقط.

تحريك طريقة عرض الخريطة

عند تعيين خيارات الكاميرا للخريطة، يمكن أيضا استخدام خيارات الرسوم المتحركة لإنشاء انتقال بين طريقة عرض الخريطة الحالية والطريقة التالية. تحدد هذه الخيارات نوع الرسوم المتحركة والمدة التي يجب أن تستغرقها لتحريك الكاميرا.

الخيار الوصف
animationDuration(Integer durationMs) يحدد المدة التي ستتحرك فيها الكاميرا بين طرق العرض بالمللي ثانية (مللي ثانية).
animationType(AnimationType animationType) يحدد نوع انتقال الحركة المطلوب تنفيذه.

- JUMP - تغيير فوري.
- EASE - تغيير تدريجي لإعدادات الكاميرا.
- FLY - تغيير تدريجي لإعدادات الكاميرا بعد قوس يشبه الرحلة.

توضح التعليمة البرمجية التالية كيفية تحريك طريقة عرض الخريطة باستخدام حركة FLY على مدار ثلاث ثوان.

map.setCamera(
    center(Point.fromLngLat(-122.33, 47.6)),
    zoom(12),
    animationType(AnimationType.FLY), 
    animationDuration(3000)
);
map.setCamera(
    center(Point.fromLngLat(-122.33, 47.6)),
    zoom(12.0),
    AnimationOptions.animationType(AnimationType.FLY),
    AnimationOptions.animationDuration(3000)
)

يوضح ما يلي التعليمة البرمجية أعلاه التي تحرك عرض الخريطة من نيويورك إلى سياتل.

Map animating the camera from New York to Seattle

الخطوات التالية

راجع المقالات التالية للحصول على مزيد من نماذج التعليمات البرمجية لإضافتها إلى خرائطك: