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プログラムを起動する方法

推薦する

文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...

Vue プロジェクトで mock.js を使用するための完全な手順

Vue プロジェクトで mock.js を使用する開発ツールの選択: Vscode 1. コマンドラ...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

バインドを使用してDNSサーバーを設定する方法

DNS(ドメインネームサーバー)は、ドメイン名とそれに対応する IP アドレスを変換するサーバーです...

get メソッドによる HTML フォームの値転送の例

google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...

MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル

mysql5.7.17のインストールチュートリアルを参考までに共有します。具体的な内容は次のとおりで...

Linuxで相対パスを表現する方法

たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...

Centos7 環境でソースコードから mysql5.7.16 をインストールする方法の詳細な説明

この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...

Dockerfile をベースに Zabbix 監視システムのコード例を作成する

forループを使用してZabbixイメージをコンテナにインポートします。 n を `ls *.tar...

ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします(Webkit)

コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...

MySQL イベント スケジューラに関するよくある話 (必読)

概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...