Vue中使用Openlayers加載OSM(Open Street Map)顯示街道地圖

場景

Openlayers下載與加載geoserver的wms服務顯示地圖：

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

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

上面加載的wms的地圖服務

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

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

 

 

OSM

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

OpenStreetMap（簡稱OSM）是一個網上地圖協作計划，目標是創造一個內容自由且能讓所有人編輯的世界地圖。

OSM的地圖由用戶根據手持GPS設備、航空攝影照片、其他自由內容甚至單靠本地知識繪制。網站里的地圖圖像及矢量數據皆以Open Database License(ODbL)授權。

注：

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

實現

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

若依前后端分離版手把手教你本地搭建環境並運行項目：

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
  },

 

運行項目查看效果