Leaflet 笔记四（续）：Vue-Leaflet2.0

Leaflet 笔记四（续）：Vue-Leaflet2.0

vue组件化三部曲：

• Leaflet 笔记四（续）：Vue-Leaflet2.0
• Leaflet 笔记九：vue-leaflet-mobile
• Cordova笔记二：vue-leaflet-cordova的创建

前言

github源码在此，记得点星:
https://github.com/brandonxiang/vueleaflet

在2016年4月30日，我刚接触vue1.0。那时候，我对vue还不是很了解。在 react-leaflet的一个启发下，想将leaflet.js进行vue的组件化。受限于我对vue的理解并不够深入以及空余时间不多，vue-leaflet1.0版本功能并不完善。

快到了2017年4月，随着vue的版本更替到了2.0以及leaflet的版本进入1.0，我决定把它重写。运用更多的新语法特性，并考虑引入vuex进行数据流管理。大部分map的SPA是以一个地图控件作为主要的交互控件。我觉得用vuex进行数据管理和事件管理再合适不过。

在写vue-leaflet这一年中，有位外国哥们写了vue2leaflet，他的写法非常有新意。也激发了我的新尝试。

结构

vuex是用于装载map，所有与map交互的函数都会保存在mutations中。正式由于vue2减少对事件触发机制的推崇，逐渐转向用vuex作为数据管理中心。

Tooltip和Popup则会与父组件Marker直接进行交互。

已完成组建

• Map
• Marker
• Popup
• Tooltip
• TileLayer

安装

该库已经发布至npm。

npm install vueleaflet -save

上手

你可以编写如下Vue-styled的组件来使用，就像Layout.vue.

在这之前，你还需要配置一下插件安装。插件安装的过程中，就帮你自动注册了组件。你可能需要了解一下vuex的多modules机制。可以将你的app的module和VueLeaflet的module分开装进同一个store里面。

import Vue from 'vue';
import Vuex from 'vuex';
import VueLeaflet from './index'
import App from './Layout';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    VL: VueLeaflet.store,
  }
});

Vue.use(VueLeaflet.plugin,store);

new Vue({
  el: '#app',
  store,
  template: '',
  components: { App },
});

开发

该库来自vue-cli的初始化。开发流程操作也相对简单。

# 安装依赖
npm install

# 用 hot reload 进行调试
npm run dev

# 生产压缩文件
npm run build

转载，请表明出处。总目录Awesome GIS

微信公众号