Skip To Content

Tworzenie konfigurowalnych szablonów aplikacji

Jeśli dysponujesz uprawnieniami do tworzenia zasobów, możesz utworzyć własny niestandardowy szablon aplikacji. Gdy niestandardowy szablon aplikacji został utworzony i skonfigurowany, spraw, aby Twoja aplikacja była wykrywalna na platformie ArcGIS, dodając szablon do portalu. Następnie pojawia się opcja sprawienia, aby aplikacja była konfigurowalna, dzięki czemu użytkownicy mogą 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 z własnego portalu lub utworzyć nową aplikację internetową za pomocą wybranego interfejsu ArcGIS Web API.

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.

Portal ArcGIS Enterprise zawiera interfejsy ArcGIS API 3.30 for JavaScript w wersji 10.8 i ArcGIS API 3.32 for JavaScript w wersji 10.8.1. Nie jest konieczne hostowanie własnego interfejsu API i przekierowywanie portalu na wersję lokalną dla nowo utworzonych szablonów aplikacji; szablony aplikacji internetowych automatycznie odwołują się do zainstalowanych interfejsów API. Lokalnie zainstalowany interfejs API zazwyczaj jest dostępny pod adresem https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi.

Uwaga:

Nie należy modyfikować plików szablonu aplikacji internetowej dostępnych w portalu ArcGIS Enterprise, ponieważ pliki te są zarządzane przez portal i jakiekolwiek wprowadzone zmiany mogą być następnie zastąpione przez portal. Jeśli chcesz dostosować szablony, postępuj zgodnie z poniższymi wskazówkami:

  1. Utwórz kopię istniejącego pliku szablonu, który chcesz dostosować.
  2. Umieść kopię w innej lokalizacji na dysku.
  3. Dostosuj kopię szablonu.
  4. Dodaj ją do portalu jako nowy szablon.

Mapy internetowe

Szablony aplikacji służą do pracy z mapą aktualnie wyświetlaną w przeglądarce Map Viewer. 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.

Na przykład można użyć metody ArcGIS API for JavaScript 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.

Grupuj

W szablonach grupy wyświetlane są zasoby określonej grupy w aplikacji.

Interfejs ArcGIS REST API zapewnia dostęp do zasobów portalu. Można go używać do pobierania zasobów grupy na podstawie jej identyfikatora wejściowego.

W tym przykładzie wykonujesz wyszukiwanie w celu znalezienia grupy z identyfikatorem wejściowym.

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];
     });
});

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

Jeśli aplikacja będzie wysyłać żądania międzydomenowe, należy włączyć udostępnianie CORS lub dodać serwer proxy do aplikacji.

Dodawanie szablonu do portalu

Po utworzeniu szablonu aplikacji internetowej, spraw, aby aplikacja była wykrywalna na platformie ArcGIS, dodając szablon do portalu.

Dodawanie szablonu jako elementu aplikacji

Dodaj szablon do portalu jako element aplikacji internetowej i określ adres URL do tej 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ę. Użytkownik może zarejestrować się, używając aplikacji własnego autorstwa opartych na platformie OAuth 2.0. Rejestracja aplikacji na portalu zapewnia użytkownikowi identyfikator aplikacji. Identyfikator aplikacji jest podstawowym elementem do dystrybuowania aplikacji i otrzymywania raportów wykorzystania.

Przy rejestrowaniu szablonu aplikacji internetowej ustaw typ na Przeglądarka z adresem Identyfikator przekierowania URI wskazującym adres URL szablonu aplikacji.

Praca z menedżerem tożsamości pozwala na rozpoznawanie zarejestrowanego identyfikatora aplikacji. Więcej informacji zawierają zawarte w interfejsie ArcGIS API for JavaScript przykłady OAuth Basic i OAuth Popup.

Ustawienie aplikacji jako konfigurowalnej

Aby zezwolić użytkownikom na dostosowywanie wyglądu i zachowania Twojej niestandardowej 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. Zapoznaj się z pełnym przykładem pliku konfiguracyjnego.

Notatka:

Dobrą praktyką jest uruchamianie kodu 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:

  1. Utwórz jedną lub większą liczbę sekcji, określając kategorię i zestaw pól dla każdej sekcji.
    {
        "configurationSettings": [        {
                "category": "",            "fields": []        }
        ]
    }
  2. Określ opcje konfiguracji za pomocą typów pola wyszczególnionych w tabeli poniżej. Podczas tworzenia pliku konfiguracyjnego i upewnij się, że właściwość fieldName jest unikatowa w obrębie ustawienia konfiguracji.

    Typ polaOpis

    Akapit

    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 reprezentuje większe pole tekstowe do wprowadzania danych. Opcja richtext reprezentuje 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 określoną 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:false

    Liczba

    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.

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

    Przykładowe dane wynikowe

    range:0.5

    Data 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.000Z

    Opcje

    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.

    {
       "type": "color",    "label": "Choose a selection color",
       "fieldName": "selectionColor"
       
     }

    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 na potrzeby przetestowania mapy. 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"
                       }
                   ]
                }
    }

    Wyszukaj

    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 World 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”: 12000

    ExtentMap

    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.

  1. Na stronie elementu szablonu aplikacji kliknij kartę Ustawienia, a następnie kliknij łącze Aplikacja map internetowych znajdujące się u góry.
  2. W polu Parametry konfiguracji wklej kod JSON z pliku konfiguracyjnego.
    Notatka:

    Pole Parametry konfiguracji wymaga poprawnego kodu JSON. Dobrą praktyką jest uruchamianie kodu 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.

  3. 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

Jeśli chcesz użyć szablonu w galerii aplikacji przeglądarki Map Viewer 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.