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

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

1つ以上の機能をロードする

<テンプレート>
  <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,
        })、
      });
    },
  },
};
</スクリプト>

Vue+Openlayer が geojson を動的にロードする方法についての記事はこれで終わりです。Vue Openlayer が geojson をロードする関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で JsonView を使用して Json ツリーを表示するサンプルコード
  • Vue でのクロスドメイン リクエスト インターフェース操作に jsonp を使用する
  • Vue3.0 の json 読み込み方法 (非 ajax)
  • VueでJSONを使用してインターフェースを更新してもカウントダウンには影響しません
  • vue で jsonp プラグインを使用する例
  • JSONを使用してVueを共有する最も簡単な方法2つ

<<:  MySQL テーブルにおける非主キー列オーバーフロー監視の詳細な説明

>>:  DockerでJavaプログラムを起動する方法

推薦する

フロントエンドJavaScriptは関数のカリー化を完全に理解している

目次1. カレーとは何か2. カレーの用途3. カリー化ユーティリティ関数をカプセル化する方法 1....

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

シンプルなショッピングフォームを実装するJavaScript

この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...

JS のディープコピーとシャローコピーの詳細

目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...

Dockerでイメージをプルするための手順を完了する

1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

MySQLテーブルをコピーする方法

目次1.mysqlダンプ実行プロセス:特徴2. CSVファイルをエクスポートする(最も柔軟性が高い)...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

Vuex はシンプルなショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...

MySQLデータベースの基本構文と操作

MySQLデータベースの基本構文DDL操作データベース作成構文: create database デ...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

MySQL トランザクションの概念と使用法の詳細な説明

目次情事の概念取引の状態取引の役割取引の特徴トランザクション構文トランザクション対応ストレージエンジ...