Vue で Openlayer を使用して読み込みアニメーション効果を実現する

注意: スコープアニメーションは使用できません。！！！

GIF経由

<テンプレート>
  <div class="test">
    <div id="map" ref="map" style="幅: 100vw; 高さ: 100vh"></div>
  </div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map、View、Overlay } をインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/source/OSM」からOSMをインポートします。
 
エクスポートデフォルト{
  名前: "gif",
  データ（） {
    戻る {
      マップ: {},
      かぶせる： {}、
      マーカーポイント: {},
      geojsonデータ:
        タイプ: "FeatureCollection",
        特徴： [
          {
            タイプ: "機能",
            プロパティ:
              タイトル:「アラーム1」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム2」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム3」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [123.74363825288785, 44.363694825734726],
            },
          },
        ]、
      },
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
    これをGifに追加します。
  },
  メソッド: {
    // マップを初期化する initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          }）、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.912777, 34.730746],
          ズーム: 4.5,
        }）、
      });
    },
    // オーバーレイを使用してGIFの動的アイコンポイント情報を追加しますaddGif() {
      座標を this.getCoordinatesByGeojson(this.geojsonData); とします。
 
      for (const i in 座標) {
        gif_span = document.createElement("span"); とします。
 
        document.documentElement.appendChild(gif_span);
        this.$nextTick(() => {
          this.markerPoint = 新しいオーバーレイ({
            位置: 座標[i],
            要素: gif_span、
            配置:「中央-中央」、
          });
          this.map.addOverlay(this.markerPoint);
        });
      }
    },
    //geojsonデータに基づいて座標セットを取得します getCoordinatesByGeojson(geojsonData) {
      座標を [] とします。
      geojsonData.features.map((フィーチャ) => {
        座標 = [...座標、feature.geometry.coordinates];
      });
      座標を返します。
    },
  },
};
</スクリプト>
<スタイル lang='scss' >
。テスト {
  スパン {
    表示: インラインブロック;
    幅: 80ピクセル;
    高さ: 80px;
    境界線の半径: 50%;
    背景: url("https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/gif.gif")
      繰り返しなし;
    背景サイズ: 80px 80px;
  }
}
</スタイル>

キーフレームを通して @keyframes

<テンプレート>
  <div class="test">
    <div id="map" ref="map" style="幅: 100vw; 高さ: 100vh"></div>
  </div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map、View、Overlay } をインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/source/OSM」からOSMをインポートします。
 
エクスポートデフォルト{
  名前: "gif",
  データ（） {
    戻る {
      マップ: {},
      かぶせる： {}、
      ポイントオーバーレイ: {},
      geojsonデータ:
        タイプ: "FeatureCollection",
        特徴： [
          {
            タイプ: "機能",
            プロパティ:
              タイトル:「アラーム1」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム2」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム3」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [123.74363825288785, 44.363694825734726],
            },
          },
        ]、
      },
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
    これをGifに追加します。
  },
  メソッド: {
    // マップを初期化する initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          }）、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.912777, 34.730746],
          ズーム: 4.5,
        }）、
      });
    },
    // オーバーレイを使用してGIFの動的アイコンポイント情報を追加しますaddGif() {
      座標を this.getCoordinatesByGeojson(this.geojsonData); とします。
 
      for (const i in 座標) {
        point_div を document.createElement("div") とします。
        point_div.className = "css_animation";
        point_div.id = `coordinate_${i}`;
        document.documentElement.appendChild(point_div);
 
        this.$nextTick(() => {
          this.point_overlay = 新しいオーバーレイ({
            位置: 座標[i],
            要素: point_div、
            配置:「中央-中央」、
          });
          this.map.addOverlay(this.point_overlay);
        });
      }
    },
    //geojsonデータに基づいて座標セットを取得します getCoordinatesByGeojson(geojsonData) {
      座標を [] とします。
      geojsonData.features.map((フィーチャ) => {
        座標 = [...座標、feature.geometry.coordinates];
      });
      座標を返します。
    },
  },
};
</スクリプト>
<スタイル lang='scss' >
。テスト {
  .css_アニメーション {
    高さ: 50px;
    幅: 50px;
    境界線の半径: 50%;
    背景: rgba(255, 0, 0, 0.9);
    ボックスシャドウ: インセット 0 0 8px 赤;
    変換: スケール(0);
    アニメーション: myfirst 3s;
    animation-iteration-count: infinite; // 無限ループ}
  @keyframes myfirst {
    に {
      変換: スケール(2);
      背景: rgba(0, 0, 0, 0);
      ボックスシャドウ: インセット 0 0 50px rgba(255, 0, 0, 0);
    }
  }
}
</スタイル>

アニメーションを読み込み、アニメーションが配置されている特徴点の属性を取得できます。

注意: このコードには問題があります。現在、クリックするとプロパティを取得したりアニメーションを表示したりすることはできますが、同時にはできません。これを最適化する必要があります。

<テンプレート>
  <div class="test">
    <div id="map" ref="map" style="幅: 100vw; 高さ: 100vh"></div>
    <div
      id="ポップアップ"
      スタイル="
        位置: 絶対;
        背景色: rgba(47, 57, 90, 0.678);
        下: 20px;
        左: 30px;
        境界線: 1px 白の実線;
        パディング: 10px;
        幅: 60ピクセル;
      「
    >
      {{プロパティ.title}}
    </div>
  </div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map、View、Overlay } をインポートします。
"ol/source" から { OSM、Vector を VectorSource としてインポートします。
「ol/layer」から { Vector を VectorLayer として、 Tile を TileLayer として } をインポートします。
「ol/format/GeoJSON」からGeoJSONをインポートします。
 
「ol/interaction/Select」からSelectをインポートします。
"ol/events/condition" から { altKeyOnly、click、pointerMove } をインポートします。
「ol/style」から {Fill、Stroke、Style、Circle } をインポートします。
 
エクスポートデフォルト{
  名前: "gif",
  データ（） {
    戻る {
      マップ: {},
      レイヤー: {},
 
      かぶせる： {}、
      ポイントオーバーレイ: {},
      geojsonデータ:
        タイプ: "FeatureCollection",
        特徴： [
          {
            タイプ: "機能",
            プロパティ:
              タイトル:「アラーム1」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム2」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム3」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [123.74363825288785, 44.363694825734726],
            },
          },
        ]、
      },
 
      選択: {},
      プロパティ:
        タイトル： ""、
      },
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
    // this.addGif(); //コメントアウトした後、クリックしてフィーチャ属性を取得します},
  メソッド: {
    // マップを初期化する initMap() {
      this.layer = 新しいVectorLayer({
        ソース: 新しい VectorSource({
          機能: 新しい GeoJSON().readFeatures(this.geojsonData)、
        }）、
      });
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          }）、
          このレイヤー、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.912777, 34.730746],
          ズーム: 4.5,
        }）、
      });
 
      this.select = 新しいSelect({
        条件: click, //クリックして選択});
      this.map.addInteraction(this.select);
 
      overlayer_popup = new Overlay({
        要素: document.getElementById("popup"),
        配置: "center-center", // 必ず追加してください。追加しないとオフセットが発生します});
 
      this.select.on("選択", (e) => {
        let coordinate = e.mapBrowserEvent.coordinate; //選択された座標を取得します。let featureSelect = e.selected[0]; //選択されたフィーチャー if (e.selected.length !== 0) {
          overlayer_popup.setPosition(座標);
          this.map.addOverlay(overlayer_popup);
        } それ以外 {
          overlayer_popup.setPosition("");
        }
 
        if (featureSelect) {
          this.properties = featureSelect.getProperties(); //現在のフィーチャのすべてのプロパティを取得します //選択したスタイルを設定します featureSelect.setStyle(
            新しいスタイル({
              イメージ: 新しい円({
                半径: 10,
                塗りつぶし: 新しい塗りつぶし({
                  //ベクター レイヤーの塗りつぶし色と透明色: "rgba(255,0,0,0.5)",
                }）、
                ストローク: 新しいストローク({
                  //境界線スタイルの色: "rgba(100, 90, 209, 0.6)",
                  幅: 3,
                }）、
              }）、
            })
          );
        }
      });
 
      // ベクター要素上のマウスのスタイルを設定します this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "ポインター" : "";
      });
    },
    // オーバーレイを使用してGIFの動的アイコンポイント情報を追加しますaddGif() {
      座標を this.getCoordinatesByGeojson(this.geojsonData); とします。
 
      for (const i in 座標) {
        point_div を document.createElement("div") とします。
        point_div.className = "css_animation";
        point_div.id = `coordinate_${i}`;
        document.documentElement.appendChild(point_div);
 
        this.$nextTick(() => {
          this.point_overlay = 新しいオーバーレイ({
            位置: 座標[i],
            要素: point_div、
            配置:「中央-中央」、
          });
          this.map.addOverlay(this.point_overlay);
        });
      }
    },
    //geojsonデータに基づいて座標セットを取得します getCoordinatesByGeojson(geojsonData) {
      座標を [] とします。
      geojsonData.features.map((フィーチャ) => {
        座標 = [...座標、feature.geometry.coordinates];
      });
      座標を返します。
    },
  },
};
</スクリプト>
<style lang='scss' スコープ>
。テスト {
}
</スタイル>
<スタイル lang='scss' >
。テスト {
  .css_アニメーション {
    高さ: 50px;
    幅: 50px;
    境界線の半径: 50%;
    背景: rgba(255, 0, 0, 0.9);
    ボックスシャドウ: インセット 0 0 8px 赤;
    変換: スケール(0);
    アニメーション: myfirst 3s;
    animation-iteration-count: infinite; // 無限ループ}
  @keyframes myfirst {
    に {
      変換: スケール(2);
      背景: rgba(0, 0, 0, 0);
      ボックスシャドウ: インセット 0 0 50px rgba(255, 0, 0, 0);
    }
  }
}
</スタイル>

Vue+Openlayer の読み込みアニメーションに関するこの記事はこれで終わりです。Vue Openlayer の読み込みアニメーションに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: