【Vue@Leaflet】 初始化

从今天起，将会不定期的和大家分享webgis相关的开发，包括二维三维相关的开发，同时也会分享在webgis开发中遇到的数据服务的发布和管理，以及相关数据的处理。

因为现在vue的使用率很高，上手也简单容易，所以前端框架选择用vue；leaflet在开源的gis框中，也是最轻量级，最易入手的框架之一，配上社区中的开源插件，能够完成大部分webgis开发的功能。

这篇文章主要介绍项目的初始化和地图框架的初始化

环境安装

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

npm install -g vue-cli 

3.创建项目

vue init webpack vue_leaflet 

4.进入项目中

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

查看相关视频