【Leaflet入门】vue使用leaflet插件

Leaflet入门

【Leaflet入门】vue使用leaflet插件–初始化
【Leaflet入门】vue使用leaflet插件–图层服务
【Leaflet入门】vue使用leaflet插件–几何绘制

---

前言

最近做的项目需要用到地图服务,之前我使用过高德,百度,天地图一些国内的地图服务,然后有一些需求,国内的这些服务呢可能需要毛爷爷,然后在同事的推荐下使用啦leaflet,这里记录一下使用的方法和一些开发中遇到问题。

---

`

一、Leaflet是什么？

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。

Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档、简单易用的 API 和完善的案例, 以及可读性较好的源码
这里给大家推荐一个Leaflet的中文文档,方便大家后续开发
链接: leaflet中文文档

二、使用步骤

1.引入库

我这里使用的前端框架是vue,我就以vue为例和大家介绍
首先需要下载leaflet的插件
代码如下：

npm install leaflet

下载完成之后,根据你的需求选择全局引入或者按需引入,这里我的需求是按需引入
跟国内服务不同的是leaflet不需要注册申请key才能使用
我们除了需要引入leaflet之外,还要引入他的样式
代码如下：

import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';

2.初始化地图

我们完成第一步之后,接下来就是初始化地图服务
在vue的里,我们需要把初始化的方法放到mounted的生命周期里
代码如下：

data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods:{
  initMap() {
      const VEC_C =
        'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';
      const CVA_C =
        'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=';
      const TK_KEY = '天地图key';
      var layer1 = L.tileLayer(VEC_C + TK_KEY, {
        tileSize: 256,
        layers: 'layers1'
      });
      var layer2 = L.tileLayer(CVA_C + TK_KEY, {
        tileSize: 256,
        layers: 'layers2'
      });
      this.map = L.map('map', {
        center: [29.12495511624777, 113.57457709047115],
        zoom: 5,
        crs: L.CRS.EPSG4326,
        layers: [layer1, layer2,],
        zoomControl: false, // 禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
      });
    },
  }

你可以定义一个map变量,这里用来接收leaflet的实例化对象,以便你后续的开发中使用
因为项目需求,我这里的图层使用的是天地图提供的图层,因为天地图的标注和地图是分开的,所以这里我引入啦两个图层。

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了如何引入leaflet插件,并且初始化我们map对象