Leaflet的Vue组件 — Vue2Leaflet

这两天折腾Vue,在GitHub上发现了一个开源项目Vue2Leaflet,Vue2Leaflet是一个Vue框架的JavaScript库,封装了Leaflet,它使构建地图变得更简单。本文简单介绍了如何使用该组件,了解更多可查看作者给出的例子Vue-Leaflet-Demo和作者的JSFiddle - Bouchaud Micka

Vue2Leaflet封装的组件

1

Vue 环境

工欲善其事,必先利其器。首先配置好Vue环境。

  • 安装 node + git
  • 安装 vue-cli脚手架及项目初始化
1
2
3
4
npm i vue-cli -g
vue init webpack vue-leaflet
cd vue-leaflet
npm run dev

2

  • 访问localhost:8080,出现如下页面即成功。

3

安装Vue2Leaflet及使用

1
npm i vue2-leaflet -S

新建VueLeaflet.vue

在component文件夹下删除HelloWorld.vue,新建VueLeaflet.vue文件,如下:
4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div class="vue-leaflet">

</div>
</template>

<script>
export default {
name: 'VueLeaflet',
data () {
return {

}
}
}
</script>

<style scoped>

</style>

修改路由

修改index.js,即修改HelloWorld为VueLeaflet(省略了部分代码,后面有完整代码)。

1
2
3
4
5
6
7
8
9
10
11
import VueLeaflet from '@/components/VueLeaflet'

export default new Router({
routes: [
{
path: '/',
name: 'VueLeaflet',
component: VueLeaflet
}
]
})

添加LMap 组件

1
2
3
4
5
6
<l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker">
<l-popup :content="text"></l-popup>
</l-marker>
</l-map>

引入需要的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
export default {
name: 'VueLeaflet',
components: {
LMap,
LTileLayer,
LMarker,
LPopup
},
data () {
return {
zoom: 13,
center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482),
text: 'this is a marker'
}
}
}

保存后就可以在浏览器里看到地图了,但是看起来乱七八糟的,跟想象中的不一样,是因为没有引入Leaflet的样式文件。

引入 leaflet.css

在main.js文件中添加:

1
import 'leaflet/dist/leaflet.css';

添加后,地图是正常显示了,但是你会发现,我明明加了一个marker,为什么没有看到呢?打开控制台就明白了,marker图标没有被正确加载。

修改icon路径

1
2
3
4
5
6
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

现在打开浏览器看看😁
5

最终文件

VueLeaflet.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
<div class="vue-leaflet">
<l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker">
<l-popup :content="text"></l-popup>
</l-marker>
</l-map>
</div>
</template>

<script>
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';

export default {
name: 'VueLeaflet',
components: {
LMap,
LTileLayer,
LMarker,
LPopup
},
data () {
return {
zoom: 13,
center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482),
text: 'this is a marker'
}
}
}
</script>

<style scoped>

</style>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'leaflet/dist/leaflet.css';

Vue.config.productionTip = false;

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

Vue2Leafet 插件


0%