استخدام الوحدة النمطية خرائط Azure Spatial IO

مقالة
02/25/2025

تدمج وحدة خرائط Azure Spatial IO البيانات المكانية مع خرائط Azure Web SDK باستخدام JavaScript أو TypeScript. يوضح هذا الدليل كيفية دمج واستخدام الوحدة النمطية Spatial IO في تطبيق ويب.

يمكنك استخدام الميزات القوية في هذه الوحدة النمطية من أجل:

قراءة وكتابة البيانات المكانية. يمكنك استخدام تنسيقات الملفات التي تتضمن:
- لغة ترميز الثقب الرئيسي (KML).
- KML مضغوط (KMZ).
- GPS Exchange Format (GPX).
- تجميع جغرافي بسيط حقا (GeoRSS).
- لغة تمييز الجغرافيا (GML).
- رمز كائن JavaScript الجغرافي (GeoJSON).
- نص معروف (WKT).
- قيم مفصولة بفواصل (CSV) عندما تتضمن الأعمدة معلومات مكانية.
الاتصال بخدمات 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.

تحذير

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

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

تثبيت الوحدة النمطية Spatial IO

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

الخيار الأول هو استخدام شبكة تسليم محتوى Azure المستضافة عالميا لوحدة خرائط Azure Spatial IO. استخدم علامة البرنامج النصي التالية في <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.

تنفيذ الوحدة النمطية Spatial IO

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

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

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that 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 Spatial IO واستخدم شبكة تسليم المحتوى لوحدة خرائط Azure Spatial IO. أضف المرجع التالي إلى <head> عنصر ملف HTML الخاص بك:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
تهيئة مصدر بيانات وإضافته إلى الخريطة.
تهيئة طبقة بيانات بسيطة وإضافة مصدر البيانات إليها.
عرض طبقة البيانات.
قبل التمرير لأسفل لرؤية التعليمات البرمجية الكاملة في الخطوة التالية، حدد أفضل الأماكن لوضع قصاصات التعليمات البرمجية لمصدر البيانات والطبقة. انتظر حتى تصبح موارد الخريطة جاهزة قبل معالجة الخريطة برمجيا.
```
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">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that 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. للتعرف على الآخرين، اقرأ الدلائل التالية:

مشاركة عبر

استخدام الوحدة النمطية خرائط Azure Spatial IO

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

تثبيت الوحدة النمطية Spatial IO

تنفيذ الوحدة النمطية Spatial IO

الملاحظات

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

مشاركة عبر

استخدام الوحدة النمطية خرائط Azure Spatial IO

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

تثبيت الوحدة النمطية Spatial IO

تنفيذ الوحدة النمطية Spatial IO

المحتوى ذو الصلة

الملاحظات

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