Leaflet 笔记四：Vue-leaflet
github源码在此，希望大家一起开发，记得点星:
https://github.com/brandonxiang/vue-leaflet
在以下插件的启发下，我想开发一个新的插件，即是将leaflet进行vue的组件化。
- Angular Leaflet directive
- Tiny Leaflet Directive
- Leaflet Popup Angular
- Leaflet Control Angular
- react-leaflet
为了将leaflet组件化，我希望通过Vue的组件工具将leaflet各个图层分隔开。Vue的优点在于它比Angular和React都要轻便简洁多，以至于整个开发过程非常简单。
<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>
也可以直接使用双向绑定，实现数据的灵活变动。
<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>
转载，请表明出处。总目录Awesome GIS
