Vue+Openlayer バッチ設定フラッシュポイント実装コード (ポストレンダリングメカニズムに基づく)

<テンプレート>
  <div id="map" style="幅: 100vw; 高さ: 100vh" />
</テンプレート>
<スクリプト>
"ol/ol.css"をインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/layer/Vector」から VectorLayer をインポートします。
「ol/source/Vector」から VectorSource をインポートします。
「ol/source/XYZ」からXYZをインポートします。
「ol」から { Map, View, Feature } をインポートします。
"ol/style" から { Style, Circle, Stroke } をインポートします。
"ol/geom" から { Point } をインポートします。
"ol/render" から { getVectorContext } をインポートします。
 
// 境界jsonデータエクスポートデフォルト{
  データ（） {
    戻る {
      マップ: {},
      座標: [
        { x: "106.918082", y: "31.441314" }, //重慶{ x: "86.36158200334317", y: "41.42448570787448" }, //新疆{ x: "89.71757707811526", y: "31.02619817424643" }, //チベット{ x: "116.31694544853109", y: "39.868508850821115" }, //北京{ x: "103.07940932026341", y: "30.438580338450862" }, //成都],
      速度: 0.3、
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
    this.addDynamicPoints(this.coordinates);
  },
  メソッド: {
    /**
     * マップを初期化する */
    initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しいXYZ({
              URL: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }）、
          }）、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [108.522097, 37.272848],
          ズーム: 4.7,
        }）、
      });
    },
    /**
     * フラッシュポイントをバッチで追加 */
    addDynamicPoints(座標) {
      // レイヤーを設定します。let pointLayer = new VectorLayer({ source: new VectorSource() });
      //レイヤーを追加します this.map.addLayer(pointLayer);
      // ループして機能を追加する
      pointFeature を [] とします。
      (i = 0 とします; i < 座標.長さ; i++) {
        // フィーチャを作成します。フィーチャはポイントの座標情報です。const feature = new Feature({
          ジオメトリ: 新しいポイント([座標[i].x, 座標[i].y]),
        });
        pointFeature.push(機能)
      }
      //レイヤーにフィーチャ コレクションを追加します pointLayer.getSource().addFeatures(pointFeature);
      // 重要なポイントは、ポストレンダリング イベントをリッスンし、その中で円のスタイルをリセットすることです。let radius = 0;
      pointLayer.on("postrender", (e) => {
        半径 >= 20 の場合、半径 = 0;
        let opacity = (20 - radius) * (1 / 20); // 不透明度 let pointStyle = new Style({
          イメージ: 新しい円({
            半径: 半径、
            ストローク: 新しいストローク({
              色: "rgba(255,0,0" + 不透明度 + ")",
              width: 3 - radius / 10, //幅を設定する}),
          }）、
        });
        // ベクトル特徴コンテキストを取得します。let vectorContext = getVectorContext(e);
        ベクトルコンテキストのスタイルを設定します。
        pointFeature.forEach((フィーチャ) => {
          ベクトルコンテキストでジオメトリを描画します。
        });
        radius = radius + this.speed; //点滅速度を調整する //マップのレンダリングを要求する（次のアニメーションフレームで）
        このマップをレンダリングします。
      });
    },
  },
};
</スクリプト>