ol 學習 | openlayers 你在做什麼~?

openlayers 是什麼？它就是個 JavaScript library，用來在瀏覽器上顯示地圖的。

這次練習使用 Nuxt 建立一個地圖專案，並且使用強力支援 Vue3 的 vue3-openlayers，所以還不會 Nuxt 的先去看前一篇文章喔！

安裝 vue3-openlayers

眾所周知，在學新東西的時候，安裝是最簡單的事...：

// ​install the peerDependencies
npm install ol ol-ext ol-contextmenu
// ​install this library
npm install vue3-openlayers

設定 plugin 檔案

在 vue3-openlayers 的官網只有使用 Vue3 的設定教學，用 Nuxt 做設定的我還是在 Stack Overflow 上看的。(詳細看這一篇)

在 Nuxt 中要使用 ol 要先設定插件，也就是 plugin 檔案。然後因為 vue3-ol 需要依賴 window，所以我們必須要把插件套到客戶端，因此檔名要使用 .client.js。

因此我們先在根目錄下建立一個 plugins 資料夾，然後在裡面建立一個 vue3-ol.client.js 設定檔：

import { defineNuxtPlugin } from '#app'
import OpenLayers from 'vue3-openlayers'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(OpenLayers)
})

印出第一張世界地圖

設定完後，我們在根目錄下建立一個 components 資料夾，並建立一個 MyMap.vue 組件，這裡我們用官網的範例 code：

<script setup>
import { ref } from 'vue'
const center = ref([40, 40])
const projection = ref('EPSG:4326')
const zoom = ref(8)
const rotation = ref(0)
</script>

<template>
    <ol-map
      :loadTilesWhileAnimating="true"
      :loadTilesWhileInteracting="true"
      style="height: 400px"
    >
      <ol-view
        ref="view"
        :center="center"
        :rotation="rotation"
        :zoom="zoom"
        :projection="projection"
      />
  
      <ol-tile-layer>
        <ol-source-osm />
      </ol-tile-layer>
    </ol-map>
  </template>

<style scoped>
@import 'vue3-openlayers/dist/vue3-openlayers.css';
</style>

現在啟動網頁，就會看到一張世界地圖，這算是另類的 "Hello, world!" 吧！

解析 <script setup> 內容

上面直接套用了官網的例子畫出了一張世界地圖，但這洋洋灑灑 30 多行的程式碼到底在衝啥？我們來稍微理解一下，先從 <script setup> 開始，這裡的響應式資料是要帶給後面 ol-view 使用的。

1. center：這代表的地圖起始中心點座標，改改看，滿好玩的，台灣大概是在 [841, 24] 的地方。
2. projection：表示地圖投影方式，預設的 EPSG:4326 是一種經緯度座標系統。
3. zoom：地圖的縮放級別，數字越小可以看到範圍越廣的地圖。
4. rotation：地圖旋轉角度

解析 ol-map

這是 ol 提供的地圖容器，可以理解成圖畫的畫框，我們在這裡給它設定了高度為 400px。

:loadTilesWhileAnimating與:loadTilesWhileInteracting分別代表在動畫和互動過程中是否繼續載入地圖，這跟UX 比較有關連性，是屬於地圖閱覽流暢度的問題。

解析 ol-view

如果說 ol-map 是畫框，ol-view 就是畫布的部分。他決定了這張地圖的縮放、中心、旋轉等配置，前面在 <script setup> 中作的設定就是給它用的

解析 ol-tile-layer 與 ol-source-osm

現在想像，這是一幅拼貼畫，我們給了畫框和畫布，那接下來就是要把一塊塊畫片給貼上畫布，這個畫片就是 ol-tile-layer。

那追根究柢，畫片上的色彩也要有畫家提供對吧？所以這個原始的內容來源就是 ol-source-osm，而後面的 osm 表示資料來自 OpenStreetMap，這之後會有另外文章說明怎麼替換來源。現在，大可以把這段刪掉試試看，會看到一張白又白的地圖 www。

上面這些是使用 ol 的基礎元素，基本上就是你要畫張地圖所必須的四項東西。怎麼說呢，就是缺一不可。

到此為止我們只是嘗試照著範例印出一張可以有一點點互動性的地圖，我們當然不可能止步於此，要這一張世界地圖幹嘛，航海喔？所以接下來會有 ol 的進階學習，來試試如何客製我們的地圖。

參考資料

1. vue3-openlayers 官方網站
2. How to add vue3-openlayers plugin to nuxt