今天看啥  ›  专栏  ›  蓝波丶坎迪

Vue-CLI and Leaflet (1)

蓝波丶坎迪  · 掘金  ·  · 2019-04-26 07:00

文章预览

阅读 9

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 工程的官网上讲解的非常详细。如有需要请参考。安装完成之后,应该得到一下这样一个工程目录。

content

而通常进行一些简单的工程模块化之后工程目录为如下, 同时修改main.js中的引用,将工程中的工具集模块挂载在 Vue 对象上:

Vue.prototype.$utils = utils;
复制代码

content-highlight

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

MapView

2)加载地图服务

​ 有了地图容器之后,并不代表就可以看到地图了。地图视图需要添加图层或图形才会有内容显示。这里我修改了一下官网上的例子,官网上添加的是一个 open street map 服务:

首先在 map.js 中添加图层加载的方法。 需要注意一下,leaflet 中创建图层的方法是异步方法,所以这里我用到了 asyncawait 来处理异步的问题。

// 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 的第一步就算完成了。

三) 总结

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

………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览