操作手順: ArcGIS API for JavaScript を使用して、Web マップ内の PictureMarkerSymbol フィーチャに効果を適用する

サマリー

ArcGIS API for JavaScript で PictureMarkerSymbol クラスを使用すると、ピクチャファイルをポイントフィーチャまたはポリゴンフィーチャの代わりに使用できます。詳細については、「ArcGIS API for JavaScript: クラス: PictureMarkerSymbol」をご参照ください。

状況によっては、パルス効果など、選択すべき適切なフィーチャを強調するための効果をフィーチャに実装することができます。パルス効果には、指定した継続時間方式でフィーチャを点滅させて強調する働きがあります。これは、結果として、ユーザーが間違ったフィーチャをクリックするのを防ぎます。

手順

下記のコードスニペットは、ArcGIS API for JavaScript を使用して、Web マップ内の PictureMarkerSymbol フィーチャに効果を適用する方法を示しています。フィーチャに効果を適用するには、作成時に CSS ファイル内のスタイルを参照する「id」が、選択したレイヤーに指定されている必要があります。次の例は、レイヤーに id を追加する方法を示しています。

...
var gl = new GraphicsLayer ({id: "blink"});
...

これに従って、CSS ファイル内のスタイルがセクション内の求められている効果またはアニメーションに設定されます。次のコードスニペットは、パルス効果をフィーチャレイヤーに追加する例を示しています。


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

注意:
上記のコード スニペットは、blink という名前の id が参照されている新しいフィーチャを宣言している例です。 次に、求められるアニメーションの振舞いを記述する @keyframe プロパティの宣言によって CSS ファイルが変更されています。 #blink_layer は、'blink' id を使用して作成されたあらゆるフィーチャに対してアニメーションの再現を定義するために使用されています。

記事 ID: 000014734