Skip To Content

Добавление настраиваемых параметров в шаблоны

После создания шаблона веб-приложения, вы можете сделать его настраиваемым. Настраиваемые веб-приложения дают пользователям возможность настройки внешнего вида и поведения приложения. Создание настраиваемого шаблона приложения — это четырехэтапный процесс:

  1. Создайте шаблон веб-приложения, если вы этого еще не сделали.
  2. Создайте файл конфигурации, чтобы определить параметры конфигурации.
  3. Задайте шаблон, установив свойства конфигурации, и примените их к приложению.
  4. Свяжите с элементом файл конфигурации для шаблона приложения.

Создание файла конфигурации

Файл конфигурации представляет собой файл 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."
}

String

Принимает входной текст. Содержит свойство 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"

Boolean

Создает отметки для задания значений 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": "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 – карта содержит ресурсы, не поддерживаемые в версии ArcGIS Maps SDK for JavaScript 4x
{
   “type”: “webmap”,
   “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
 }

Пример выходных данных

webmap:"739ef0cf75de432995c77dd44ec8f652"

Диалог Группа

Отображает диалоговое окно выбора или поиска новой группы для приложения.

{
   "type": "group"

 }

Пример выходных данных

group:"449d00a4478d4849bbb65612355d6cd1"

Несколько слоев и Выбор поля

Представляет в виде дерева слои и поля карты, которые соответствуют поддерживаемым типам и типам геометрии. Позволяет конечным пользователям приложения выбирать несколько слоев и несколько полей в каждом слое.

 {  
               "label":"Select search layers and fields",
               "fieldName":"searchLayers",
               "type":"multilayerandfieldselector",
               "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"
}]

Выбор слоев и полей

Отображает ниспадающий список слоев карты, отфильтрованный по типам и геометрии. Дополнительно укажите один или несколько полей для выбора, что позволит пользователям выбирать слой и поля.

  {  
               "type":"layerAndFieldSelector",
               "fieldName":"tableLayer",
               "label":"Layer to display in table",
               "tooltip":"Layer to display in table",
               "fields":[  
                  {  
                     "multipleSelection":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"]   
    }]
}

Radio

Создает зависимый переключатель, когда в каждый момент времени может быть выбрана только одна опция. Для выбранной опции будет задано значение true (правда).

{
   "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"

Условный

Отображает или скрывает ресурсы в зависимости от условия true или false. Например, если опция Показать список слоев отключена, список слоев и связанные опции (например, включить подслои в список слоев) скрыты.

   {
               "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

Пример файла конфигурации

Ниже приводится пример готового файла конфигурации:

{
    "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
    }
}

Настройка шаблона для считывания информации файла конфигурации

Чтобы сделать шаблон настраиваемым, приложение должно принять идентификатор элемента для картографического веб-приложения как значение для параметра appid URL-адреса. Этот идентификатор используется при асинхронном запросе для получения свойств конфигурации для приложения. В ArcGIS Maps SDK for JavaScript для получения информации о конфигурации приложения можно использовать esri.request.

В данном примере esri.arcgis.utils.arcgisUrl решен как www.arcgis.com/sharing/content/items.

var requestHandle = esri.request({
    url: esri.arcgis.utils.arcgisUrl + "/" + appid + "/data",
    content: {
        f: "json"
     },
    callbackParamName: "callback",
    load: function (response) {
     for (var key in response.values){
      if(response.values[key]!==undefined)configOptions[key]=response.values[key];
      }
    }, 
});

Ответ будет содержать изменения, которые пользователь внес в приложение при помощи панели настройки. Получив эти изменения, вы можете применить их к приложению. Приложение должно определить значения по умолчанию для опций конфигурации, чтобы оно могло работать и в таких ситуациях, когда шаблон не сконфигурирован.

 {
    "source": "15a34e2c161b4364860854fbc84262c5",
    "folderId": "5705faa4594a4fd09edf01742c16e523",
    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",
        "layer":"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

Связывание информации файла конфигурации с элементом для шаблона приложения

После создания файла конфигурации вы можете связать его со своим пользовательским шаблоном приложения и сделать приложение настраиваемым.

  1. Если это еще не сделано, добавьте шаблон как элемент приложения.
  2. На странице элемента приложения щелкните вкладку Настройки и найдите раздел Картографическое веб-приложение.
  3. В ниспадающем меню Назначение выберите Настраиваемый.
  4. В поле Параметры конфигурации введите код JSON из файла конфигурации.
    Примечание:

    Для поля Параметры конфигурации требуется допустимый JSON. Рекомендуется запускать JSON через валидатор, например – через JSONLint, чтобы убедиться в том, что ваш JSON правильно оформлен и не содержит ошибок.

  5. Щелкните Сохранить, чтобы сохранить свои настройки приложения.

Если вы хотите использовать настраиваемый шаблон в галерее приложений Map Viewer Classic вашей организации или в галерее приложений группы, сделайте его доступным для группы, которая использует эту галерею приложений. Тогда администратор вашей организации сможет настроить карту или настроить группы, чтобы использовать группу, содержащую ваш шаблон.