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

更新於 發佈於 閱讀時間約 6 分鐘

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!" 吧!

raw-image

解析 <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
留言
avatar-img
留言分享你的想法!
avatar-img
Jeremy Ho的沙龍
19會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
Jeremy Ho的沙龍的其他內容
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
2023/11/07
Vue3 學習筆記,用 Pinia 管理資料與邏輯
Thumbnail
2023/11/07
Vue3 學習筆記,用 Pinia 管理資料與邏輯
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue3 筆記,指令進階篇
Thumbnail
Vue3 筆記,指令進階篇
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News