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>
复制代码

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

三) 总结

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