Skip To Content

إنشاء قوالب التطبيق القابلة للتكوين

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

إنشاء وتكوين قالب تطبيق الويب

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

أيًا كانت الطريقة التي أنشأت بها تطبيقك، فستتعامل مع معلمات عناوين URL وخرائط. يمكنك العمل مع المجموعات إذا كنت تقوم بإنشاء قالب تطبيق يستند إلى مجموعة، ويمكن أن تضع في الاعتبار المتطلبات الإضافية للعمل مع خرائط أساس Bing Maps، والوصول إلى الخرائط غير العامة، والعمل مع الموارد التي تتطلب وكيل أو مشاركة الموارد عبر الأصل (CORS).

تتضمن بوابة ArcGIS Enterprise الإلكترونية ArcGIS Maps SDK for JavaScript. لا تقتضي الحاجة إلى استضافة API والإشارة إلى المدخل في الإصدار المحلي لقالب التطبيقات التي تم إنشائها حديثًا، يتم إرجاع قوالب تطبيق الويب لـ API المثبت تلقائيًا. يتوفر API الذي تم تثبيته محليًا على https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.

تنبيه:

لا تقم بتغيير ملفات قالب تطبيق الويب المقدمة مع ArcGIS Enterprise، حيث تتم إدارة هذه الملفات بواسطة ArcGIS Enterprise، وقد يتم الكتابة فوق أي تعديلات تجريها عليها لاحقًا عند ترقية ArcGIS Enterprise. إذا أردت تخصيص القوالب، قم بما يلي:

  1. قم بعمل نسخة من ملف القالب الحالي والذي ترغب في تخصيصه.
  2. ضع النسخة في موقع مختلف على القرص
  3. قم بتخصيص نسخة من القالب.
  4. اضفها إلى البوابة الإلكترونية بصفتها قالب جديد.

خرائط الويب

ملاحظة:‏

هذه الوظيفة مدعومة فقط في Map Viewer Classic.

صُمّمت قوالب التطبيق للتعامل مع خريطة الويب المعروضة حاليًا في Map Viewer Classic. تقوم القوالب بإنشاء الخريطة المستندة إلى خريطة الويب الموجودة في معلمات عنوان URL لخريطة الويب. تحتوي كل واجهة تطبيق من API على الويب على وسيلة مساعدة تقوم بإنشاء الخريطة باستخدام المعلومات من الرقم التعريفي لخريطة الويب.

على سبيل المثال، يُمكنك استخدام طريقة ArcGIS Maps SDK for JavaScript esri.arcgis.utils.createMap لإنشاء خريطة تستند إلى مُعرّف الإدخال. يُمكنك أيضًا تضمين وظيفة الإرجاع التي يتم تنفيذها عند اكتمال طلب التزامن لـ esri.arcgis.utils.createMap.

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});
ملاحظة:‏

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

توفر وظيفة callback الوصول إلى كائن الاستجابة الذي يوفر الوصول لكائن الخريطة والطبقات وأكثر.

مجموعة

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

يوفر ArcGIS REST API الوصول إلى المحتوى من البوابة الإلكترونية. يمكنك استخدامه لاسترداد محتوى المجموعة المستند إلى الرقم التعريفي للمجموعة المدخلة.

في هذا المثال، تقوم بالاستعلام لإيجاد مجموعة ذات معرف إدخال.

var portal = new esri.arcgis.Portal('https://webadaptorhost.domain.com/webadaptorname/');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

بمجرد عثورك على المجموعة، يمكنك الاستعلام لاسترداد العناصر من المجموعة.

في هذا المثال، ستقوم بالاستعلام عن المجموعة لإيجاد خمسة عناصر من نوع Web Map أو Web Mapping Application.

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

اعتبارات إضافية

يتم عادةً تصميم تطبيقات الويب للتعامل مع العديد من أنواع المحتوى، لذلك يمكن أن تحتاج إلى إعداد القالب لمعالجة الخرائط مع خرائط أساس Bing Maps، والمحتوى غير العام، وهكذا. الاعتبارات المعينة مدرجة أدناه.

مفتاح Bing Maps

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

ملفات دعم Proxy و CORS

لأن التطبيق سيقوم بعمل طلبات المجال المتعامد، ستحتاج إلى تمكين CORS أو إضافة وكيل إلى التطبيق.

أضف القالب الخاص بك إلى البوابة الإلكترونية

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

أضف القالب في صورة عنصر التطبيق

أضف القالب إلى البوابة الإلكترونية كعنصر تطبيق ويب وحدد عنوان URL للتطبيق. في الغرض، اختر قابل للتكوين. في API، اختر JavaScript.

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

تسجيل قوالب التطبيق

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

عند تسجيل قالب تطبيق الويب، قم بتعيين النوع إلى المستعرض مع إعادة توجيه URI التي تشير إلى عنوان URL لتطبيق القالب.

التعامل مع مدير الهوية للتعرف على مُعرف التطبيق المُسجل. لمزيد من المعلومات، راجع نماذج OAuth الأساسي والعناصر المنبثقة OAuth المضمنة في ArcGIS Maps SDK for JavaScript.

جعل التطبيق الخاص بك قابل للتكوين

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

إن جعل التطبيق الخاص بك قابل للتطبيق يتضمن إنشاء ملف التكوين واقتران معلومات ملف التكوين مع عنصر قالب التطبيق الذي قمت بإنشائه.

إنشاء ملف التكوين

ملف تكوين التطبيق هو ملف JSON الذي يقوم بتعريف خيارات التكوين لقالب التطبيق. راجع مثالاً كاملاً لملف التكوين.

ملاحظة:‏

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

قم بعمل ما يلي لإنشاء ملف التكوين:

  1. قم بإنشاء قسم واحد أو أكثر عن طريق تحديد فئة وتعيين الحقول لكل قسم.
    {
        "configurationSettings": [
            {
                "category": "",
                "fields": []
            }
        ]
    }
  2. قم بتعيين خيارات التكوين باستخدام أنواع الحقل المدرجة في الجدول الموضح أدناه. عند إنشاء ملف التكوين، تأكد من أن خاصية fieldName هي خاصية فريدة ضمن إعدادات التكوين.

    نوع الحقلالوصف

    فقرة

    يعرض النص التوضيحي في مربع حوار التكوين.

    {
           "type": "paragraph",
           "value": "* These menu items will appear in the application when the web map has layers that require them."
    }

    السلسلة

    يقبل إدخال النص. يشمل خاصية stringFieldOption التي تقوم بتعيين نوع المربع النصي الذي يُعرض على الشاشة. القيم هي textbox وtextarea، وrichtext. الخيار textbox هو الوضع الافتراضي ومربع نص الخط الأحادي. يعرض الخيار textarea مربع نصي أكبر لإدخال البيانات. يعرض الخيار richtext محرر نصي غني يتيح للمستخدمين تطبيق بعض عمليات التنسيق، مثل تعيين الخط إلى عريض أو مائل في النص.

    {
            "type": "string",
            "fieldName": "description",
            "label": "Description",
            "tooltip": "",
             "stringFieldOption": richtext || textarea || textbox,
            "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter"
    }

    مخرجات العينة

    description:"Bike Accidents"

    منطقي

    يقوم بإنشاء خانة اختيار لتحديد true أو قيم false. استخدم condition لرؤية ما إذا كانت الخريطة تحتوي على الوظائف المحددة. إذا لم تكن الخريطة تلبي الشرط، لا يتم عرض خانة التأشير والتسمية في لوحة التكوين.

    {
           "type": "boolean",
           "fieldName": "tool_bookmarks",
           "condition": "bookmark",
           "label": "Bookmarks",
           "tooltip": ""
     }

    مخرجات العينة

    tool_bookmarks:false

    رقم

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

    { 
         "type": "number",
         "fieldName": "range",
         "label": "Range:",
         "tooltip": "",
         "constraints" :{min:0,max:10,places:0}
    }

    مخرجات العينة

    range:0.5

    التاريخ والوقت

    لإنشاء أداة تحديد التاريخ مع خاصية اختيار التواريخ.

    {
         "type":"date",
         "fieldName" : "startDate",
         "label" : "Start Date"
    }

    لإنشاء أداة تحرير الوقت مع خاصية اختيار الوقت.

    {
         "type": "time",
         "fieldName": "startTime",
         "label": "Start Time"
    }

    مخرجات العينة (بتنسيق ISO-8601 ) للتاريخ والوقت

    Start Date and Time: 1970-01-01T21:30:00.000Z

    خيارات

    تقوم بإنشاء قائمة منسدلة بها مجموعة متنوعة من الخيارات.

    {
       "type": "options",
       "fieldName": "theme",
       "tooltip": "Color theme to use",
       "label": "Color Scheme:",
       "options": [{
         "label": "Blue",
         "value": "blue"
       }, {
         "label": "Green",
         "value": "green"
       }, {
         "label": "Orange",
         "value": "orange"
       }]
     }

    مخرجات العينة

    theme:"blue"

    منتقى الألوان

    يعرض منتقى لاختيار الألوان من اللوحة أو تحديد قيم hex أو rgb أو hsv.

    {
       "type": "color", 
       "label": "Choose a selection color",
       "fieldName": "selectionColor"
       
     }

    مخرجات العينة

    selectionColor:"#829254"

    مربع حوار خريطة الويب

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

    • time- الخريطة ممكنة زمنيًا
    • edit- التطبيق يحتوي على طبقة واحدة على الأقل قابلة للتحرير
    • featurelayer- لدى الخريطة طبقة معالم واحدة على الأقل
    • filter- الخريطة تحتوي على عامل تصفية تفاعلي مُعرَّف
    • 4x- الخريطة تحتوي على محتوى غير مدعوم حتى الآن في الإصدار 4x من ArcGIS Maps SDK for JavaScript
    {
       “type”: “webmap”,
       “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
     }

    مخرجات العينة

    webmap:"739ef0cf75de432995c77dd44ec8f652"

    حوار مشهد الويب

    يعرض مربع الحوار لاستعراض أو البحث عن مشهد ويب جديد لعرضها في التطبيق.

    {
       "type": "webscene"
     }

    مخرجات العينة

    webscene:"ab41c86a588748128e6f5d80990a2395"

    مربع حوار المجموعة

    يعرض مربع حوار لاستعراض أو البحث عن مجموعة جديدة لعرضها في التطبيق.

    {
       "type": "group"
    
     }

    مخرجات العينة

    group:"449d00a4478d4849bbb65612355d6cd1"

    محدد حقل وطبقة متعدد

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

    ملاحظة:‏

    في حال تعيين editOnly على true، فستتضمن قائمة الحقل الحقول القابلة للتحرير فقط.

     {  
                   "label":"Select search layers and fields",
                   "fieldName":"searchLayers",
                   "type":"multilayerandfieldselector",
                   "editOnly":true,  
                   "tooltip":"Select layer and fields to search",
                   "layerOptions":{  
                      "supportedTypes":[  
                         "FeatureLayer"
                      ],
                      "geometryTypes":[  
                         "esriGeometryPoint",
                         "esriGeometryLine",
                         "esriGeometryPolyline",
                         "esriGeometryPolygon"
                      ]
                   },
                   "fieldOptions":{  
                      "supportedTypes":[  
                         "esriFieldTypeString"
                      ]
                   }
                }

    مخرجات العينة

    searchLayers: [{
        "id":"Whittier_Hazards_821",
        "fields":[],
        "type":"FeatureLayer"
    }]

    محدد الحقل والطبقة

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

    ملاحظة:‏

    في حال تعيين editOnly على true، فستتضمن قائمة الحقل الحقول القابلة للتحرير فقط.

      {  
                   "type":"layerAndFieldSelector",
                   "fieldName":"tableLayer",
                   "label":"Layer to display in table",
                   "tooltip":"Layer to display in table",
                   "fields":[  
                      {  
                         "multipleSelection":true,
                         "editOnly":true,    
                         "fieldName":"hiddenFields",
                         "label":"Hide the selected fields",
                         "tooltip":"Fields to hide in table",
                         "supportedTypes":[  
                            "esriFieldTypeSmallInteger",
                            "esriFieldTypeInteger",
                            "esriFieldTypeSingle",
                            "esriFieldTypeDouble",
                            "esriFieldTypeString"
                         ]
                      }
                   ],
                   "layerOptions":{  
                      "supportedTypes":[  
                         "FeatureLayer"
                      ],
                      "geometryTypes":[  
                         "esriGeometryPoint",
                         "esriGeometryLine",
                         "esriGeometryPolygon"
                      ]
                   }
                }

    مخرجات العينة

    tableLayer: {
        id: "2014CyclingAccidents_All_874",
        fields: [{
            id: "urlField",
            fields: ["Casualty_Severity"]   
        }]
    }

    راديو

    يُنشئ زر تبادلي حيث يمكن تحديد خيار واحد فقط في كل مرة. سيتم تعيين الخيار المحدد ليكون صواب.

    {
       "type": "radio",
       "fieldName": "layout",
       "tooltip": "Custom Layout",
       "label": "Custom Layout:",
       "items": [{
         "label": "Sidebar",
         "value": "sidebarmenu"
       }, {
         "label": "FullWidth",
         "value": "fullwidth"
       }, {
         "label": "default",
         "value": "Default",
         "checked": true
       }]
     }

    مخرجات العينة

    customLayout:"fullmap"

    خرائط الأساس

    تعرض قائمة منسدلة من جميع خرائط أساس Esri المُسماة.

    {
      “type”: “basemaps”,
       “fieldname” :”my_basemap”,
       “label”: “Alternate Basemap”
    }

    مخرجات العينة

    my_basemap:"satellite"

    شَرطي

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

       {
                   "type":"conditional",
                   "condition": false,
                   "fieldName":"showtitle",
                   "label":"Display Map Title",
                   "items":[
                     {
                        "placeHolder":"Defaults to web map title",
                        "label":"Title:",
                        "fieldName":"title",
                        "type":"string",
                        "tooltip":"Defaults to web map title"
                     },{
                          "type":"paragraph",
                          "value":"Enter a value to override the default title font size "
                       },
                       {
                          "type":"string",
                          "label":"Title font size",
                          "tooltip":"Specify title font size",
                          "fieldName":"titlefontsize",
                          "placeHolder":"20px"
                       }
                   ]
                }
    }

    بحث

    تكوين جزء البحث للعثور على المعالم داخل حقل طبقة المعلم أو العناوين باستخدام محدد المواقع. إذا قمت بتكوين بحث عن المعالم، يمكن للمستخدمين اختيار طبقة المعالم وحقول البحث.

       {
    “type”: “Search”,
      “fieldName”: “searchConfig”,
    “label”: “Configure Search Options”
    }

    مخرجات العينة

    searchConfig: {
    sources: [{
    locator: {
        url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
        _url: {
            path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
            query: null
        },
            normalization: true
        },
        url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
        name: "ArcGIS World Geocoding Service",
        enableSuggestions: true,
        singleLineFieldName: "SingleLine",
        enable: true,
        id: "dojoUnique3"
    }],
    activeSourceIndex: 0,
    enableSearchingAll: false
    }

    ScaleList

    يعرض قائمة من مستويات المقياس المحددة مسبقًا ويمكن للمستخدم الاختيار منها. على سبيل المثال، الدول، الولايات، الولاية، الدول، الدولة، المترو، مدينة، مدينة، مجاورة.

    {
        “type”: “scaleList”,
        “fieldName”: “customUrlLayerZoomScale”,
        “label”: “Choose zoom level”
    }

    مخرجات العينة

    “customUrlLayerZoomScale”: 12000

    ExtentMap

    تنشئ محددًا مع خيارات توسيط الخريطة ومستوى التكبير/التصغير.

    {
       "type":"extentMap",
       "label": "Select center and zoom",
       "fieldName": "mapExtent"
    }

    مخرجات العينة

    mapExtent: {
      level: 2,
      coords: {
         latitude: 51.304,
         longitude: -98.7231
         }
    }

اقتران معلومات التكوين مع عنصر القالب

بعد إنشاء ملف التكوين، يجب عليك إقران معلومات تكوين JSON بقالب التطبيق لجعله قابلاً للتكوين.

  1. في صفحة العنصر الخاصة بقالب التطبيق، انقر فوق علامة تبويب الإعدادات وانقر فوق رابط تطبيق رسم الخرائط على الويب في الأعلى.
  2. في مربع معلمات التكوين ، الصق كود JSON من ملف التكوين الخاص بك.
    ملاحظة:‏

    مربع معلمات التكوين يتطلب JSON صالح. من أفضل الممارسات تشغيل JSON الخاص بك من خلال المدقق JSONLint لتتأكد من البنية الصحيحة لـ JSON وخلوه من الأخطاء.

  3. احفظ الإعدادات الخاصة بك.

مثال على ملف التكوين

موضح أدناه مثال على ملف تكوين كامل:

{
    "configurationSettings": [
        {
            "category": "General Settings",
            "fields": [
                {
                    "type": "options",
                    "fieldName": "theme",
                    "tooltip": "Color theme to use",
                    "label": "Color Scheme:",
                    "options": [
                        {
                            "label": "Blue",
                            "value": "blue"
                        },
                        {
                            "label": "Green",
                            "value": "green"
                        },
                        {
                            "label": "Orange",
                            "value": "orange"
                        }
                    ]
                },
                {
                    "type": "string",
                    "fieldName": "layer",
                    "label": "Analysis Layer",
                    "tooltip": "Feature Layer with Facilities to search"
                },
                {
                    "type": "string",
                    "fieldName": "orgname",
                    "label": "Organization Name:",
                    "tooltip": "",
                    "stringFieldOption": "richtext",
                    "placeHolder": "Organization Name"
                },
                {
                    "type": "number",
                    "fieldName": "bufferdistance",
                    "label": "Search Distance (miles)",
                    "value": "1"
                }
            ]
        }
    ],
    "values": {
        "theme": "orange",
        "bufferdistance": 1
    }
}

تمييز القالب في معرض المؤسسة الخاصة بك

إذا كنت ترغب في استخدام القالب الخاص بك في معرض Configurable Apps الخاص بمؤسستك أو معرض تطبيقات المجموعة، فقم بمشاركة العنصر مع الجميع ومع المجموعة المستخدمة لذلك المعرض. بعد ذلك، يمكن لمسؤول مؤسستك تكوين الخريطة أو تكوين المجموعات لاستخدام المجموعة التي تتضمن القالب الخاص بك.