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

vue组件化三部曲：

前言

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

结构

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

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

已完成组建

• Map
• Marker
• Popup
• Tooltip
• TileLayer

安装

该库已经发布至npm。

npm install vueleaflet -save

上手

<l-map :zoom="zoom" :center="center" :min-zoom="minZoom" :max-zoom="maxZoom">
  <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
  <l-marker :position="center" :title="title" :opacity="opacity" :draggable="draggable">
    <l-tooltip content="a tooltip"></l-tooltip>
  </l-marker>
  <l-marker :position="marker" :title="title" :opacity="opacity" :draggable="false">
    <l-popup content="a popup"></l-popup>
  </l-marker>
</l-map>

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: '<App/>',
  components: { App },
});

开发

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

# 安装依赖
npm install

# 用 hot reload 进行调试
npm run dev

# 生产压缩文件
npm run build