方法

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

Last Published: April 25, 2020

サマリー

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

ArcGIS の専門家からヘルプを受ける

テクニカル サポートへのお問い合わせ

Esri Support アプリのダウンロード

ダウンロード オプションに移動

関連情報

このトピックについてさらに調べる