一失球、本文簡介
本文案例使用 Vite 搭建項(xiàng)目，在 Vue 3 的基礎(chǔ)上使用 OpenLayers 霸奕。
閱讀本文需要有一定 Vue 3 基礎(chǔ)溜宽。
Vite 是構(gòu)建項(xiàng)目的一個(gè)工具，即使沒有 Vite 基礎(chǔ)也沒關(guān)系质帅，一步步跟著本文做即可輕松把項(xiàng)目搭起來适揉。
OpenLayers簡介
OpenLayers 可以輕松地在任何網(wǎng)頁中放置動(dòng)態(tài)地圖留攒。它可以顯示從任何來源加載的地圖圖塊、矢量數(shù)據(jù)和標(biāo)記嫉嘀。OpenLayers 的開發(fā)旨在進(jìn)一步使用各種地理信息炼邀。它是完全免費(fèi)的開源 JavaScript。
以上是官網(wǎng)對 OpenLayers （以后簡稱“ol”）的介紹剪侮。
為什么選擇ol拭宁？
ol 其實(shí)非常使用內(nèi)網(wǎng)環(huán)境，我的工作方向是政務(wù)系統(tǒng)開發(fā)瓣俯，開發(fā)的很多項(xiàng)目都是在內(nèi)網(wǎng)運(yùn)行（無法訪問互聯(lián)網(wǎng)）杰标，而 ol 作為一款免費(fèi)的地圖渲染庫，很適合我的項(xiàng)目降铸。
如果項(xiàng)目是互聯(lián)網(wǎng)方向的在旱，可以選擇百度、高德之類的地圖庫推掸，這類的文檔桶蝎、問答資源、api等各方面在國內(nèi)都比較完善谅畅。
二登渣、環(huán)境搭建
Vite + Vue3 + ol6
步驟
- 使用
Vite創(chuàng)建一個(gè)Vue項(xiàng)目 - 初始化項(xiàng)目
- 使用
npm安裝ol - 啟動(dòng)項(xiàng)目
【step 1】創(chuàng)建 Vue 項(xiàng)目
npm init vite@latest
輸入完上面的命令，會(huì)詢問是否繼續(xù)毡泻，輸入 y 然后按回車即可胜茧。
Ok to proceed?(y)
輸入項(xiàng)目名，本文使用了“ol-demo”這個(gè)項(xiàng)目名仇味。
Project name: ol-demo
選擇要使用的框架呻顽，這里選擇 vue 即可（我選的是不使用 ts）。
Select a framework:
vanilla
vue
react
preact
lit-element
svelte
【step 2】進(jìn)入項(xiàng)目丹墨，使用命令初始化項(xiàng)目
cd ol-demo
npm install
【step 3】安裝 ol
npm i ol -S
【step 4】啟動(dòng)項(xiàng)目
npm run dev
三廊遍、起步，實(shí)際編碼階段
步驟
- 引入
ol - 創(chuàng)建地圖容器
- 編寫渲染方法
- 執(zhí)行渲染方法
【step 1】引入 ol
在項(xiàng)目新建一個(gè)頁面（xxx.vue）引入贩挣。
import { ref, onMounted } from 'vue' // vue相關(guān)方法
import { Map, View } from 'ol' // 地圖實(shí)例方法喉前、視圖方法
import Tile from 'ol/layer/Tile' // 瓦片渲染方法
import OSM from 'ol/source/OSM' // OSM瓦片【OSM不能在實(shí)際開發(fā)中使用，因?yàn)镺SM里中國地圖的邊界有點(diǎn)問題Ｍ醪啤Ｂ延亍！绒净！】
import 'ol/ol.css' // 地圖樣式
【step 2】創(chuàng)建地圖容器
地圖需要渲染到一個(gè) HTML 元素中见咒，并且需要手動(dòng)設(shè)置地圖容器的寬高（通常使用 css 來設(shè)置）。
地圖容器需要有一個(gè) id 挂疆，如果是 Vue 項(xiàng)目可以使用 ref 來代替 id论颅。
<template>
<div id="map" class="map__x"></div>
</template>
<style scoped>
.map__x {
width: 600px;
height: 600px;
border: 1px solid #eee;
}
</style>
【step 3】創(chuàng)建渲染地圖的方法
const map = ref(null) // 存放地圖實(shí)例
function initMap () {
// 地圖實(shí)例
map.value = new Map({
target: 'map', // 對應(yīng)頁面里 id 為 map 的元素
layers: [ // 圖層
new Tile({ // 使用瓦片渲染方法
source: new OSM() // 圖層數(shù)據(jù)源
})
],
view: new View({ // 地圖視圖
projection: "EPSG:4326", // 坐標(biāo)系哎垦，有EPSG:4326和EPSG:3857
center: [114.064839, 22.548857], // 深圳坐標(biāo)
minZoom:10, // 地圖縮放最小級(jí)別
zoom: 12 // 地圖縮放級(jí)別（打開頁面時(shí)默認(rèn)級(jí)別）
})
})
}
關(guān)鍵字解釋
-
Map： 一個(gè)地圖容器最最最核心的部分可以加載各類地圖與功能控件，也用于渲染恃疯、表現(xiàn)動(dòng)態(tài)地圖。每一個(gè)地圖都是一個(gè)Map對象墨闲。今妄。 -
View：是地圖視圖，控制地圖縮放等基礎(chǔ)交互鸳碧，以及地圖投影坐標(biāo)系盾鳞、地圖中心、分辨率瞻离、旋轉(zhuǎn)角度等腾仅。 -
Tile： 翻譯成中文就是 “瓦片”。這項(xiàng)是必須的套利。Tile用來承放所需的底圖推励。 -
OSM： 是ol提供的一個(gè)底圖，可以作為練習(xí)使用肉迫。【正式開發(fā)不能用OSM验辞，因?yàn)?OSM的中國邊界有點(diǎn)問題】。 -
ol/ol.css： 引入所需的css喊衫，這項(xiàng)是必須的跌造。如果沒引入此文件，地圖渲染出來的樣子會(huì)很奇怪的族购，甚至無法交互壳贪。
【step 4】在 mounted 后渲染地圖
在元素掛載到頁面后才執(zhí)行渲染函數(shù)。onMounted 是 Vue3 提供的一個(gè)生命周期函數(shù)寝杖。
onMounted(() => {
initMap()
})
? 點(diǎn)擊跳轉(zhuǎn)到真實(shí)環(huán)境預(yù)覽 ?
