Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な JavaScript パッケージです。マップや空間データの表示や操作に使用され、柔軟な拡張メカニズムを備えています。 つまり、Openlayers(以下、ol)を使うことで、さまざまな地図や空間データを柔軟かつ自由に表示できるようになります。そして、このフレームワークは完全に無料のオープンソースです。 序文この記事では、Vue で OpenLayers を使用する方法の概要を記録し、OpenLayers を使用してマップ コンポーネントを作成し、OpenLayers によって提供されるマップとローカル イメージをマップとして使用します。
1. OpenLayersライブラリをインストールする
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.5cba1af6.jpg", 投影: 投影、 画像範囲: 範囲 }) }) ]、 ターゲット: "マップ"、 ビュー: 新しいビュー({ 投影: 投影、 中心: getCenter(範囲), ズーム: 1, 最大ズーム: 4, 最小ズーム: 1 }) }); } } }; </スクリプト> <スタイル> .map { 幅: 100%; 高さ: 400px; } </スタイル> Vue + OpenLayers クイックスタート学習チュートリアルに関するこの記事はこれで終わりです。Vue OpenLayers 入門コンテンツをさらにご覧になりたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL データベースのアップグレードにおけるいくつかの「落とし穴」
問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...
docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...
ビジネス シナリオ: vue + element ui の el-dialog を使用します。ポップ...
データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...
1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...
HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...
目次概要1. DOM要素をアニメーション化する方法2. 現在のブラウザでサポートされている変換互換の...
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
1. Alibaba Cloudは、個人のニーズに応じて適切なクラウドサーバーを選択し、CPU、メ...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...
この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...
記事マインドマップマスター/スレーブ レプリケーションと読み取り/書き込み分離を使用する理由は何です...
文法 背景: linear-gradient(direction,color-stop1,color...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
序文今日、MySQL をインストールしたところ、データベース ストレージがデフォルトで C ドライブ...