一、概述
本文将讲述在 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。开发环境比较简单:
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 <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 的第一步就算完成了。
三) 总结
这一个系列的文章算是对之前的工作积累的总结。内容可能比较简单,希望对看到的人有帮助。同时也希望有厉害的大神看到能指点指点。