Vue-CLI and Leaflet (1)：顯示一個地圖

時間 2019-11-09

標籤 vue cli leaflet 顯示一個地圖简体版

原文原文鏈接

1、概述

本文將講述在 Vue.js 的工程中結合 leaflet.js 開發地圖相關的功能。要求讀者具有必定的 Vuejs 與 leafletjs背景知識。在 Vue.js 中使用 Leaflet 在這個主題下，我將會把本身在實際工做中所學習收穫到開發經驗分享給讀者，總結概括出常見的地圖功能的實現示例，以供讀者參考。首先對 Vue.js 和 Leaflet 作簡要的介紹。javascript

1) Vuejs

Vuejs 時下流行的 MVVM 的前端框架，簡單易學。關於其特性與主要優點在網絡上俯拾皆是，這裏就不介紹了。

2) Leaflet

Leaflet 官網的標題很直接簡單的講了：css

一個對移動端優化的交互地圖且開源的Javascript庫對於個人實際感覺而言，leaflet 是一個十分輕量級的 WebGIS 庫。結合其周邊資源，對於分析功能需求不那麼複雜的 Web GIS 來講足以覆蓋到絕大多數功能。html

而在 Vue.js 中使用 Leaflet 在這個系列你將看到全部內容以下：前端

（一） Vue-CLI and Leaflet：起步 - 在 Vue-CLI 中使用 Leafletvue

（二） Vue-CLI and Leaflet:地圖基本操做（放大，縮小，平移，定位等）java

（三） Vue-CLI and Leaflet: 添加 marker, polyline, polygon node

（四） Vue-CLI and Leaflet: 添加 tooltips 和 popupgit

（五） Vue-CLI and Leaflet: 點繪製github

（六） Vue-CLI and Leaflet: 線繪製npm

（七） Vue-CLI and Leaflet: 面繪制

（八） Vue-CLI and Leaflet ：加載 Esri ArcGIS Map Service

（九） Vue-CLI and Leaflet: 圖層控制基本功能的實現

（十） Vue-CLI and Leaflet: AGS 屬性查詢與點圖查詢

（十一）Vue-CLI and Leaflet: 點聚合 Leaflet.markercluster

源碼請參看個人GitHub,因爲文章是一邊coding，一邊寫的因此 Github 裏面的源碼可能有點亂，能夠根據功能來找對應的代碼。後面會陸續整理完善。

2、環境搭建與代碼實現

1）開發環境搭建

我開發使用到的機器是 Win10 或者 iMac。開發使用 IDE 也至關主流 VS Code。開發環境比較簡單：

nodejs 必須安裝。參考官網
Vue-CLI 標準工具必須安裝。參考官網
```
npm install -g @vue/cli
複製代碼
```

2) 建立 Vue-CLI 工程

Vue-CLI 安裝完成以後，建立一個 Vue 工程，運行一下命令。

vue create leaflet-tutorail
複製代碼

關於建立 Vue 工程的官網上講解的很是詳細。若有須要請參考。安裝完成以後，應該獲得一下這樣一個工程目錄。

而一般進行一些簡單的工程模塊化以後工程目錄爲以下, 同時修改main.js中的引用，將工程中的工具集模塊掛載在 Vue 對象上：

Vue.prototype.$utils = utils;
複製代碼

3）在 vue 中安裝 Leaflet

npm install leaflet --save
複製代碼

leaflet 包安裝成功以後，須要在 Vue 工程中將它引入至工程。一般個人作法是，將 leaflet 做品爲地圖模塊的工具單獨封裝一個模塊裏 map.js。這樣的若是功能的邏輯較複雜時或須要自定一些加載選項時，在 map.js 維護可使代碼更加簡潔，提升代碼的易讀性，可維護性。

須要注意的是，引用 Leaflet 的時候須要同時引入 leaflet.css 的樣式。

// utils/map.js

import "leaflet/dist/leaflet.css"
import $L from "leaflet";

export default { };
複製代碼

同時將地圖模塊掛載在工具集中：

import map from "./map";

export default {
  map
};
複製代碼

4）加載一個地圖簡單

以上三條準備工做作好以後，就能夠開始進行地圖展現的操做了。

一個簡單加載地圖加載的思路是這樣的：

建立 地圖對象。

地圖對象 相對於容以地理資源的容器。而 地理資源 則包括了在地圖視圖窗口中看到的全部內容，如常見地圖服務資源，地理圖形（點，線，面），以及地圖控件等多種元素。建立的方法也很簡單。在個人工程中須要添加建立地圖對象的方法以下：

// utils/map.js

import "leaflet/dist/leaflet.css"
import $L from "leaflet";

const createMap = (divId, options) => {
  let map = $L.map(divId, options);
  return map;
};

export default { createMap };
複製代碼

地圖對象建立成功以後，則能夠看到以下圖所示的地圖視圖窗口：

// src/views/Map.Vue

<template>
  <div class="map-container" id="map-container"></div>
</template>

<script>
export default {
  name: "map",
  components: {},
  data(){
    return {
      map: null
    }
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container");
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
複製代碼

2）加載地圖服務

有了地圖容器以後，並不表明就能夠看到地圖了。地圖視圖須要添加圖層或圖形纔會有內容顯示。這裏我修改了一下官網上的例子，官網上添加的是一個 open street map 服務：

首先在 map.js 中添加圖層加載的方法。須要注意一下，leaflet 中建立圖層的方法是異步方法，因此這裏我用到了 async和 await 來處理異步的問題。

// src/utils/map.js

const createTileLayer = async (map, url, options) => {
  let tileLayer = await $L.tileLayer(url, options);
  tileLayer.addTo(map);
  return tileLayer;
};
複製代碼

接着，再在地圖頁面中調用次此方法展現地圖。

// src/views/Map.Vue

<template>
  <div class="map-container" id="map-container"></div>
</template>

<script>
export default {
  name: "mapView",
  components: {},
  data() {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container");
    
    // 加載 open street map 圖層服務
    this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});

    // 設施地圖視圖 中心位置
    this.map.setView([51.505, -0.09], 13);
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
複製代碼