عندها يكون لديك خيار جعل التطبيق قابل للتكوين للسماح للمستخدمين بتخصيص المظهر والسلوك. إذا كانت المؤسسة تخطط لتمييز القالب الخاص بك في أحد معارضها, يمكنك مشاركة القالب مع مجموعة قالب التطبيق.
إنشاء وتكوين قالب تطبيق الويب
لإنشاء قالب تطبيق ويب مخصص، يمكنك تنزيل وتعديل أحد قوالب ArcGIS Configurable Apps الحالية القابلة للتكوين، وتحديث تطبيق ويب حالي للتعامل مع المحتوى من البوابة الإلكترونية أو إنشاء تطبيق ويب جديد باستخدام أحد ArcGIS Web APIs.
أيًا كانت الطريقة التي أنشأت بها تطبيقك، فستتعامل مع معلمات عناوين URL والخرائط. يمكنك العمل مع المجموعات إذا كنت تقوم بإنشاء قالب تطبيق يستند إلى مجموعة، ويمكن أن تضع في الاعتبار المتطلبات الإضافية للعمل مع خرائط أساس Bing Maps، والوصول إلى الخرائط غير العامة، والعمل مع الموارد التي تتطلب وكيل أو مشاركة الموارد عبر الأصل (CORS).
تحتوي بوابة ArcGIS Enterprise الإلكترونية علىArcGIS API 3.35 لـ JavaScript إصدار 10.9. لا تقتضي الحاجة إلى استضافة API والإشارة إلى المدخل في الإصدار المحلي لقالب التطبيقات التي تم إنشائها حديثًا، يتم إرجاع قوالب تطبيق الويب لـ API المثبت تلقائيًا. يتوفر API الذي تم تثبيته محليًا على https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.
تنبيه:
لا تقم بتبديل ملفات قالب تطبيق الويب التي تم توفيرها مع ArcGIS Enterprise، لأن هذه الملفات مدارة بواسطة البوابة الإلكترونية، وأي تبديل ستقوم به يمكن أن يؤثر بدوره على البوابة الإلكترونية. إذا أردت تخصيص القوالب، قم بما يلي:
- قم بعمل نسخة من ملف القالب الحالي والذي ترغب في تخصيصه.
- ضع النسخة في موقع مختلف على القرص
- قم بتخصيص نسخة من القالب.
- اضفها إلى البوابة الإلكترونية بصفتها قالب جديد.
خرائط الويب
صُمّمت قوالب التطبيق للتعامل مع خريطة الويب المعروضة حاليًا في Map Viewer. تقوم القوالب بإنشاء الخريطة المستندة إلى خريطة الويب الموجودة في معلمات عنوان URL لخريطة الويب. تحتوي كل واجهة تطبيق من API على الويب على وسيلة مساعدة تقوم بإنشاء الخريطة باستخدام المعلومات من الرقم التعريفي لخريطة الويب.
على سبيل المثال، يُمكنك استخدام طريقة ArcGIS API 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.
بمجرد إضافة القالب الخاص بك، يظهر عنصر القالب في المحتوى الخاص بك ويمكنك تحرير التفاصيل. تأكد من تضمين ملخص وعنوان وصفي وذلك لأن هذه المعلومات يتم عرضها عند قيام المستخدمين بعرض هذا العنصر في معرض التطبيق القابل للتكوين. اختياريًا، يمكنك إنشاء ملف .zip يتضمن ملفات التطبيق وإرفاقه بالعنصر لتوفير إمكانية التنزيل.
تسجيل قوالب التطبيق
بعد إضافة قالب التطبيق في صورة عنصر، يجب عليك تسجيل التطبيق. يمكنك تسجيل التطبيقات المستندة إلى OAuth 2.0 التي تطورها. يُوفر لك تسجيل التطبيق مع البوابة الإلكترونية مُعرف التطبيق. يُعد مُعرف التطبيق أساس توزيع التطبيقات والحصول على تقارير الاستخدام.
عند تسجيل قالب تطبيق الويب، قم بتعيين النوع إلى المستعرض مع إعادة توجيه عنوان URI الذي يشير إلى عنوان URL لتطبيق القالب.
التعامل مع مدير الهوية للتعرف على مُعرف التطبيق المُسجل. للحصول على مزيد من المعلومات، راجع عيناتOAuth Basic و OAuth Popup المتضمنة مع ArcGIS API for JavaScript.
جعل التطبيق الخاص بك قابل للتكوين
للسماح للمستخدمين بتخصيص مظهر وسلوك تطبيق الويب المخصص، ويمكنك جعله قابل للتكوين. على سبيل المثال، يمكنك السماح للمستخدم بتغيير ألوان التطبيق أو تخصيص الإعدادات الأخرى للتطبيق.
إن جعل التطبيق الخاص بك قابل للتطبيق يتضمن إنشاء ملف التكوين واقتران معلومات ملف التكوين مع عنصر قالب التطبيق الذي قمت بإنشائه.
إنشاء ملف التكوين
ملف تكوين التطبيق هو ملف JSON الذي يقوم بتعريف خيارات التكوين لقالب التطبيق. راجع مثالاً كاملاً لملف التكوين.
ملاحظة:
تتمثل إحدى أفضل الممارسات في تشغيل JSON الخاص بك من خلال مدقق، مثل JSONLint للتأكد من البنية الصحيحة لـ JSON وخلوه من الأخطاء.
قم بعمل ما يلي لإنشاء ملف التكوين:
- قم بإنشاء قسم واحد أو أكثر عن طريق تحديد فئة وتعيين الحقول لكل قسم.
{ "configurationSettings": [ { "category": "", "fields": [] } ] } - قم بتعيين خيارات التكوين باستخدام أنواع الحقل المدرجة في الجدول الموضح أدناه. عند إنشاء ملف التكوين، تأكد من أن خاصية 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 API 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”: 12000ExtentMap
تنشئ محددًا مع خيارات توسيط الخريطة ومستوى التكبير/التصغير.
{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }مخرجات العينة
mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }
اقتران معلومات التكوين مع عنصر القالب
بعد إنشاء ملف التكوين, يجب عليك اقتران معلومات تكوين JSON مع قالب التطبيق الخاص بك لجعله قابل للتكوين.
- في صفحة العنصر الخاصة بقالب التطبيق، انقر على علامة تبويب الإعدادات ثم انقر على رابط تطبيق التخطيط على الويب بالأعلى.
- في مربع معلمات التكوين ، الصق كود JSON من ملف التكوين الخاص بك.
ملاحظة:
مربع معلمات التكوين يتطلب JSON صالح. من أفضل الممارسات تشغيل JSON الخاص بك من خلال المدقق JSONLint لتتأكد من البنية الصحيحة لـ JSON وخلوه من الأخطاء.
- احفظ الإعدادات الخاصة بك.
مثال على ملف التكوين
موضح أدناه مثال على ملف تكوين كامل:
{
"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
}
}
تمييز القالب في معرض المؤسسة الخاصة بك
إذا كنت ترغب في استخدام القالب في معرض تطبيق Map Viewer التابع للمؤسسة الخاصة بك أو معرض تطبيق المجموعة، قم بمشاركة العنصر مع الجميع ومع المجموعة المستخدم مع ذلك المعرض. بعد ذلك، يمكن لمسؤول مؤسستك تكوين الخريطة أو تكوين المجموعات لاستخدام المجموعة التي تتضمن القالب الخاص بك.