Jeśli dysponujesz uprawnieniami do tworzenia zasobów, możesz utworzyć niestandardowy szablon aplikacji hostowany na serwerze internetowym. Gdy niestandardowy szablon aplikacji został utworzony i skonfigurowany, spraw, aby Twoja aplikacja była wykrywalna na platformie ArcGIS, dodając szablon do usługi ArcGIS Online. Następnie możesz sprawić, aby aplikacja była konfigurowalna, dzięki czemu można dostosowywać jej wygląd i zachowanie. Jeśli instytucja planuje wykorzystać Twój szablon w jednej ze swoich galerii, możesz go udostępnić grupie szablonów aplikacji.
Tworzenie i konfigurowanie szablonu aplikacji internetowej
Aby utworzyć niestandardowy szablon aplikacji internetowej, możesz pobrać i zmodyfikować jeden z istniejących szablonów ArcGIS Configurable Apps, zaktualizować istniejącą aplikację internetową pod kątem pracy z zasobami usługi ArcGIS Online lub zbudować nową aplikację internetową za pomocą kodu w aplikacji startowej, który można pobrać ze strony GitHub.
Notatka:
Aplikacje ArcGIS Configurable Apps będą nieaktualne w 2025 roku. Aby dowiedzieć się więcej o nieaktualności aplikacji ArcGIS Configurable Apps oraz o sposobie migracji konfigurowalnych aplikacji do ArcGIS Instant Apps, zapoznaj się z artykułem na blogu ArcGIS Plan wycofywania aplikacji ArcGIS Configurable Apps.
Niezależnie od tego, w jaki sposób utworzysz aplikację, będziesz pracować z parametrami adresów URL i mapami. Możesz pracować z grupami, jeśli tworzysz szablon aplikacji korzystającej z grupy, a także rozważyć wprowadzenie dodatkowych wymagań dotyczących pracy z mapami bazowymi Bing Maps, uzyskiwania dostępu do niepublicznych map i pracy z zasobami, które wymagają serwera proxy lub udostępniania CORS.
Po utworzeniu szablonu aplikacji umieść go na serwerze internetowym.
Parametry URL
Podczas korzystania z szablonu należy określić mapę lub grupę, która zostanie wyświetlona, umieszczając w szablonie identyfikator webmap lub group jako parametr adresu URL. Do podawania identyfikatorów map internetowych służy parametr webmap a do podawania zasobów grupy — parametr group. Aby spersonalizowany szablon współpracował z bieżącą mapą lub grupą, w aplikacji należy umieścić kod w celu wyodrębnienia z adresu URL aktualnego identyfikatora mapy internetowej lub grupy.
Można na przykład wyświetlić mapę Europe Basemap w szablonie Prostej przeglądarki map (Basic Viewer).
W tym celu zacznij od adresu URL Prostej przeglądarki map (Basic Viewer):
https://www.arcgis.com/apps/View/index.htmlSkopiuj element webmap= adresu URL mapy bazowej Europy:
https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025Dodaj go na końcu adresu URL Prostej przeglądarki map:
https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025Interfejs ArcGIS API for JavaScript jest wyposażony w metodę pomocniczą esri.urlToObject, która upraszcza ten proces. Przy użyciu tej metody parametry URL są skonwertowane do postaci obiektu.
var webmap;
var urlObject = esri.urlToObject(document.location.href);Po skonwertowaniu parametrów URL do postaci obiektu można uzyskać dostęp do różnych parametrów wejściowych. Można na przykład przypisać wartość parametru URL mapy internetowej do zmiennej o nazwie webmap_id.
var webmap_id = urlObject.query.webmap;Notatka:
Jeśli aplikacja jest konfigurowalna, należy także uwzględnić parametr adresu URL o nazwie appid, który określa ustawienia konfiguracji.
Mapy internetowe
Notatka:
Ta funkcja jest obsługiwana tylko w aplikacji Map Viewer Classic.
Szablony aplikacji służą do pracy z mapą aktualnie wyświetlaną w przeglądarce Map Viewer Classic. Zazwyczaj szablony umożliwiają utworzenie mapy na podstawie mapy internetowej określonej w parametrze URL mapy internetowej. Każdy internetowy interfejs API jest wyposażony w metodę pomocniczą, która umożliwia utworzenie mapy z użyciem informacji znajdujących się w identyfikatorze mapy internetowej. Aby uzyskać więcej informacji na temat używania interfejsów API do pracy z mapami internetowymi, zapoznaj się z interfejsem ArcGIS API for JavaScript.
Na przykład można użyć metody ArcGIS API for JavaScript interfejsu esri.arcgis.utils.createMap, aby utworzyć mapę na podstawie identyfikatora wejściowego. Można również dodać funkcję wywoływaną zwrotnie wykonywaną po zakończeniu synchronicznego żądania esri.arcgis.utils.createMap.esri.arcgis.utils.createMap(webmap,"map",{
mapOptions:{
slider:false
},
bingMapsKey:bingMapsKey
}).then(function(response){
map = response.map;
});
Notatka:
Jeśli mapa internetowa zawiera mapę bazową Bing Maps, podczas korzystania z metody createMap należy podać klucz Bing Maps. Można także określić kilka innych opcji mapy, takich jak wyświetlanie suwaka, nawigacji, atrybutów itd.
Funkcja callback zapewnia dostęp do obiektu odpowiedzi, który z kolei umożliwia uzyskanie dostępu do obiektu, warstw lub innych elementów mapy. Aby uzyskać więcej informacji na temat klasy Map, zapoznaj się z opisem interfejsu ArcGIS API for JavaScript.
Grupa
W szablonach grupy wyświetlane są zasoby określonej grupy w aplikacji.
Interfejs ArcGIS REST API zapewnia dostęp do zasobów w usłudze ArcGIS Online. Można go używać do pobierania zasobów grupy na podstawie jej identyfikatora wejściowego. Więcej informacji na temat pracy z interfejsem ArcGIS REST API zawiera przegląd interfejsu ArcGIS REST API.
W tym przykładzie wykonujesz wyszukiwanie w celu znalezienia grupy z identyfikatorem wejściowym.
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];
});
});Po znalezieniu grupy można ją przeszukać w celu uzyskania elementów. W tym przykładzie grupa jest przeszukiwana w celu znalezienia pięciu elementów typu Web Map lub 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;
});
Dodatkowe wskazówki
Zazwyczaj aplikacje internetowe służą do pracy z wieloma typami zasobów, więc w celu obsługi map z mapami bazowymi Bing Maps, zasobami prywatnymi itd. może być wymagane skonfigurowanie szablonu. Poniżej podano szczegółowe wskazówki.
Klucz Bing Maps
Jeśli mapa internetowa, którą chcesz wyświetlić, korzysta z mapy bazowej usługi Bing Maps, należy umieścić w aplikacji klucz Bing Maps. Klucz Bing Maps jest podawany jako parametr dla metody createMap.
Obsługa serwera proxy i CORS
Ponieważ aplikacja będzie wysyłać żądania międzydomenowe do usługi ArcGIS Online, należy włączyć udostępnianie CORS lub dodać serwer proxy do aplikacji.
Dodawanie szablonu do usługi ArcGIS Online
Po utworzeniu szablonu aplikacji internetowej i udostępnieniu go na serwerze internetowym spraw, aby aplikacja była wykrywalna na platformie ArcGIS, dodając szablon do usługi ArcGIS Online.
Dodawanie szablonu jako elementu aplikacji
Dodawanie szablonu do usługi ArcGIS Online jako elementu aplikacji internetowej i podawanie adresu URL do aplikacji. Jako Cel wybierz Konfigurowalne. Jako Interfejs API wybierz JavaScript.
Po dodaniu szablonu element szablonu jest wyświetlany w zasobach i można edytować jego szczegóły. Pamiętaj, aby podać opisowy tytuł i podsumowanie, ponieważ te informacje są wyświetlane, gdy użytkownicy przeglądają ten element w galerii aplikacji konfigurowalnych. Możesz także utworzyć plik .zip zawierający pliki aplikacji i dołączyć go do elementu, aby umożliwić jego pobieranie.
Rejestracja szablonu aplikacji
Po dodaniu szablonu aplikacji jako elementu należy zarejestrować aplikację. Zarejestrowanie aplikacji umożliwia uzyskanie unikalnego identyfikatora aplikacji. Aby otrzymać statystyki użycia oraz umożliwić użytkownikom rejestrację na platformie z protokołem OAuth 2.0 będącym standaryzowanym schematem przeprowadzania weryfikacji, użyj identyfikatora aplikacji. Identyfikator aplikacji umożliwia także aplikacji współdziałanie z zasobami użytkowników skojarzonymi z ich instytucją, jak również pracę z wykorzystaniem innych funkcji dostępnych w usłudze ArcGIS Online, takich jak geokodowanie, wyznaczanie tras i wzbogacanie danych przestrzennych.
Przy rejestrowaniu szablonu aplikacji internetowej ustaw typ na Przeglądarka z adresem Identyfikator przekierowania URI wskazującym adres URL szablonu aplikacji.
Jeśli używany jest szablon ApplicationBase, należy ustawić konfigurowalną właściwość oauthappid w pliku config/defaults.js.
//sample
"oauthappid": “h4xZWhfz0an0TvqC"
Jeśli szablon ApplicationBase nie jest używany, należy skorzystać z menedżera tożsamości, który rozpozna zarejestrowany identyfikator aplikacji. Więcej informacji znajduje się w przykładach OAuth Basic i OAuth Popup.
Ustawienie aplikacji jako konfigurowalnej
Aby zezwolić na dostosowywanie wyglądu i zachowania aplikacji internetowej, możesz ustawić ją jako konfigurowalną. Możesz na przykład zezwolić użytkownikom na zmienianie kolorów aplikacji i dostosowywanie innych ustawień aplikacji.
Ustawienie aplikacji jako konfigurowalnej obejmuje utworzenie pliku konfiguracyjnego i powiązanie informacji w nim zawartych z utworzonym szablonem aplikacji.
Tworzenie pliku konfiguracyjnego
Plik konfiguracyjny aplikacji jest plikiem JSON, który definiuje opcje konfiguracji szablonu aplikacji. Na przykład plik konfiguracyjny dla aplikacji Przeglądarka podstawowa ma nazwę configurationPanel.js i można go znaleźć w folderze zasobów repozytorium Przeglądarki podstawowej firmy Esri. Zapoznaj się z pełnym przykładem pliku konfiguracyjnego.
Notatka:
Zaleca się, aby uruchamiać kod JSON za pośrednictwem modułu sprawdzania poprawności, jakim jest np. JSONLint, aby upewnić się, że kod JSON został prawidłowo napisany i nie zawiera błędów.
Aby utworzyć plik konfiguracyjny, wykonaj następujące czynności:
- Utwórz jedną lub większą liczbę sekcji, określając kategorię i zestaw pól dla każdej sekcji.
{ "configurationSettings": [ { "category": "", "fields": [] } ] } - Określ opcje konfiguracji za pomocą typów pola wyszczególnionych w tabeli poniżej. Podczas tworzenia pliku konfiguracyjnego upewnij się, że właściwość fieldName jest unikatowa w obrębie ustawienia konfiguracji.
Typ pola Opis Paragraf
Pozwala wyświetlić objaśnienie w oknie dialogowym konfiguracji.
{ "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }Ciąg znakowy
Obsługuje dane w postaci tekstu. Zawiera właściwość stringFieldOption, która określa typ pola tekstowego wyświetlanego na ekranie. Wartości to textbox, textarea i richtext. Opcja textbox jest wybrana domyślnie i oznacza pole tekstowe z pojedynczym wierszem. Opcja textarea wyświetla większe pole tekstowe do wprowadzania danych. Opcja richtext wyświetla edytor tekstu formatowanego, który pozwala użytkownikom stosować formatowanie, takie jak ustawienia czcionki (pogrubiona, kursywa itp.).
{ "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" }Przykładowe dane wynikowe
description:"Bike Accidents"Wartość logiczna
Tworzy pole wyboru pozwalające wybrać wartość true lub false. condition umożliwia sprawdzenie, czy mapa zawiera podaną funkcjonalność. Jeśli mapa nie spełnia warunku, pole wyboru i etykieta nie są wyświetlane w panelu konfiguracji.
{ "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" }Przykładowe dane wynikowe
tool_bookmarks:falseNumer
Tworzy pole, które przyjmuje wartości liczbowe. Jeśli pole ma przyjmować wartości tylko z określonego zakresu, można użyć ustawienia constraints, aby ograniczyć dane wejściowe do przedziału wartości lub sformatować wprowadzane wartości. Informacje o stosowaniu ograniczeń za pomocą formularza Number TextBox biblioteki Dojo można znaleźć w dokumentacji Dojo.
{ "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }Przykładowe dane wynikowe
range:0.5Data i czas
Tworzy selektor daty zawierający wybór dat.
{ "type":"date", "fieldName" : "startDate", "label" : "Start Date" }Tworzy selektor czasu zawierający wybór czasów.
{ "type": "time", "fieldName": "startTime", "label": "Start Time" }Przykład danych wynikowych (w formacie ISO-8601) dla daty i czasu
Start Date and Time: 1970-01-01T21:30:00.000ZOpcje
Tworzy rozwijaną listę z szeregiem opcji wyboru.
{ "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" }] }Przykładowe dane wynikowe
theme:"blue"Okno wyboru kolorów
Otwiera okno wyboru kolorów umożliwiające wybranie danej barwy z palety kolorów albo określenie wartości szesnastkowych, RGB lub HSV. Udostępnia również suwak przezroczystości i opcję braku koloru.
{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor", "transparency" : true, "noColor" : true }Przykładowe dane wynikowe
selectionColor:"#829254"Okno dialogowe Mapa internetowa
Wyświetla okno dialogowe służące do przeglądania lub wyszukiwania nowych map w celu wyświetlenia w aplikacji. Opcjonalnie podaj warunek, aby przetestować mapę. Jeśli podany warunek nie będzie spełniony, w panelu konfiguracji zostanie wyświetlony komunikat weryfikacji potwierdzający, że mapa nie spełnia wymagań. Prawidłowe ciągi znakowe warunków są następujące:
- time — mapa zawiera dane czasowe
- edit — aplikacja ma co najmniej jedną edytowalną warstwę
- featurelayer — mapa ma co najmniej jedną warstwę obiektową
- filter — mapa ma zdefiniowany filtr interaktywny
- 4x — mapa zawiera zasoby, które nie są jeszcze obsługiwane w wersji 4x oprogramowania ArcGIS API for JavaScript
{ “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] }Przykładowe dane wynikowe
webmap:"739ef0cf75de432995c77dd44ec8f652"Okno dialogowe sceny internetowej
Wyświetla okno dialogowe służące do przeglądania lub wyszukiwania nowych scen internetowych w celu wyświetlenia w aplikacji.
{ "type": "webscene" }Przykładowe dane wynikowe
webscene:"ab41c86a588748128e6f5d80990a2395"Okno dialogowe Grupa
Wyświetla okno dialogowe służące do przeglądania lub wyszukiwania nowych grup w celu wyświetlenia w aplikacji.
{ "type": "group" }Przykładowe dane wynikowe
group:"449d00a4478d4849bbb65612355d6cd1"Selektor wielu warstw i pól
Przedstawia widok drzewa warstw i pól w mapie, które są zgodne z obsługiwanymi typami i typami geometrii. Pozwala użytkownikom końcowym aplikacji na wybieranie wielu warstw i wielu pól dla każdej warstwy.
Notatka:
Jeśli właściwość editOnly jest skonfigurowana na wartość true (prawda), na liście pól będą znajdowały się tylko pola edytowalne.
{ "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" ] } }Przykładowe dane wynikowe
searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]Selektor warstw i pól
Wyświetla listę rozwijaną warstw na mapie z filtrem według wymienionych typów i geometrii. Opcjonalnie podaj co najmniej jeden selektor pól, aby umożliwić użytkownikom wybór warstwy i pól.
Notatka:
Jeśli właściwość editOnly jest skonfigurowana na wartość true (prawda), na liście pól będą znajdowały się tylko pola edytowalne.
{ "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" ] } }Przykładowe dane wynikowe
tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }Opcja jednokrotnego wyboru
Tworzy przycisk radiowy umożliwiający jednoczesny wybór tylko jednej opcji. Wybrana opcja zostanie ustawiona na wartość prawda (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 }] }Przykładowe dane wynikowe
customLayout:"fullmap"Mapy bazowe
Wyświetla listę rozwijaną wszystkich nazwanych map bazowych Esri.
{ “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }Przykładowe dane wynikowe
my_basemap:"satellite"Warunkowe
Wyświetla lub ukrywa zasoby w zależności od tego, czy warunek jest prawdziwy, czy też fałszywy. Jeśli na przykład pole wyboru Wyświetl listę warstw nie jest zaznaczone, lista warstw i wszystkie powiązane opcje (na przykład Uwzględnij warstwy podrzędne na liście warstw) są ukryte.
{ "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" } ] } }Wyszukiwanie
Konfiguruje panel wyszukiwania służący do znajdowania obiektów w obrębie pola warstwy obiektowej albo adresów przy użyciu lokalizatora. Jeśli zostanie skonfigurowane wyszukiwanie obiektów, użytkownicy będą mogli wybierać warstwę obiektową i pola wyszukiwania.
{ “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” }Przykładowe dane wynikowe
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 }Lista skal
Wyświetla listę wstępnie zdefiniowanych poziomów skal, spośród których użytkownik może dokonywać wyboru. Przykłady: Kraje, Województwa/Stany, Województwo/Stan, Powiaty, Powiat, Okręg administracyjny, Miasto, Miejscowość, Dzielnica.
{ “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” }Przykładowe dane wynikowe
“customUrlLayerZoomScale”: 12000ExtentMap
Tworzy selektor z opcjami centrum mapy i poziomów powiększenia.
{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }Przykładowe dane wynikowe
mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }
Powiązanie informacji o konfiguracji z elementem szablonu
Po utworzeniu pliku konfiguracyjnego należy powiązać informacje JSON o konfiguracji z szablonem konfiguracji, aby ustawić go jako konfigurowalny.
- Na stronie elementu szablonu aplikacji kliknij kartę Ustawienia, a następnie kliknij łącze Aplikacja map internetowych znajdujące się u góry.
- W polu Parametry konfiguracji wklej kod JSON z pliku konfiguracyjnego.
Notatka:
Pole Parametry konfiguracji wymaga poprawnego kodu JSON. Zaleca się, aby uruchamiać kod JSON za pośrednictwem modułu sprawdzania poprawności, jakim jest np. JSONLint, aby upewnić się, że kod JSON został prawidłowo napisany i nie zawiera błędów.
- Zapisz ustawienia.
Przykładowy plik konfiguracyjny
Poniżej znajduje się przykład kompletnego pliku konfiguracyjnego:
{
"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
}
}
Używanie szablonu w galerii instytucji
Aby użyć szablonu w galerii Configurable Apps swojej instytucji lub galerii aplikacji grupy, udostępnij ten element każdemu i w grupie używanej dla tej galerii. Wówczas administrator instytucji może skonfigurować mapę lub skonfigurować grupy, aby użyć danej grupy zawierającej Twój szablon.