Vue + OpenLayers クイックスタートチュートリアル

Vue + OpenLayers クイックスタートチュートリアル

Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な JavaScript パッケージです。マップや空間データの表示や操作に使用され、柔軟な拡張メカニズムを備えています。

つまり、Openlayers(以下、ol)を使うことで、さまざまな地図や空間データを柔軟かつ自由に表示できるようになります。そして、このフレームワークは完全に無料のオープンソースです。

序文

この記事では、Vue で OpenLayers を使用する方法の概要を記録し、OpenLayers を使用してマップ コンポーネントを作成し、OpenLayers によって提供されるマップとローカル イメージをマップとして使用します。

概要
OpenLayers を使用すると、あらゆる Web ページに動的なマップを簡単に配置できます。あらゆるソースから読み込んだマップ タイル、ベクター データ、マーカーを表示できます。OpenLayers は、あらゆる種類の地理情報の利用を促進するために開発されました。完全に無料のオープン ソース JavaScript で、2 条項 BSD ライセンス (FreeBSD とも呼ばれます) に基づいてリリースされています。

公式アドレス: https://openlayers.org/

1. OpenLayersライブラリをインストールする

cnpm インストール ol

2. VueでOpenLayersコンポーネントを作成する

レンダリング

ここに画像の説明を挿入

コード

	<テンプレート>
	  <div id="map" class="map"></div>
	</テンプレート>
	
	<スクリプト>
	"ol/ol.css"をインポートします。
	「ol/Map」からマップをインポートします。
	「ol/source/OSM」からOSMをインポートします。
	"ol/layer/Tile" から TileLayer をインポートします。
	「ol/View」からViewをインポートします。
	
	エクスポートデフォルト{
	  マウント() {
	    このメソッドは、次のとおりです。
	  },
	  メソッド: {
	    initMap() {
	      新しいマップ({
	        レイヤー:
	          新しいタイルレイヤー({
	            ソース: 新しい OSM()
	          })
	        ]、
	        ターゲット: "マップ"、
	        ビュー: 新しいビュー({
	          中心: [0, 0],
	          ズーム: 2
	        })
	      });
	
	      console.log("初期化が完了しました");
	    }
	  }
	};
	</スクリプト>
	<スタイル>
	.map {
	  幅: 100%;
	  高さ: 400px;
	}
	</スタイル>

3. OpenLayersはローカル画像を地図として使用します

効果画像:

コード

	<テンプレート>
	  <div>
	    <div id="map" class="map"></div>
	  </div>
	</テンプレート>
	
	<スクリプト>
	"ol/ol.css"をインポートします。
	「ol/layer/Image」から ImageLayer をインポートします。
	「ol/Map」からマップをインポートします。
	「ol/proj/Projection」から Projection をインポートします。
	「ol/source/ImageStatic」からStaticをインポートします。
	「ol/View」からViewをインポートします。
	"ol/extent" から { getCenter } をインポートします。
	
	範囲を[0, 0, 338, 600]とします。
	投影を新しい投影にします({
	  コード: "xkcd-image",
	  単位:「ピクセル」、
	  程度: 程度
	});
	
	エクスポートデフォルト{
	  データ() {
	    戻る {
	      マップ: {}
	    };
	  },
	
	  マウント() {
	    このメソッドは、次のとおりです。
	  },
	
	  メソッド: {
	    initMap() {
	      this.map = 新しいマップ({
	        レイヤー:
	          新しいイメージレイヤー({
	            ソース: 新しい静的({
	              帰属: '© <a href="http://xkcd.com/license.html" rel="external nofollow" >xkcd</a>',
	              URL: "http://localhost:8080/img/123.5cba​​1af6.jpg",
	              投影: 投影、
	              画像範囲: 範囲
	            })
	          })
	        ]、
	        ターゲット: "マップ"、
	        ビュー: 新しいビュー({
	          投影: 投影、
	          中心: getCenter(範囲),
	          ズーム: 1,
	          最大ズーム: 4,
	          最小ズーム: 1
	        })
	      });
	    }
	  }
	};
	</スクリプト>
	<スタイル>
	.map {
	  幅: 100%;
	  高さ: 400px;
	}
	</スタイル>

Vue + OpenLayers クイックスタート学習チュートリアルに関するこの記事はこれで終わりです。Vue OpenLayers 入門コンテンツをさらにご覧になりたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはOpenLayersを使用してTiandi MapとAmapを読み込み
  • Vue+Openlayersでリアルタイム座標点表示を実現
  • Vue+openlayers は州や市の境界線を描画します
  • VueはTiandi Mapとopenlayersを使用して複数のベースマップのオーバーレイ表示を実現します。

<<:  Linux lnコマンドの使用

>>:  MySQL データベースのアップグレードにおけるいくつかの「落とし穴」

推薦する

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

HTMLにスクリプトを追加する2つの方法と注意点

HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...

JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ

目次概要1. DOM要素をアニメーション化する方法2. 現在のブラウザでサポートされている変換互換の...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

Alibaba Cloud ECS サーバーの開始プロセス (初心者必読のチュートリアル)

1. Alibaba Cloudは、個人のニーズに応じて適切なクラウドサーバーを選択し、CPU、メ...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

記事マインドマップマスター/スレーブ レプリケーションと読み取り/書き込み分離を使用する理由は何です...

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法 背景: linear-gradient(direction,color-stop1,color...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

Windows で MySQL データベースを別のディスクに移動する

序文今日、MySQL をインストールしたところ、データベース ストレージがデフォルトで C ドライブ...