Leaflet 筆記四：Vue-leaflet
github源碼在此冤狡，希望大家一起開發(fā)观话，記得點星:
https://github.com/brandonxiang/vue-leaflet
在以下插件的啟發(fā)下诸衔，我想開發(fā)一個新的插件续镇，即是將leaflet進行vue的組件化拆撼。
- Angular Leaflet directive
- Tiny Leaflet Directive
- Leaflet Popup Angular
- Leaflet Control Angular
- react-leaflet
為了將leaflet組件化镜悉，我希望通過Vue的組件工具將leaflet各個圖層分隔開梦碗。Vue的優(yōu)點在于它比Angular和React都要輕便簡潔多禽绪，以至于整個開發(fā)過程非常簡單。
<map :zoom="13" :center="[51.505, -0.09]">
<tilelayer :url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></tilelayer>
<marker :position="[51.505, -0.09]"></marker>
</map>
也可以直接使用雙向綁定洪规，實現(xiàn)數(shù)據(jù)的靈活變動印屁。
<template>
<div id="app">
<h1>{{ title }}</h1>
<map :zoom="zoom" :center="center">
<tilelayer :url="url"></tilelayer>
<marker :position="center"></marker>
</map>
</div>
</template>
<script>
import map from "./components/Map.vue"
import tilelayer from "./components/TileLayer"
import marker from "./components/Marker"
export default {
data () {
return {
title: 'Vue Leaflet Demo',
zoom:13,
center:[51.505, -0.09],
url:"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
}
},
components: {map ,tilelayer,marker}
}
</script>
轉(zhuǎn)載，請表明出處斩例。總目錄Awesome GIS
