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;
	}
	</スタイル>

	<テンプレート>
	  <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;
	}
	</スタイル>