Vue+Openlayer をベースに geojson を動的に読み込む方法

<テンプレート>
  <div id="map" style="幅: 100vw; 高さ: 100vh"></div>
</テンプレート>
<スクリプト>
"ol/ol.css"をインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/layer/Vector」から VectorLayer をインポートします。
「ol/source/Vector」から VectorSource をインポートします。
「ol/source/XYZ」からXYZをインポートします。
"ol" から { Map, View, Feature, ol } をインポートします。
"ol/style" から { Style、Stroke、Fill } をインポートします。
"ol/geom" から {Polygon、MultiPolygon } をインポートします。
 
「@/assets/chengdu.json」から areaGeo をインポートします。
 
エクスポートデフォルト{
  データ（） {
    戻る {
      マップ: {},
      エリアレイヤー: {},
    };
  },
  マウント() {
    this.initMap(); //マップを初期化するメソッド this.addArea(areaGeo); //エリア レイヤーを追加するメソッド this.pointMove();
    クリックするとフィーチャーが取得されます。
  },
  メソッド: {
    ポイント移動() {
      // ベクター要素上のマウスのスタイルを設定します this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "ポインター" : "";
      });
    },
    クリックによるフィーチャ取得() {
      this.map.on("クリック", (e) => {
        フィーチャを this.map.getFeaturesAtPixel(e.pixel); に設定します。
        this.map.getView().fit(features[0].getGeometry(), {
          期間: 1500、
          パディング: [100, 100, 100, 100],
        });
      });
    },
    /**
     * エリアを設定 */
    エリアを追加します(geo = {}) {
      Object.keys(geo).length == 0 && geo.features.length == 0 の場合、戻り値は次のようになります。
 
      // レイヤーを設定する this.areaLayer = new VectorLayer({
        ソース: 新しい VectorSource({
          特徴： []、
        }）、
      });
      //レイヤーを追加します this.map.addLayer(this.areaLayer);
 
      features = geo.features; とします。
 
      for (let i in 機能) {
        areaFeature を {} とします。
 
        if (features[i].geometry.type == "MultiPolygon") {
          エリアフィーチャ = 新しいフィーチャ({
            ジオメトリ: 新しい MultiPolygon(features[i].geometry.coordinates)、
          });
        } そうでない場合 (features[i].geometry.type == "Polygon") {
          エリアフィーチャ = 新しいフィーチャ({
            ジオメトリ: 新しいポリゴン(features[i].geometry.coordinates)、
          });
        }
        エリアフィーチャー.setStyle()
          新しいスタイル({
            塗りつぶし: 新しい塗りつぶし({ 色: "#4e98f444" }),
            ストローク: 新しいストローク({
              幅: 3,
              色: [71, 137, 227, 1],
            }）、
          })
        );
        エリアフィーチャーにプロパティを設定します。
        this.areaLayer.getSource().addFeature(areaFeature);
      }
    },
    /**
     * マップを初期化する */
    initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しいXYZ({
              URL: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }）、
          }）、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中央: [103, 31],
          ズーム: 7,
        }）、
      });
    },
  },
};
</スクリプト>