Leaflet 筆記四（續(xù)）：Vue-Leaflet2.0
vue組件化三部曲：
- Leaflet 筆記四（續(xù)）：Vue-Leaflet2.0
- Leaflet 筆記九：vue-leaflet-mobile
- Cordova筆記二：vue-leaflet-cordova的創(chuàng)建
前言
github源碼在此柴底，記得點(diǎn)星:
https://github.com/brandonxiang/vueleaflet
在2016年4月30日汗盘，我剛接觸vue1.0。那時(shí)候澜建，我對(duì)vue還不是很了解。在 react-leaflet的一個(gè)啟發(fā)下碧查，想將leaflet.js進(jìn)行vue的組件化约啊。受限于我對(duì)vue的理解并不夠深入以及空余時(shí)間不多，vue-leaflet1.0版本功能并不完善另玖。
快到了2017年4月困曙，隨著vue的版本更替到了2.0以及l(fā)eaflet的版本進(jìn)入1.0表伦，我決定把它重寫(xiě)。運(yùn)用更多的新語(yǔ)法特性慷丽，并考慮引入vuex進(jìn)行數(shù)據(jù)流管理蹦哼。大部分map的SPA是以一個(gè)地圖控件作為主要的交互控件。我覺(jué)得用vuex進(jìn)行數(shù)據(jù)管理和事件管理再合適不過(guò)要糊。
在寫(xiě)vue-leaflet這一年中纲熏，有位外國(guó)哥們寫(xiě)了vue2leaflet，他的寫(xiě)法非常有新意锄俄。也激發(fā)了我的新嘗試局劲。
結(jié)構(gòu)
vuex是用于裝載map，所有與map交互的函數(shù)都會(huì)保存在mutations中奶赠。正式由于vue2減少對(duì)事件觸發(fā)機(jī)制的推崇鱼填，逐漸轉(zhuǎn)向用vuex作為數(shù)據(jù)管理中心。
Tooltip和Popup則會(huì)與父組件Marker直接進(jìn)行交互毅戈。
已完成組建
- Map
- Marker
- Popup
- Tooltip
- TileLayer
安裝
該庫(kù)已經(jīng)發(fā)布至npm苹丸。
npm install vueleaflet -save
上手
你可以編寫(xiě)如下Vue-styled的組件來(lái)使用，就像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>
在這之前竹祷，你還需要配置一下插件安裝谈跛。插件安裝的過(guò)程中，就幫你自動(dòng)注冊(cè)了組件塑陵。你可能需要了解一下vuex的多modules機(jī)制感憾。可以將你的app的module和VueLeaflet的module分開(kāi)裝進(jìn)同一個(gè)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 },
});
開(kāi)發(fā)
該庫(kù)來(lái)自vue-cli的初始化阻桅。開(kāi)發(fā)流程操作也相對(duì)簡(jiǎn)單。
# 安裝依賴(lài)
npm install
# 用 hot reload 進(jìn)行調(diào)試
npm run dev
# 生產(chǎn)壓縮文件
npm run build
轉(zhuǎn)載兼都，請(qǐng)表明出處嫂沉。總目錄Awesome GIS
