# 基于vue3+ts的leaflet基本使用

**Repository Path**: akaedu2012/leaflet-vue3

## Basic Information

- **Project Name**: 基于vue3+ts的leaflet基本使用
- **Description**: 主要是学习leaflet，基于vue3+ts的leaflet基本使用
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-02-25
- **Last Updated**: 2025-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# leaflet-vue3

## 项目简介

主要是学习leaflet，基于vue3 + ts，研究leaflet基本使用。

## 依赖环境

node@14.19.0

## 运行步骤

1. npm i
   初始化
2. npm run dev
   启动本地服务
3. npm run prod
   打包生产环境

## 项目目录介绍

- public (公共文件，现在主要是放 favicon.ico)
- src (源代码)
  - assets (静态文件)
    - css (公共 css 文件)
    - js (公共 js 文件)
  - components (组件)
  - router (路由)
  - store (数据状态管理)
  - views (页面)
  - App.vue (初始化页面，根页面)
  - main.ts (初始化配置)
- .env.development (开发环境配置)
- .env.production (生产环境配置)
- .gitignore (git 忽略)
- index.html (最终的页面)
- package.json (依赖)
- vite.config.ts (vite 配置)

## 项目功能介绍

- Leaflet.vue (leaflet基础使用: 初始化地图、比例尺、绘制圆形、绘制多边形、标注点、监听点击事件) 
- LeafletSenior.vue (多个地图切换)

## 项目日志

### 2022.07.20

在vue3 + ts里引入leaflet，在组件Leaflet.vue里对leaflet基础使用。  

注意：ts里不能直接引入js，要先声明。

leaflet 弹窗的默认关闭按钮是a标签且自带href="#close",会自动跳转close页面，建议自定义关闭按钮。  

### 2022.07.21

- 解决标注点会跟着地图缩放而移动的问题
- 解决弹窗的默认关闭按钮是a标签且自带href="#close",会自动跳转close页面的问题
   1. 建议自定义关闭按钮。（我主要是觉得每次重新定义关闭按钮很麻烦，所以我没有采用这个方法。）
   2. 获取所有弹窗关闭按钮，并清除href属性。
- 发现个问题，当我在圆形绑定个弹窗，然后在标注点绑定个弹窗，当我把圆形弹窗关闭，标记点和弹窗都会随着地图缩放而位移。  
  发现用vue3 + ts写leaflet有好多问题，我用js直接写，都没这么多问题。。。这个问题先记录着，暂时不知道怎么解决。  
- 用vue3 + ts写leaflet问题太多了，刚写到多个地图切换，结果地图一切换加载贼慢，还报错，醉了，之前原生写一点问题都没有  
  算了，这个先暂停，发现vue3 + ts的生态还是不行，问题好多，等下我把原生的整理下传到gitee当demo，这个就先这样了。   
  基于原生的leaflet的基本使用 https://gitee.com/tianyu0-0/leaflet-js     

## 参考文献

leaflet：入门基础 https://blog.csdn.net/sinat_36226553/article/details/88878268  

底图资源网站 https://openwhatevermap.xyz/#3/28.00/18.00