Leaflet 筆記四（續）：Vue-Leaflet2.0
vue組件化三部曲：
前言
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.
<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>
在這之前，你還需要配置一下插件安裝。插件安裝的過程中，就幫你自動注冊了組件。你可能需要了解一下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: '<App/>',
components: { App },
});
開發
該庫來自vue-cli的初始化。開發流程操作也相對簡單。
# 安裝依賴
npm install
# 用 hot reload 進行調試
npm run dev
# 生產壓縮文件
npm run build
轉載，請表明出處。總目錄Awesome GIS
微信公眾號
