場景

Openlayers下載與加載geoserver的wms服務(wù)顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

在上面使用Openlayers加載wms服務(wù)顯示地圖的基礎(chǔ)上，如果想要在Vue中使用Openlayers加載地圖怎么用。

上面加載的wms的地圖服務(wù)

Openlayers的官方Quick start中給的例子使用的是OSM

https://openlayers.org/en/latest/doc/quickstart.html

?

OSM

OpenStreetMap（簡稱OSM） 開源wiki地圖，很多人們習以為常可以隨便拿來用的地圖，其實有很多法律和技術(shù)上的限制，這些限制使得像地圖這類的地理資訊無法有創(chuàng)意、有效率地被再利用。開放街道地圖成立動機在于希望能創(chuàng)造并且提供可以被自由地使用的地理資料（像街道地圖）給每個想使用的人，就像自由軟件所賦予使用者的自由一樣。

OpenStreetMap（簡稱OSM）是一個網(wǎng)上地圖協(xié)作計劃，目標是創(chuàng)造一個內(nèi)容自由且能讓所有人編輯的世界地圖。

OSM的地圖由用戶根據(jù)手持GPS設(shè)備、航空攝影照片、其他自由內(nèi)容甚至單靠本地知識繪制。網(wǎng)站里的地圖圖像及矢量數(shù)據(jù)皆以O(shè)pen Database License(ODbL)授權(quán)。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

首先搭建一個Vue項目，這里使用快速開發(fā)框架搭建如下

若依前后端分離版手把手教你本地搭建環(huán)境并運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

Vue中安裝Openlayers

npm install ol

?

然后我們新建一個組件olMap.vue

<template><div id="map" class="map"></div> </template><script> import "ol/ol.css"; import Map from "ol/Map"; import OSM from "ol/source/OSM"; import TileLayer from "ol/layer/Tile"; import View from "ol/View";export default {name: "olMap",data() {return {};},mounted() {this.initMap();},methods: {initMap() {new Map({layers: [new TileLayer({source: new OSM(),}),],target: "map",view: new View({center: [0, 0],zoom: 2,}),});console.log("init finished");},}, }; </script><style scoped> .map {width: 100%;height: 400px; } </style>

然后在需要顯示地圖的頁面上引入該組件并聲明

<template><div class="app-container home"><el-row :gutter="20"><olMap></olMap></el-row><el-divider /></div> </template><script> import olMap from '@/components/olMap/olMap' export default {name: "index",components: {olMap},

運行項目查看效果?

?

總結(jié)

以上是生活随笔為你收集整理的Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。