一、概述
本文将讲述在 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:地图基本操作（放大，缩小，平移，定位等）
（三）Vue-CLI and Leaflet: 添加 marker, polyline, polygon
（四）Vue-CLI and Leaflet: 添加 tooltips 和 popup
（五）Vue-CLI and Leaflet: 点、线、面 绘制 与 量测
（六）Vue-CLI and Leaflet: 添加各类图图层 ( AGS, OGC )
（七）Vue-CLI and Leaflet: 图层控制基本功能的实现
（八）Vue-CLI and Leaflet: AGS 属性查询与点图查询
二、环境搭建与代码实现
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); this.map = map; return map; }; export default { createMap }; 复制代码地图对象创建成功之后，则可以看到如下图所示的 地图视图窗口：
// src/views/Map.Vue 复制代码
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
复制代码到此 在 Vue-CLI 中使用Leaflet 的第一步就算完成了。
三) 总结
这一个系列的文章算是对之前的工作积累的总结。内容可能比较简单，希望对看到的人有帮助。同时也希望有厉害的大神看到能指点指点。