起步走

讓我們直接複製官方的範例吧。

你應該會看到中心點位於東非一帶。

如果要使用 OSM 的話，首先你必須要引用 Openlayers 的 CSS 與 JS 檔案：

<-- CSS -->
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">

<-- JS  -->
<script src="https://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>

接著，我們需要一個指定好大小的元件來放地圖：

<div id="map"></div>

<-- CSS 區域內 -->
#map {
  height: 400px;
  width: 100%;
}

再接著是重頭戲：JavaScript！

OpenLayers API 第四代變得很像是 Vue 一樣。相當有趣。

範例中，我們建立了新的物件 ol.Map。裡面最少要有三個 instanse：

1. target：指定要把地圖放到哪個 ID element。注意，你一定要指定好該 ID element 的長與高。
2. layers：你想要載入的圖層。有很多可以用的圖層，上面的範例 new ol.layer.Tile({ source: new ol.source.OSM() }) 就載入了 OpenStreetMap 的圖層。當然也可以蓋上其他的圖層。
3. view：上例指定了兩個初始數值：
   1. center：地圖一開始要在哪裡。我們可以使用 ol.proj.fromLonLat。API 陣列是有順序的：第一個元素要放經度（Longitude）、第二個則是緯度（Latitude）。正好與 Google Maps 相反，用 Google Maps 串接過的必須特別注意。絕對不可以把 Google 搜尋到的經緯度直接貼過去，而是要確定經度哪個、緯度哪個。
   2. zoom：OpenLayers 的是按照解析度縮放的。

現在開始進 JSFiddle 玩玩看吧。

1. 把 center: ol.proj.fromLonLat([37.41, 8.82]) 裡面的陣列改為 [35.6894,139.692]，請問會座落到哪裡？
2. Google Maps 的教學文件的範例中心點是澳洲的新南威爾斯。試試看，怎麼讓 OSM 一開始也座落於澳洲的新南威爾斯呢？層級不限！
   提示：Google Maps 的教學文件裡面，經度是 150.644、緯度是 -34.397。
3. 看一下維基百科的台中市的座標，想辦法讓地圖的中心變成台中市。層級只要看得到台中市就可以。