vue+leaflet : 从0 到1 搭建开发环境

还是大剑师兰特

已于 2025-03-12 16:17:12 修改

阅读量7.2k

点赞数 2

分类专栏： # leaflet综合教程150+ 文章标签： vue.js javascript leaflet leaflet教程 leaflet示例

于 2022-09-07 14:32:37 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/126745283

版权

leaflet综合教程150+ 专栏收录该内容

149 篇文章 ¥159.90 ¥299.90

订阅专栏

本文档详细介绍了如何从头开始在Vue 2.x基础上搭建Leaflet地图应用的开发环境。首先，你需要下载并安装Node.js，然后通过npm安装Vue CLI。接着，使用Vue CLI创建一个名为vue-leaflet的项目，并安装Leaflet地图库。可选地，你可以安装Element UI以方便添加交互元素。最后，启动项目，浏览器中将显示你的第一个地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
本系列教程是在vue2.X的基础上加载leaflet 程序，来开发各种示例程序。

一、懒人配置安装包（下载、安装、运行）

项目包下载地址：https://download.csdn.net/download/cuclife/90165644

下载后解压文件
然后安装：npm install
接着运行：npm run serve

二、一步步顺序安装

1，下载安装nodejs

下载地址：https://nodejs.org/en/download/ 根据用户自己的机器情况进行选择不同版本的软件下载。本教程示例采用是是windows 64位系统软件。
安装过程很简单，一路下一步。更为详细的请参考：http://www.openlayers-cesium.com/0929744.html
安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号。
可以查到，表示安装成功。

2，安装vue-cli

安装可以参考：https://cli.vuejs.org/zh/guide/installation.html
安装命令：

npm install -g @vue/cli
或者 yarn global add @vue/cli （尽量不用这种方式，yarn不会自己配置环境变量，运行vue -V会提示错误）

安装完后，可以通过 vue -V或者 vue --version 查看当前 vue-cli的版本号。

3，创建vue-leaflet 项目。

在系统中找一个文件夹，如d:/demos中，打开cmd窗口，使用 **vue create vue-leaflet ** 来创建基础项目

在项目中选择了 vue-router和vuex，方便以后的路由和组件数据传递使用方便。

4，安装leaflet

进入到vue-leaflet 文件夹中，打开cmd窗口，使用 npm install leaflet --save 来安装leaflet 组件

5，安装element UI （选装）

为了在项目中操作方便，我们直接引用elementUI组件，方便添加一些按钮，弹窗等。
进入到vue-leaflet 文件夹中，打开cmd窗口，使用 npm i element-ui -S 来安装elementUI组件
在src/main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

最终package.json文件如下：

打开src/views/Home.vue,替换为以下代码：

<template>
	<div class="container">
		<h3>vue+leaflet: 加载openstreetmap</h3>
		<p>大剑师兰特, 还是大剑师兰特</p>
		<div id="vue-leaflet"></div>
	</div>
</template>

<script>
	export default {
		name: 'LeafletMap',
		data() {
			return {
				map: null
			}
		},
		mounted() {
			this.initMap()
		},
		methods: {
			// 使用id为vue-leaflet的div容器初始化地图
			initMap() {
				this.map = L.map("vue-leaflet", {
					center: [39.90562, 116.38840], // 中心位置 先纬度后经度
					zoom: 8, // 缩放等级
					attributionControl: true, // 版权控件
					zoomControl: true //缩放控件
				});
				L.tileLayer(
					"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
						maxZoom: 19,
						attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
					}
				).addTo(this.map)
			}
		}
	}
</script>
<style scoped>
	.container {
		width: 840px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid #42B983;
	}

	#vue-leaflet {
		width: 800px;
		height: 450px;
		margin: 0 auto;
		border: 1px solid #42B983;
		position: relative;
	}
</style>

进入到vue-leaflet 文件夹中，打开cmd窗口，执行命令：
npm run serve
浏览器打开http://localhost:8080，就能显示我们的第一个地图。

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】