HOW TO

Anwenden von Effekten auf ein PictureMarkerSymbol-Feature in einer Webkarte in ArcGIS API for JavaScript

Last Published: April 25, 2020

Zusammenfassung

Durch Verwendung der Klasse PictureMarkerSymbol können Bilddateien als Ersatz für Punkt- oder Polygon-Features in ArcGIS API for JavaScript verwendet werden. Weitere Informationen finden Sie in der Dokumentation ArcGIS API for JavaScript: Klasse: PictureMarkerSymbol.

In bestimmten Fällen können Effekte im Feature implementiert werden, um die gewünschten Features, die ausgewählt werden sollen, hervorzuheben, zum Beispiel den Impuls-Effekt. Beim Impuls-Effekt blinken die Features in einem bestimmten zeitlichen Muster, um sie hervorzuheben. Dies kann wiederum kann den Benutzern helfen, das richtige Feature anzuklicken.

Vorgehensweise

Die folgenden Codeausschnitte veranschaulichen, wie Effekte auf ein PictureMarkerSymbol-Feature in einer Webkarte in ArcGIS API for JavaScript angewendet werden. Damit Effekte auf ein Feature angewendet werden können, muss der ausgewählte Layer bei der Erstellung eine 'id' als Referenz auf die Styles in der CSS-Datei erhalten. Das folgende Beispiel zeigt, wie eine id zum Layer hinzugefügt wird.
...
var gl = new GraphicsLayer ({id: "blink"});
...
Die Styles werden dann in der CSS-Datei entsprechend den gewünschten Effekten oder Animationen im Abschnitt festgelegt. Der folgende Codeausschnitt ist ein Beispiel für das Hinzufügen eines Impuls-Effektes zu einem Feature-Layer.

      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      @-webkit-keyframes
       pulse
      {
0 %
        {
          opacity: 1.0;

        }
45%
        {
          opacity: .20;

        }
100%
        {
          opacity: 1.0;

        }
      }
      #blink_layer { 
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: pulse;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-name: pulse;
      }
    
Hinweis:
Der obige Codeausschnitt ist ein Beispiel für das Deklarieren eines neuen Features mit derid-Referenz 'blink'. Danach wird die CSS-Datei modifiziert, indem mit @keyframe die Schlüsselbildeigenschaften zum Beschreiben des Verhaltens der gewünschten Animation deklariert werden. Mit #blink_layer wird für alle Features, die mit der id 'blink' erstellt wurden, die Wiederholung der Animation definiert.

Artikel-ID:000014734

Hilfe von ArcGIS-Expert*innen erhalten

Technischen Support kontaktieren

Die Esri Support-App herunterladen

Zu den Download-Optionen

Zugehörige Informationen

Weitere Informationen zu diesem Thema erkunden