مشاركة عبر


بيانات نقطة التجميع في Web SDK

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


تمكين التجميع على مصدر بيانات

تمكين التجميع في الفئة DataSource عن طريق تعيين الخيار cluster إلى true. تعيين clusterRadius لتحديد النقاط القريبة ودمجها في مجموعة. القيمة clusterRadius بالبكسل. استخدم clusterMaxZoom لتحديد مستوى التكبير/التصغير لتعطيل منطق تكوين أنظمة المجموعات. فيما يلي مثال على كيفية تمكين التجميع في مصدر بيانات.

//Create a data source and enable clustering.
var datasource = new atlas.source.DataSource(null, {
    //Tell the data source to cluster point data.
    cluster: true,
    
    //The radius in pixels to cluster points together.
    clusterRadius: 45,
    
    //The maximum zoom level in which clustering occurs.
    //If you zoom in more than this, all points are rendered as symbols.
    clusterMaxZoom: 15
});

تلميح

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

توفر الفئة DataSource الطرق التالية المتعلقة بتكوين أنظمة المجموعات أيضًا.

الأسلوب نوع الإرجاع ‏‏الوصف
getClusterChildren(clusterId: number) تعهد < مصفوفة< ميزة < الهندسة، أي >| شكل>> استرداد العناصر الفرعية للمجموعة المحددة في مستوى التكبير/التصغير التالي. قد تكون هذه العناصر الفرعية مزيجًا من الأشكال والمجموعات الفرعية. المجموعات الفرعية هي ميزات مع خصائص مطابقة ClusteredProperties.
getClusterExpansionZoom(clusterId: number) تعهد <رقم> حساب مستوى التكبير/التصغير الذي يبدأ فيه نظام المجموعة في التوسع أو التفريق.
getClusterLeaves(clusterId: number, limit: number, offset: number) تعهد < مصفوفة< ميزة < الهندسة، أي >| شكل>> استرداد كافة النقاط في مجموعة. بشكل افتراضي، يتم إرجاع أول 10 نقاط. للتنقل بين النقاط، استخدم limit لتحديد عدد النقاط التي يجب إرجاعها، وللتنقل offset بين فهرس النقاط. لإرجاع جميع النقاط، قم بتعيين limit إلى Infinity ولا تقم بتعيين offset.

عرض المجموعات باستخدام طبقة فقاعية

تعد الطبقة الفقاعية طريقة رائعة لعرض النقاط المُجمّعة. استخدم التعبيرات لتوسيع نطاق نصف القطر وتغيير اللون استنادًا إلى عدد النقاط في نظام المجموعة. إذا قمت بعرض مجموعات باستخدام طبقة فقاعية، يجب عليك استخدام طبقة منفصلة لعرض نقاط بيانات غير مُجمّعة.

لعرض حجم المجموعة أعلى الفقاعة، استخدم طبقة الرمز مع النص، ولا تستخدم الأيقونة.

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

لقطة شاشة تعرض خريطة تعرض مجموعات باستخدام طبقة فقاعة.

عرض المجموعات باستخدام طبقة الرمز

عند تصور نقاط البيانات، تخفي طبقة الرمز تلقائيًا الرموز التي تتداخل مع بعضها البعض لضمان واجهة مستخدم أنقى. قد يكون هذا السلوك الافتراضي غير مرغوب فيه إذا كنت تريد إظهار كثافة نقاط البيانات على الخريطة. ومع ذلك، يمكن تغيير هذه الإعدادات. لعرض كافة الرموز، قم بتعيين allowOverlap خيار الخاصية طبقات الرمز إلى iconOptions true.

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

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

لقطة شاشة تعرض خريطة تعرض مجموعات مع طبقة رمز.

تكوين أنظمة المجموعات وطبقة خريطة التمثيل اللوني

تُعد خرائط التمثيل اللوني طريقة رائعة لعرض كثافة البيانات على الخريطة. يمكن لطريقة التصور معالجة عدد كبير من نقاط البيانات بمفردها. إذا تم تجميع نقاط البيانات وتم استخدام حجم نظام المجموعة كوزن لخريطة التمثيل اللوني، يمكن لخريطة التمثيل اللوني معالجة المزيد من البيانات. لتحقيق هذا الخيار، قم بتعيين weight خيار طبقة خريطة التمثيل اللوني إلى ['get', 'point_count']. عندما يكون نصف قطر نظام المجموعة صغيرا، تبدو خريطة التمثيل اللوني متطابقة تقريبا مع خريطة التمثيل اللوني باستخدام نقاط البيانات غير المتفاوتة المسافات، ولكنها تؤدي أداء أفضل. ومع ذلك، كلما كان نصف قطر نظام المجموعة أصغر، زادت دقة خريطة التمثيل اللوني، ولكن مع فوائد أداء أقل.

للحصول على عينة عمل كاملة توضح كيفية إنشاء خريطة التمثيل اللوني التي تستخدم التجميع على مصدر البيانات، راجع خريطة التمثيل اللوني المرجحة للمجموعة في عينات خرائط Azure. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لخريطة التمثيل اللوني المرجحة للمجموعة.

لقطة شاشة تعرض خريطة التمثيل اللوني التي تستخدم التجميع على مصدر البيانات.

اضغط على الأحداث على نقاط البيانات المجمعة

عند وقوع أحداث الضغط على طبقة تحتوي على نقاط بيانات مجمعة، تعود نقطة البيانات المجمعة إلى الحدث كعنصر ميزة نقطة GeoJSON. تحتوي ميزة النقطة هذه على الخصائص التالية:

اسم الخاصية كتابة الوصف
cluster boolean تشير إلى ما إذا كانت الميزة تمثل مجموعة.
cluster_id سلسلة معرف فريد للمجموعة التي يمكن استخدامها مع طرق DataSource getClusterExpansionZoom، getClusterChildren وgetClusterLeaves.
point_count رقم عدد النقاط التي تحتوي عليها المجموعة.
point_count_abbreviated سلسلة سلسلة تختصر القيمة point_count إذا كانت طويلة. (على سبيل المثال، 4,000 يصبح 4K)

يأخذ مثال مجموعات النقاط في طبقة الفقاعة طبقة فقاعة تعرض نقاط نظام المجموعة وتضيف حدث نقرة. عند تشغيل حدث الضغط، تقوم التعليمات البرمجية بحساب الخريطة وتكبيرها إلى مستوى التكبير/التصغير التالي، حيث تنفصل المجموعة. يتم تنفيذ هذه الوظيفة باستخدام أسلوب getClusterExpansionZoomالخاص DataSource بالفئة وخاصية cluster_id نقطة البيانات المجمعة التي تم النقر فوقها.

يظهر مقتطف التعليمات البرمجية التالي التعليمات البرمجية في مثال مجموعات النقاط في طبقة الفقاعة الذي يضيف وظيفة حدث النقر إلى نقاط البيانات المجمعة:

//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterBubbleLayer, clusterClicked);

//Add mouse events to change the mouse cursor when hovering over a cluster.
map.events.add('mouseenter', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'pointer';
});

map.events.add('mouseleave', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'grab';
});

function clusterClicked(e) {
    if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
        //Get the clustered point from the event.
        var cluster = e.shapes[0];

        //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
        datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {

            //Update the map camera to be centered over the cluster. 
            map.setCamera({
                center: cluster.geometry.coordinates,
                zoom: zoom,
                type: 'ease',
                duration: 200
            });
        });
    }
}

لقطة شاشة تعرض خريطة تعرض مجموعات باستخدام طبقة فقاعة.

عرض منطقة نظام المجموعة

تنتشر بيانات النقطة التي تمثلها المجموعة عبر المنطقة. في هذه العينة عند تمرير الماوس فوق نظام المجموعة، ويحدث سلوكان رئيسيان. أولا، يتم استخدام نقاط البيانات الفردية المضمنة في نظام المجموعة لحساب بنية محدبة. بعد ذلك، يتم عرض بنية convex على الخريطة لإظهار منطقة. إن الهيكل المحدب هو مضلع يلف مجموعة من النقاط مثل شريط مطاطي ويمكن حسابه باستخدام طريقة atlas.math.getConvexHull. يمكن استرداد جميع النقاط الموجودة في نظام مجموعة من مصدر البيانات باستخدام الأسلوب getClusterLeaves.

للحصول على نموذج عمل كامل يوضح كيفية القيام بذلك، راجع عرض منطقة نظام المجموعة باستخدام Convex Hull في نماذج خرائط Azure. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع عرض منطقة نظام المجموعة مع التعليمات البرمجية المصدر Convex Hull.

لقطة شاشة تعرض خريطة تعرض مناطق نظام المجموعة التي تمثلها دبابيس إسقاط تظهر Convex Hull التي تحدد منطقة نظام المجموعة عند تحديدها.

تجميع البيانات في نظام مجموعات

غالبًا ما يتم تمثيل المجموعات باستخدام رمز مع عدد النقاط الموجودة داخل نظام المجموعة. ولكن، في بعض الأحيان من المستحسن تخصيص نمط المجموعات بمزيد من المقاييس. باستخدام تجميعات نظام المجموعة، يمكن إنشاء الخصائص المخصصة وملؤها باستخدام حساب تعبير مجمع. يمكن تعريف تجميعات نظام المجموعة في clusterProperties خيار DataSource.

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

لقطة شاشة تعرض خريطة تستخدم التجميع المحدد باستخدام حساب تعبير النمط المستند إلى البيانات. تجمع هذه العمليات الحسابية القيم عبر جميع النقاط المضمنة داخل نظام المجموعة.

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

تعرّف على المزيد حول الفئات والأساليب المُستخدمة في هذه المقالة:

راجع أمثلة التعليمات البرمجية لإضافة وظائف إلى تطبيقك: