Наверх

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

В этом разделе

  1. Создание и настройка шаблона веб-приложения
  2. Добавление шаблона на ArcGIS Online.
  3. Сделайте приложение настраиваемым
  4. Размещение шаблона в галерее вашей организации

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

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

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

Примечание:

ArcGIS Configurable Apps выводится из употребления в 2025 году. Подробнее об отказе от ArcGIS Configurable Apps и о том, как перенести свои настраиваемые приложения в ArcGIS Instant Apps, читайте в статье блога ArcGIS ArcGIS Configurable Apps Roadmap for Retirement.

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

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

Параметры URL

При использовании шаблона вы задаете карту или группу для отображения, включив webmap или group ID в качестве URL-параметра в шаблоне. Идентификаторы ID веб-карт указываются с помощью параметра webmap, а содержание группы задается с помощью параметра group. Чтобы ваш пользовательский шаблон мог работать с текущей картой или группой, вам потребуется добавить код в приложение, чтобы получить идентификатор текущей веб-карты или ID группы из URL-ссылки.

Например, вы можете отображать Базовую карту Европы в шаблоне Основной вьюер.

Чтобы это сделать, начните работать с URL Основного вьюера:

https://www.arcgis.com/apps/View/index.html

Скопируйте webmap= часть URL-адреса Europe Basemap:

https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025

И добавьте ее в конец URL Basic Viewer:

https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025

В ArcGIS API for JavaScript есть вспомогательный метод esri.urlToObject, который упрощает эту процедуру. Данный метод конвертирует параметры URL в объект.

var webmap;
var urlObject = esri.urlToObject(document.location.href);

После конвертации параметров URL в объект вы можете получить доступ к многочисленным входным ресурсам. Например, вы можете назначить параметру URL веб-карты значение переменной webmap_id.

var webmap_id = urlObject.query.webmap;
Примечание:

Если приложение является настраиваемым, то вам также необходимо использовать URL-параметр appid, который задает настройки конфигурации.

Веб-карты

Примечание:

Эта функция поддерживается только в Map Viewer Classic.

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

Например, вы можете при работе с 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 позволяет обращаться к объекту ответа, который открывает доступ к объекту карты, слоям и т.д. Более подробно о классе Map см. в ArcGIS API for JavaScript.

Группа

Групповые шаблоны отображают в приложении содержание из заданной группы.

ArcGIS REST API предоставляет доступ к ресурсам ArcGIS Online. Вы можете использовать его для извлечения ресурсов группы, обращаясь к ним через входной ID группы. Подробнее о работе с ArcGIS REST API см. в обзоре ArcGIS REST API.

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

var portal = new esri.arcgis.Portal('https://www.arcgis.com');
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

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

Добавление шаблона на ArcGIS Online.

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

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

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

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

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

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

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

Если вы используете шаблон ApplicationBase, задайте настраиваемый параметр oauthappid в файле config/defaults.js.

//sample

 "oauthappid": “h4xZWhfz0an0TvqC"

Если вы не используете шаблон ApplicationBase, необходимо воспользоваться Identity Manager, чтобы ID зарегистрированного приложения мог быть распознан. Для получения доп. информации см. примеры OAuth Basic и OAuth Popup.

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

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

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

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

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

Примечание:

Рекомендуется запускать код 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"

    Boolean

    Создает отметки для задания значений true или false. Используйте condition, чтобы узнать, имеется ли у карты указанная функциональность. Если карта не удовлетворяет условию, надпись и опция не будут отображаться на панели настройки.

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

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

    tool_bookmarks:false

    Число

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

    { 
     "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",
   "transparency" : true,
   "noColor" : true
 }

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

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

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

Отзыв по этому разделу?

В этом разделе
  1. Создание и настройка шаблона веб-приложения
  2. Добавление шаблона на ArcGIS Online.
  3. Сделайте приложение настраиваемым
  4. Размещение шаблона в галерее вашей организации