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
18會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Jeremy Ho的沙龍 的其他內容
Vue3 筆記,指令進階篇
Vue3 學習筆記,vue-router 篇。
Vue3 學習筆記,用 Pinia 管理資料與邏輯
Vue3 學習筆記,元件與資料傳遞篇
Vue3 學習筆記,專案建立與基礎響應式篇
AWS 佈署簡單操作以及 RDS 建立篇
Vue3 筆記,指令進階篇
Vue3 學習筆記,vue-router 篇。
Vue3 學習筆記,用 Pinia 管理資料與邏輯
Vue3 學習筆記,元件與資料傳遞篇
Vue3 學習筆記,專案建立與基礎響應式篇
AWS 佈署簡單操作以及 RDS 建立篇
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現,並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現,並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。