قم بإنشاء مصدر بيانات

مقالة
10/18/2023

تخزن Azure Maps Web SDK البيانات في مصادر البيانات. يؤدي استخدام مصادر البيانات إلى تحسين عمليات البيانات للاستعلام والعرض. يوجد حاليًا نوعان من مصادر البيانات:

مصدر GeoJSON: يدير بيانات الموقع الأولية بتنسيق GeoJSON محليًا. جيد لمجموعات البيانات الصغيرة والمتوسطة (حتى مئات الآلاف من الأشكال).
مصدر صور مصغرة من الخريطة لخطوط المتجه: تحميل البيانات المنسقة على هيئة صور مصغرة من الخريطة لخطوط المتجه للخريطة الحالية، بناءً على نظام تقسيم الخرائط. مثالي لمجموعات البيانات الكبيرة إلى الضخمة (ملايين أو مليارات الأشكال).

مصدر بيانات GeoJSON

تحميل مصدر بيانات يستند إلى GeoJSON وتخزين البيانات محليًا باستخدام الفئة DataSource. يمكن إنشاء بيانات GeoJSON أو إنشاؤها يدويًا باستخدام فئات المساعد في مساحة اسم atlas.data. توفر الفئة DataSource وظائف لاستيراد ملفات GeoJSON المحلية أو البعيدة. يجب استضافة ملفات GeoJSON البعيدة على نقطة نهاية ممكنة لـ CORs. توفر الفئة DataSource وظائف لبيانات نقطة التجميع. يمكن بسهولة إضافة البيانات وإزالتها وتحديثها باستخدام الفئة DataSource. توضح التعليمة البرمجية التالية كيف يمكن إنشاء بيانات GeoJSON في خرائط Azure.

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

بمجرد الإنشاء، يمكن إضافة مصادر البيانات إلى الخريطة من خلال الخاصية map.sources، وهي SourceManager. توضح التعليمات البرمجية التالية كيفية إنشاء DataSource وإضافته إلى الخريطة.

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

توضح التعليمات البرمجية التالية الطرق المختلفة التي يمكن من خلالها إضافة بيانات GeoJSON إلى DataSource.

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature colleciton, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

تلميح

لنفترض أنك تريد الكتابة فوق جميع البيانات في DataSource. إذا قمت بإجراء استدعاءات إلى clear ثم إلى الدالات add، فقد يتم إعادة عرض الخريطة مرتين، ما قد يتسبب في بعض التأخير. بدلًا من ذلك، استخدم الدالة setShapes، التي ستقوم بإزالة جميع البيانات واستبدالها في مصدر البيانات وتشغيل إعادة عرض واحدة فقط للخريطة.

مصدر صور مصغرة من الخريطة لخطوط المتجهات

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

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

تلتزم خرائط Azure بمواصفات Mapbox Vector Tile، وهو معيار مفتوح. توفر خرائط Azure خدمات الصور المصغرة الاتجاهية من الخريطة التالية كجزء من النظام الأساسي:

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

تلميح

عند استخدام مربعات الصور المتجهة أو النقطية من خدمة عرض خرائط Azure مع Web SDK، يمكنك استبدال atlas.microsoft.com بالعنصر النائب {azMapsDomain}. سيتم استبدال هذا العنصر النائب بنفس المجال الذي تستخدمه الخريطة وسيقوم تلقائيًا بإلحاق نفس تفاصيل المصادقة أيضًا. يعمل هذا على تبسيط المصادقة بشكل كبير مع خدمة العرض عند استخدام مصادقة Microsoft Entra.

لعرض البيانات من مصدر الصور المصغرة من الخريطة على الخريطة، قم بتوصيل المصدر بإحدى طبقات عرض البيانات. يجب أن تحدد كل الطبقات التي تستخدم مصدر متجه قيمة sourceLayer في الخيارات. تقوم التعليمة البرمجية التالية بتحميل خدمة صور مصغرة من الخريطة لمتجهات تدفق نسبة استخدام شبكة خرائط Azure كمصدر صورة مصغرة من الخريطة للمتجهات، ثم تعرضها على خريطة باستخدام طبقة خط. يحتوي مصدر الصور المصغرة من الخريطة هذا على مجموعة واحدة من البيانات في الطبقة المصدر تسمى "تدفق نسبة استخدام الشبكة". تحتوي بيانات الخط في مجموعة البيانات هذه على خاصية تسمى traffic_level تُستخدم في هذه التعليمة البرمجية لتحديد اللون وقياس حجم الخطوط.

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

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

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

توصيل مصدر بيانات بطبقة

يتم عرض البيانات على الخريطة باستخدام طبقات التقديم. يمكن أن تشير طبقة عرض واحدة أو أكثر إلى مصدر بيانات واحد. تتطلب طبقات العرض التالية مصدر بيانات:

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

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

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

هناك طبقات عرض أخرى لا تتصل بمصادر البيانات هذه، ولكنها تقوم بتحميل البيانات مباشرة للعرض.

طبقة الصورة - تراكب صورة واحدة أعلى الخريطة وتربط زواياها بمجموعة من الإحداثيات المحددة.
طبقة الصور المصغرة من الخريطة - تُركب طبقة تجانب نقطية أعلى الخريطة.

مصدر بيانات واحد متعدد الطبقات

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

خريطة تعرض طبقات متعددة تعرض البيانات من مصدر بيانات واحد

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

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

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

تلميح

عند إضافة طبقات إلى الخريطة باستخدام الدالة map.layers.add، يمكن تمرير المعرف أو مثيل الطبقة الحالية كمعامل ثانٍ. هذا من شأنه أن يخبر تلك الخريطة بإدراج الطبقة الجديدة التي تتم إضافتها أسفل الطبقة الحالية. بالإضافة إلى تمرير معرف الطبقة، تدعم هذه الطريقة أيضًا القيم التالية.