Leaflet的Vue组件 — Vue2Leaflet

原文地址：Leaflet的Vue组件 — Vue2Leaflet

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

Vue2Leaflet封装的组件

Vue 环境

工欲善其事,必先利其器。首先配置好Vue环境。
* 安装 node + git
* 安装 vue-cli脚手架及项目初始化

npm i vue-cli -g
vue init webpack vue-leaflet
cd vue-leaflet
npm run dev

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

安装Vue2Leaflet及使用

npm i vue2-leaflet -S

新建VueLeaflet.vue

在component文件夹下删除HelloWorld.vue，新建VueLeaflet.vue文件，如下：

<template>
  <div class="vue-leaflet">

  </div>
</template>

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

    }
  }
}
</script>

<style scoped>

</style>

修改路由

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

import VueLeaflet from '@/components/VueLeaflet'

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

添加LMap 组件

<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> 

引入需要的组件

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文件中添加：

import 'leaflet/dist/leaflet.css';

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

修改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'),
});

现在打开浏览器看看��

最终文件

VueLeaflet.vue

<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

// 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 插件

• vue2-leaflet-markercluster wrapper for MarkerCluster
• vue2-leaflet-tracksymbol wrapper for TrackSymbol
• vue-choropleth to display a choropleth map given a certain GeoJSON
• vue2-leaflet-geosearch wrapper for GeoSearch
• vue2-leaflet-vectorgrid wrapper for VectorGrid to display gridded vector data