Webkarten

Anwendungsvorlagen sind so konzipiert, dass sie mit der aktuell angezeigten Karte in Map Viewer Classic verwendet werden können. Vorlagen erstellen eine Karte in der Regel auf Basis der Webkarte, die im URL-Parameter der Webkarte angegeben ist. Jede Web API verfügt über eine Hilfsmethode zur Erstellung einer Karte anhand von Informationen aus der Webkarten-ID.

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});

Group

Gruppenvorlagen zeigen Inhalte aus den festgelegten Gruppen in einer App an.

ArcGIS REST API bietet Zugriff auf Inhalte aus Ihrem Portal. Sie können sie zum Abrufen von Gruppeninhalten auf Grundlage der Eingabegruppen-ID verwenden.

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

Nachdem Sie die Gruppe gefunden haben, können Sie die Gruppe abfragen, um Elemente abzurufen.

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

Zusätzliche Überlegungen

Web-Apps sind in der Regel so konzipiert, dass sie mit vielen Inhaltstypen funktionieren. Sie müssen die Vorlage möglicherweise für die Verarbeitung von Karten mit Bing Maps-Grundkarten, nicht öffentlichen Inhalten usw. einrichten. Spezifische Überlegungen sind unten aufgeführt.

Hinzufügen der Vorlage als App-Element

Fügen Sie Ihre Vorlage Ihrem Portal als Web-App-Element hinzu, und geben Sie die URL zur App an. Als Zweck wählen Sie Konfigurierbar. Als API wählen Sie JavaScript.

Nachdem Sie Ihre Vorlage hinzugefügt haben, wird das Vorlagenelement unter Ihren Inhalten angezeigt und Sie können die Details bearbeiten. Fügen Sie einen beschreibenden Titel und eine Zusammenfassung hinzu, da diese Informationen angezeigt werden, wenn Benutzer dieses Element in der konfigurierbaren App-Galerie anzeigen. Sie haben auch die Möglichkeit, eine .zip-Datei zu erstellen, die Ihre Anwendungsdateien enthält, und diese an das Element anzuhängen, damit sie heruntergeladen werden kann.

Registrieren der App-Vorlage

Nachdem Sie Ihre App-Vorlage als Element hinzugefügt haben, müssen Sie die App registrieren. Sie können ihre selbst entwickelten OAuth 2.0-basierten Apps registrieren. Durch die Registrierung der App beim Portal erhalten Sie eine App-ID. Die App-ID bildet die Grundlage für das Verteilen von Apps und das Abrufen von Nutzungsberichten.

Stellen Sie beim Registrieren Ihrer Web-App-Vorlage den Typ auf Browser so ein, dass die Umleitungs-URI auf die URL der Vorlagen-App verweist.

Nutzen Sie den Identity Manager, damit dieser die registrierte App-ID erkennt. Weitere Informationen können Sie den in ArcGIS API for JavaScript enthaltenen OAuth-Beispielen OAuth Basic und OAuth Popup entnehmen.

Erstellen einer Konfigurationsdatei

Die App-Konfigurationsdatei ist eine JSON-Datei, mit der die Konfigurationsoptionen für die App-Vorlage definiert werden. Zeigen Sie ein vollständiges Beispiel einer Konfigurationsdatei an.

Gehen Sie wie folgt vor, um eine Konfigurationsdatei zu erstellen:

1. Erstellen Sie mindestens einen Abschnitt, indem Sie eine Kategorie und eine Reihe von Feldern festlegen.

   {
       "configurationSettings": [
           {
               "category": "",
               "fields": []
           }
       ]
   }

2. Legen Sie die Konfigurationsoptionen anhand der in der folgenden Tabelle aufgelisteten Feldtypen fest. Stellen Sie beim Erstellen der Konfigurationsdatei sicher, dass die fieldName-Eigenschaft innerhalb der Konfigurationseinstellungen eindeutig ist.

   Feldtyp	Beschreibung
   Paragraph	Zeigt einen erläuternden Text im Dialogfeld "Konfiguration" an. { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
   Zeichenfolge	Akzeptiert Texteingabe. Beinhaltet die Eigenschaft stringFieldOption, die den Typ des auf dem Bildschirm angezeigten Textfeldes festlegt. Die Werte lauten textbox, textarea und richtext. Die Option textbox ist der Standardwert und ein einzeiliges Textfeld. Die Option textarea zeigt ein größeres Textfeld für die Eingabe von Daten an. Die Option richtext zeigt einen Richtext-Editor an, der Benutzern die Anwendung einiger Formatierungsoptionen ermöglicht, z. B. Fett- oder Kursivformatierung des Textes. { "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" } Ausgabebeispiel description:"Bike Accidents"
   Boolesch	Erstellt ein Kontrollkästchen zum Festlegen von true- oder false-Werten. Mit condition können Sie feststellen, ob die Karte die angegebene Funktionalität enthält. Wenn die Karte die Bedingung nicht erfüllt, werden das Kontrollkästchen und die Beschriftung im Konfigurationsfenster nicht angezeigt. { "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" } Ausgabebeispiel tool_bookmarks:false
   Zahl	Erstellt ein Feld, das numerische Werte akzeptiert. Wenn das Feld nur einen bestimmten Wertebereich akzeptiert, können Sie mithilfe der Einstellung constraints die Eingabe auf einen bestimmten Wertebereich beschränken oder die Eingabewerte formatieren. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} } Ausgabebeispiel range:0.5
   Datum und Uhrzeit	Erstellt eine Datumsauswahl mit verschiedenen Datumsangaben. { "type":"date", "fieldName" : "startDate", "label" : "Start Date" } Erstellt eine Zeitauswahl mit verschiedenen Uhrzeitangaben. { "type": "time", "fieldName": "startTime", "label": "Start Time" } Ausgabebeispiel (im ISO-8601-Format) für Datum und Uhrzeit Start Date and Time: 1970-01-01T21:30:00.000Z
   Optionen	Erstellt eine Dropdown-Liste mit einer Reihe von Optionen. { "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" }] } Ausgabebeispiel theme:"blue"
   Farbauswahl	Zeigt eine Farbauswahl zum Auswählen einer Farbe aus einer Palette oder zum Festlegen von HEX-, RGB- oder HSV-Werten an. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" } Ausgabebeispiel selectionColor:"#829254"
   Dialogfeld "Webkarte"	Zeigt ein Dialogfeld an, um nach einer neuen Karte zu suchen, die in der App angezeigt werden soll. Geben Sie optional eine Bedingung zum Testen der Karte an. Wenn die angegebene Bedingung nicht erfüllt wird, wird eine Validierungsmeldung im Konfigurationsfenster angezeigt, die bestätigt, dass die Karte die Anforderungen nicht erfüllt. Es gibt folgende gültige Zeichenfolgen für Bedingungen: time: Die Karte hat aktivierte Zeiteigenschaften. edit: Die App weist mindestens einen editierbaren Layer auf. featurelayer: Die Karte weist mindestens einen Feature-Layer auf. filter: Für die Karte ist ein interaktiver Filter definiert. 4x: Die Karte enthält Inhalte, die in Version 4.x von ArcGIS API for JavaScript noch nicht unterstützt werden. { “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] } Ausgabebeispiel webmap:"739ef0cf75de432995c77dd44ec8f652"
   Dialogfeld "Webszene"	Zeigt ein Dialogfeld an, um nach einer neuen Webszene zu suchen, die in der App angezeigt werden soll. { "type": "webscene" } Ausgabebeispiel webscene:"ab41c86a588748128e6f5d80990a2395"
   Dialogfeld "Gruppe"	Zeigt ein Dialogfeld an, um nach einer neuen Gruppe zu suchen, die in der App angezeigt werden soll. { "type": "group" } Ausgabebeispiel group:"449d00a4478d4849bbb65612355d6cd1"
   Auswahl mehrerer Layer und Felder	Stellt eine Strukturansicht der Layer und Felder in der Karte dar, die mit den unterstützten Typen und Geometrietypen übereinstimmen. Ermöglicht Endbenutzern von Apps die Auswahl mehrerer Layer und mehrerer Felder für jeden Layer. Hinweis: Wenn für editOnly der Wert true festgelegt ist, enthält die Feldliste nur editierbare Felder. { "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" ] } } Ausgabebeispiel searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]
   Layer- und Feldauswahl	Zeigt eine Dropdown-Liste mit Layern in der Karte an, die nach den aufgelisteten Typen und Geometrien gefiltert ist. Geben Sie optional mindestens eine Feldauswahl an, um Benutzern die Auswahl eines Layers und von Feldern zu ermöglichen. Hinweis: Wenn für editOnly der Wert true festgelegt ist, enthält die Feldliste nur editierbare Felder. { "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" ] } } Ausgabebeispiel tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }
   Radio	Erstellt eine Optionsschaltfläche, mit der immer nur eine Option ausgewählt werden kann. Die ausgewählte Option wird auf "True" gesetzt. { "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 }] } Ausgabebeispiel customLayout:"fullmap"
   Grundkarten	Zeigt eine Dropdown-Liste aller benannten Esri Grundkarten an. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” } Ausgabebeispiel my_basemap:"satellite"
   Bedingungsfunktionen	Zeigt Inhalte basierend auf einer TRUE- oder FALSE-Bedingung an bzw. blendet sie aus. Wenn das Kontrollkästchen Layer-Liste anzeigen beispielsweise deaktiviert ist, werden die Layer-Liste und alle zugehörigen Optionen (z. B. Sublayer in Layer-Liste einbeziehen) ausgeblendet. { "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" } ] } }
   Suchen	Konfiguriert einen Suchbereich für die Suche von Features im Feld eines Feature-Layers oder von Adressen mit einem Locator. Wenn Sie eine Feature-Suche konfigurieren, können Benutzer den Feature-Layer und Suchfelder auswählen. { “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” } Ausgabebeispiel 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	Zeigt eine Liste der vordefinierten Maßstabsebenen, aus dem Benutzer zur Auswahl stehen. Beispielsweise Länder, Bundesstaaten, Bundesstaat, Landkreise, Landkreis, Metro, Großstadt, Kleinstadt, Stadtviertel. { “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” } Ausgabebeispiel “customUrlLayerZoomScale”: 12000
   ExtentMap	Erstellt eine Auswahl mit Optionen für die Kartenzentrierung und für Zoomstufen. { "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" } Ausgabebeispiel mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }

Verknüpfen der Konfigurationsinformationen mit dem Vorlagenelement

Nachdem Sie die Konfigurationsdatei erstellt haben, müssen Sie die JSON-Konfigurationsinformationen mit Ihrer App-Vorlage verknüpfen, damit sie konfiguriert werden kann.

1. Klicken Sie auf der Elementseite Ihrer App-Vorlage auf die Registerkarte Einstellungen und dann oben auf den Link Web Mapping-Anwendung.
2. Fügen Sie im Feld Konfigurationsparameter den JSON-Code aus der Konfigurationsdatei ein.

   Hinweis:

   Für das Feld Konfigurationsparameter ist ein gültiges JSON erforderlich. Sie sollten Ihr JSON mithilfe eines Validators wie JSONLint prüfen, um sicherzustellen, dass Sie über ein wohlgeformtes, fehlerfreies JSON verfügen.

3. Speichern Sie Ihre Einstellungen.

Beispiel für eine Konfigurationsdatei

Nachfolgend finden Sie ein Beispiel für eine vollständige Konfigurationsdatei:

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