Vue-CLI and Leaflet (1)

本文将讲述在 Vue.js 的工程中结合 leaflet.js 开发地图相关的功能。要求读者具备一定的 Vuejs 与 leafletjs背景知识。在 Vue.js 中使用 Leaflet 在这个主题下，我将会把自己在实际工作中所学习收获到开发经验分享给读者，总结归纳出常见的地图功能的实现示例，以供读者参考。 首先对 Vue.js 和 Leaflet 做简要的介绍。

1) Vuejs

Vuejs 时下流行的 MVVM 的前端框架，简单易学。关于其特性与主要优势在网络上俯拾皆是，这里就不介绍了。

2) Leaflet

Leaflet官网的标题很直接简单的讲了：

一个对移动端优化的交互地图且开源的Javascript库

对于我的实际感受而言，leaflet 是一个十分轻量级的 WebGIS 库。结合其周边资源，对于分析功能需求不那么复杂的 Web GIS 来说足以覆盖到绝大多数功能。

而在 Vue.js 中使用 Leaflet 在这个系列你将看到所有内容如下：

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

（二）Vue-CLI and Leaflet:：添加各类图图层 ( AGS, OGC )

（三）Vue-CLI and Leaflet:：添加 maker, graphics 与图层绑定popup

（四）Vue-CLI and Leaflet:：点、线、面 绘制 与 量测

（五）Vue-CLI and Leaflet:：图层控制基本功能的实现

（六）Vue-CLI and Leaflet:：AGS 属性查询与点图查询

二、环境搭建与代码实现

1）开发环境搭建

​ 我开发使用到的机器是 Win10 或者 iMac。开发使用 IDE 也相当主流 VS Code。开发环境比较简单：

1. nodejs 必须安装。参考官网

2. 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）加载一个地图简单

​ 以上三条准备工作做好之后，就可以开始进行地图展示的操作了。

​ 一个简单加载地图加载的思路是这样的：

1. 创建 地图对象。

   地图对象相对于容以地理资源的容器。而 地理资源 则包括了在地图视图窗口中看到的所有内容，如常见 地图服务资源，地理图形（点，线，面） ，以及地图控件等多种元素。创建的方法也很简单。在我的工程中需要添加创建地图对象的方法如下：

   // utils/map.js
   
   import "leaflet/dist/leaflet.css"
   import $L from "leaflet";
   
   const createMap = (divId, options) => {
     let map = $L.map(divId, options);
     this.map = map;
     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>
复制代码

到此 在 Vue-CLI 中使用Leaflet 的第一步就算完成了。

三) 总结

​ 这一个系列的文章算是对之前的工作积累的总结。内容可能比较简单，希望对看到的人有帮助。同时也希望有厉害的大神看到能指点指点。