Vue@Leaflet 初始化

环境安装

1.下载地址 https://nodejs.org/en/
2.安装vue

npm install -g vue-cli 

3.创建项目

vue init webpack vue_leaflet

4.进入项目中

cd vue_leaflet
npm start 

5.安装leaflet

npm install leaflet --save

6.引入leaflet

// 在main.js 中设置如下

//引入样式文件
import 'leaflet/dist/leaflet.css'

//引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet' 
Vue.L = Vue.prototype.$L = L  

7.创建leaflet Map对象

 var map = L.map(this.$el);

8.完整代码如下

<template>
  <div class="map"></div>
</template> 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  mounted() {
    var map = L.map(this.$el);
  }
};
</script> 
<style  scoped>
.map {
  width: 100%;
  height: calc(100vh);
}
</style>

视频地址

更多内容，欢迎关注公众号

seeling_GIS