كيفية استخدام وحدة الإدخال والإخراج المكانية لخرائط Azure

مقالة
07/04/2023

توفر خرائط Azure Web SDK وحدة الإدخال والإخراج المكانية، والتي تدمج البيانات المكانية مع Azure Maps web SDK باستخدام JavaScript أو TypeScript. تسمح الميزات القوية في هذه الوحدة للمطورين بما يلي:

قراءة وكتابة البيانات المكانية. تتضمن تنسيقات الملفات المدعومة: ملفات KML وKMZ وGPX وGeoRSS وGML وGeoJSON وCSV التي تحتوي على أعمدة تحتوي على معلومات مكانية. يدعم أيضاً Well-Known Text "النص المعروف جيداً" (WKT).
الاتصال إلى خدمات Open Geospatial Consortium (OGC) والتكامل مع خرائط Azure web SDK، وتراكب Web Map Services (WMS) وWeb Map Tile Services (WMTS) كطبقات على الخريطة. لمزيد من المعلومات، راجع إضافة طبقة خريطة من Open Geospatial Consortium (OGC).
الاستعلام عن البيانات في خدمة ميزات الويب (WFS). لمزيد من المعلومات، راجع الاتصال إلى خدمة WFS.
تراكب مجموعات البيانات المعقدة التي تحتوي على معلومات النمط وعرضها تلقائيا. لمزيد من المعلومات، راجع إضافة طبقة بيانات بسيطة.
الاستفادة من فئات XML عالية السرعة وقارئ الملفات والكتاب المحدد. لمزيد من المعلومات، راجع عمليات الإدخال والإخراج الأساسية.

يوضح هذا الدليل كيفية دمج واستخدام الوحدة النمطية Spatial IO في تطبيق ويب.

يوفر هذا الفيديو نظرة عامة حول وحدة الإدخال والإخراج المكانية في خرائط Azure Web SDK.

التحذير

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

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

تثبيت وحدة الإدخال والإخراج المكانية

يمكنك تحميل وحدة الإدخال/الإخراج المكانية لخرائط Azure باستخدام أحد الخيارين:

Azure CDN المستضاف عمومياً لوحدة الإدخال/الإخراج المكانية لخرائط Azure. بالنسبة لهذا الخيار، يمكنك إضافة مرجع إلى JavaScript في عنصر <head> من ملف HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
يمكن تحميل التعليمة البرمجية المصدر لـ azure-maps-spatial-io محلياً، ثم استضافتها مع تطبيقك. تتضمن هذه الحزمة أيضًا تعريفات TypeScript. بالنسبة لهذا الخيار، استخدم الأمر التالي لتثبيت الحزمة:
```
npm install azure-maps-spatial-io
```
بعد ذلك، استخدم إعلان استيراد لإضافة الوحدة النمطية إلى ملف مصدر:
```
import * as spatial from "azure-maps-spatial-io";
```
لمعرفة المزيد، راجع كيفية استخدام حزمة npm للتحكم في الخريطة خرائط Azure.

باستخدام وحدة الإدخال والإخراج المكانية

قم بإنشاء ملف HTML جديد.

قم بتحميل خرائط Azure Web SDK وقم بتهيئة عنصر تحكم الخريطة. راجع دليل عنصر تحكم خرائط Azure للحصول على التفاصيل. بمجرد الانتهاء من هذه الخطوة، يجب أن يبدو ملف HTML الخاص بك كما يلي:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script>

    <script type='text/javascript'>

        var map;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

                // Write your code here to make sure it runs once the map resources are ready

            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>

</html>

قم بتحميل وحدة الإدخال/الإخراج المكانية لخرائط Azure. بالنسبة لهذا التمرين، استخدم CDN لوحدة الإدخال والإخراج المكانية لخرائط Azure. أضف المرجع التالي إلى <head> عنصر ملف HTML الخاص بك:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
قم بتهيئة datasource، وأضف مصدر البيانات إلى الخريطة. قم بتهيئة layer، وأضف مصدر البيانات إلى طبقة الخريطة. بعد ذلك، قم بتصيير كل من مصدر البيانات والطبقة. قبل التمرير لأسفل لرؤية التعليمة البرمجية الكاملة في الخطوة التالية، فكر في أفضل الأماكن لوضع مصدر البيانات ومقتطفات تعليمة برمجية الطبقة. تذكر أنه قبل أن نتعامل مع الخريطة برمجياً، يجب أن ننتظر حتى يصبح مورد الخريطة جاهزاً.
```
var datasource, layer;
```
و
```
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);
```

يجب أن تبدو التعليمات البرمجية HTML الآن مثل التعليمات البرمجية التالية. يوضح هذا النموذج كيفية عرض بيانات ميزة ملف XML على الخريطة.

إشعار

يستخدم هذا المثال Route66Attractions.xml.

<!DOCTYPE html>
<html>
<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

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

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read an XML file from a URL or pass in a raw XML string.
                atlas.io.read('Route66Attractions.xml').then(r => {
                    if (r) {
                        //Add the feature data to the data source.
                        datasource.add(r);

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({
                                bounds: r.bbox,
                                padding: 50
                            });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload='GetMap()'>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

تذكر استبدال <Your Azure Maps Key> بمفتاح الاشتراك الخاص بك. يجب أن تشاهد نتائج مشابهة للصورة التالية في ملف HTML الخاص بك:

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

الميزة التي أظهرناها هي واحدة فقط من العديد من الميزات المتوفرة في الوحدة النمطية Spatial IO. اقرأ الدلائل التالية لمعرفة كيفية استخدام وظائف أخرى في الوحدة النمطية Spatial IO:

إضافة طبقة بيانات بسيطة

قراءة البيانات المكانية وكتابتها

إضافة طبقة خريطة OGC

الاتصال إلى خدمة WFS

الاستفادة من العمليات الأساسية

تفاصيل تنسيق البيانات المدعومة

الرجوع إلى وثائق خرائط Azure Spatial IO:

حزمة الإدخال/الإخراج المكانية لخرائط Azure

Share via

كيفية استخدام وحدة الإدخال والإخراج المكانية لخرائط Azure

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

تثبيت وحدة الإدخال والإخراج المكانية

باستخدام وحدة الإدخال والإخراج المكانية

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

الموارد الإضافية