Skip To Content

Создание шаблонов настраиваемых приложений

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

Создание и настройка шаблона веб-приложения

Для того, чтобы создать шаблон веб-приложения, вы можете загрузить и изменить один из существующих шаблонов ArcGIS Configurable Apps, обновить имеющееся веб-приложение для работы с ресурсами вашего портала или построить новое веб-приложение с помощью одного из интерфейсов программирования ArcGIS Web API.

Независимо от того, какой способ вы выберите для создания собственного приложения, вы будете использовать параметры URL и карты. Вы можете работать с группами, если вы создаете шаблон группового приложения, и вы должны будете учитывать дополнительные требования для работы с базовыми картами Bing Maps, получая доступ к защищенным картам (не общедоступным) и используя ресурсы, которые требуют прокси или метод доступа к ресурсам Cross-Origin Resource Sharing (CORS).

Портал ArcGIS Enterprise включает ArcGIS API 3.35 for JavaScript в версии 10.9 Размещать собственный API и перенаправлять портал на локальную версию для новых шаблонов не нужно; шаблоны веб-приложения автоматически ссылаются на установленный API. Локально установленный API обычно доступен на https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.

Внимание:

Не изменяйте файлы шаблонов веб-приложений, которые предоставляются с ArcGIS Enterprise, так как эти файлы управляются порталом и любые внесенные в них изменения могут быть впоследствии перезаписаны порталом. Если вы хотите настроить шаблоны, то выполните следующие действия:

  1. Создайте копию существующего файла шаблона, который вы хотите настроить.
  2. Разместите копию в другом месте на диске.
  3. Настройте копию шаблона.
  4. Добавьте ее на портал в качестве нового шаблона.

Веб-карты

Шаблоны приложений созданы для работы с картой, отображаемой в текущий момент времени в Map Viewer. Шаблоны обычно создают карту на основе веб-карты, указанной в параметре веб-карты из URL. В каждом веб API есть вспомогательный метод, который создает карту, используя ID веб-карты.

Например, вы можете при работе с ArcGIS API for JavaScript использовать метод esri.arcgis.utils.createMap, чтобы создать карту, основанную на входном ID. Вы также можете добавить функцию callback, которая выполняется по завершению синхронного запроса к 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 предоставляет доступ к ресурсам вашего портала. Вы можете использовать его для извлечения ресурсов группы, обращаясь к ним через входной ID группы.

В этом примере вы сформируете запрос с целью поиска группы со входным значением идентификатора.

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.

Прокси и поддержка CORS

Поскольку ваше приложение будет формировать кросс-доменные запросы, необходимо включить механизм доступа CORS или добавить прокси к вашему приложению.

.Добавление шаблона на портал

После создания шаблона веб-приложения, сделайте его доступным на ArcGIS, добавив шаблон на портал.

Добавление шаблона как элемента приложения

Добавьте шаблон на свой портал в виде элемента веб-приложения и укажите URL приложения. В качестве Назначения выберите Настраиваемый. Для API выберите JavaScript.

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

Регистрация шаблона приложения

После добавления шаблона в виде элемента, необходимо зарегистрировать приложение.Вы можете зарегистрировать собственные разработанные приложения на основе OAuth 2.0. Регистрация вашего приложения на портале предоставляет вам ID-идентификатор приложения. Идентификатор приложения ID является основой для распространения приложений и получения отчетов об использовании.

При регистрации шаблона веб-приложения, задайте Тип как Браузер, а для URI перенаправления укажите URL-адрес шаблона приложения.

Используйте Identity Manager, чтобы ID зарегистрированного приложения мог быть распознан. Для получения дополнительной информации см. примеры OAuth Basic и OAuth Popup, поставляемые с ArcGIS API for JavaScript.

Сделайте приложение настраиваемым

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

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

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

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

Примечание:

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

При создании файла конфигурации сделайте следующее:

  1. Создайте одну или несколько секций, указав для каждой категорию и набор полей.
    {
        "configurationSettings": [
            {
                "category": "",
                "fields": []
            }
        ]
    }
  2. Укажите опции конфигурации, используя типы полей, перечисленные в следующей таблице. При создании файла конфигурации убедитесь, что в процессе свойство fieldName является уникальным.

    Тип поляОписание

    Paragraph

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

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

    Number

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

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

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

    range:0.5

    Date and time

    Создает переключатель дат с возможностью выбора дат.

    {
         "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 – карта содержит ресурсы, не поддерживаемые в версии ArcGIS API for JavaScript 4x
    {
       “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"]   
        }]
    }

    Радио-кнопка

    Создает зависимый переключатель, когда в каждый момент времени может быть выбрана только одна опция. Для выбранной опции будет задано значение 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

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

Размещение шаблона в галерее вашей организации

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