Vue3 + Leaflet结合开发

前章知识点

（1）Leaflet入门基础专栏

---

---

前言

在WebGIS开发领域，Leaflet作为轻量级地图库以其简洁API和高扩展性广受欢迎。结合Vue3的响应式系统和组合式API，能够实现：

1. 组件化开发 - 将地图功能封装为可复用组件
2. 性能优化 - 利用Vue3的Proxy响应式实现高效数据绑定
3. 开发体验提升 - Vite的快速热更新与Tree Shaking支持
4. 代码可维护性 - Composition API实现逻辑关注点分离
5. 轻量化组合 - 打包体积比传统WebGIS框架减少40%+

在公司和项目中一般会结合主流框架来实现整个体系，该系列文章主要以Vue + Leaflet结合实现相关业务场景的页面。

---

一、Node环境搭建

1. Node下载

Windows系统

1. 访问 Node.js官网
2. 下载LTS版本安装包（推荐18.x+）
3. 双击安装包按向导完成安装

历史版本下载：https://nodejs.org/download/release/
如果想要下载多版本可以使用nvm或fnm来进行管理，这边不做说明

macOS系统

# 使用Homebrew安装
brew install node

验证安装

node -v && npm -v

---

二、Vite搭建Vue3

1. 创建Vue3项目

需要先配置Vite环境

# 全局安装create-vite（可选）
npm install -g create-vite

# 创建项目（推荐方式）
npm create vite@latest vue-leaflet -- --template vue-ts

# 进入项目目录
cd vue-leaflet

安装项目所需依赖

# 使用npm安装
npm install

启动项目命令

npm run dev
# 成功后会显示访问地址（默认：http://localhost:5173）

项目目录主要结构

├── node_modules/    # 依赖模块
├── public/          # 静态资源
├── src/
│   ├── assets/      # 资源文件
│   ├── components/  # 组件目录
│   ├── App.vue      # 根组件
│   └── main.ts      # 入口文件
├── index.html       # 主页面
├── package.json     # 项目配置
├── tsconfig.json    # TypeScript配置
└── vite.config.ts   # Vite配置

Vite创建Vue3相关信息设置可以参考：https://blog.youkuaiyun.com/weixin_50117915/article/details/135617582

三、安装Leaflet依赖

1. 安装基础包

Leaflet包安装

# 安装Leaflet核心库
npm install leaflet --save-d

# 安装TypeScript类型定义（TS项目需要）
npm install @types/leaflet -D

Leaflet样式引入

// main.ts 或组件中
import 'leaflet/dist/leaflet.css'

在页面使用

<template>
  <div>
    <div id="map" class="map-container"></div>
  </div>
</template>
<script lang="ts">
// 定义组件名称
import { defineComponent } from "vue";
export default defineComponent({
  // 定义组件tag标签
  name: "initMap",
  // 定义组件label，首页使用
  labelName: "初始化地图",
  componentIndex: 1
});
</script>
<script setup lang="ts">
import { onMounted } from "vue";
import L from "leaflet";

let map: L.Map | null = null;

onMounted(() => {
  map = initMap();
});

/**
 * Todo 初始化地图
 */
const initMap = () => {
  // 初始化地图实例，设置中心坐标和缩放级别
  let map: L.Map = L.map("map").setView([39.90002, 116.46], 10);
  // 天地图key
  const mapKey = "37d883978b54bc12f58d30492062d574";
  // 添加底图瓦片层（以天地图为例）
  L.tileLayer(
    `http://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${mapKey}`,
    {
      maxZoom: 19,
      // 子域名
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
    }
  ).addTo(map);

  L.tileLayer(
    `http://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${mapKey}`,
    {
      maxZoom: 19,
      // 子域名
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
    }
  ).addTo(map);

  return map;
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

实现效果如下

---

总结

上述只是简单说明一下整个搭建过程，方便学习我已经将对应环境Vite + Vue+ Leaflet的项目都整理好，各位只需将对应的代码下载来。（若有问题可以加入QQ群：161471383）

源码地址： https://gitcode.com/xiuyulin/Vue-Leaflet.git