概述
目前已发表134篇文章
vue+leaflet系列教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，解释相应的API知识点，做到简易实现，轻松学会。
文章目录
- vue+leaflet 目录
- 基础设置
- 加载地图
- 加载、上传、导出文件
- 绘制显示图形
- Event和Control
- 综合应用
- 常见问题
vue+leaflet 目录
基础设置
| 类别 | 标题 |
|---|---|
| 搭建 | 从0 到1 搭建开发环境 |
| Layer | 清除所有图层的通用方法 |
| Layer | 删除所有的marker图层，保留其他图层 |
| Layer | 清除底图以外的所有图层（两种方法） |
| Layer | URL中显示zoom大小，经度和纬度的值 |
| Option | 获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值） |
| Option | 获取map当前的边界值（8个方位） |
| Option | 只显示一屏地图，设定范围不让循环延展 |
| 转换 | leaflet中将地址转换为坐标，弹出marker |
| 转换 | leaflet的 Point 和 LatLng 坐标互相转换 |
加载地图
| 序号 | 标题 |
|---|---|
| 1 | 直接加载图片缩放，不需要地图底图 |
| 2 | 加载OpenStreetMap地图 |
| 3 | 加载高德地图（多种形式） |
| 4 | 加载谷歌google地图（多种形式） |
| 5 | 加载天地图，多种形式 |
| 6 | 加载百度地图（2种形式） |
| 7 | 加载Geoq智图，4种形式 |
| 8 | 加载腾讯地图 (路网、影像、地形) |
| 9 | 加载OpenTopoMap地图 |
| 10 | 加载Stadia地图（多种形式） |
| 11 | 加载MapTilesAPI地图（多种语言） |
| 12 | 加载Jawg地图（6种形式） |
| 13 | 加载Thunderforest地图（多种形式） |
| 14 | 加载Esri地图（多种形式） |
| 15 | 自定义添加地图网格线 |
| 16 | 利用CRS实现椭圆形的全球地图 |
| 17 | 瓦片拼图，点击某个网格，加载显示相应的瓦片数据 |
加载、上传、导出文件
| 类型 | 标题 |
|---|---|
| 加载 | 加载json文件，并自定义icon |
| 加载 | 加载Geoserver地图，wms格式数据 |
| 加载 | 加载含有shp文件的zip，显示shp图形 |
| 加载 | 加载KML文件(方法1) |
| 加载 | 加载KML文件(方法2) |
| 加载 | 加载GPX文件(方法1) |
| 加载 | 加载GPX文件(方法2) |
| 加载 | 加载WKT文件(方法1) |
| 加载 | 加载geojson文件 |
| 加载 | 加载topojson文件 |
| 加载 | 加载CSV文件 |
| 加载 | 加载视频文件，配置暂停播放按钮 |
| 加载 | 实现极地标线地图，加载tileLayer.wms数据 |
| 上传 | 上传geojson文件，在地图上显示图形 |
| 上传 | 上传CSV文件，在地图上显示图形 |
| 上传 | 上传WKT文件，在地图上显示图形 |
| 上传 | 上传SHP文件，在地图上显示图形 |
| 上传 | 上传包含shp的zip文件，在地图上显示图形 |
| 转换 | 读取上传的wkt文件，转换为geojson文件 |
| 转换 | 读取上传的geojson文件，转换为wkt文件 |
| 导出 | 导出图片，打印图片（A4横版或竖版） |
| 导出 | 转换geojson文件，导出KML格式文件 |
| 导出 | 转换geojson文件，导出WKT格式文件 |
| 导出 | 转换geojson文件，导出CSV格式文件） |
绘制显示图形
| 类型 | 示标题 |
|---|---|
| 显示 | 加载显示单个图片 |
| 显示 | leaflet DivIcon使用技巧 |
| 显示 | 自定义marker图标，每个点设置不同图片 |
| 显示 | 加载geojson数据,随机显示不同颜色的circleMarker |
| 显示 | 添加多个marker方法1（一 一添加） |
| 显示 | 添加多个marker方法2（先组markerGroup） |
| 绘制 | 点击marker，实现跳跃的动画效果 |
| 绘制 | 使用circleMarker画圆形 |
| 绘制 | 使用circle画随机颜色圆形 |
| 绘制 | 使用Polyline画多段折线 |
| 绘制 | 绘制渐变折线 |
| 绘制 | 绘制带箭头的轨迹线 |
| 绘制 | 使用Polygon画嵌套多边形 |
| 绘制 | 使用Rectangle显示矩形 |
| 绘制 | leaflet使用circle加载显示多个点 |
| 绘制 | 绘制两个多边形的交集、差集、并集 |
| 绘制 | 绘制多个点的envelope矩形） |
| 绘制 | 根据一组点的值生成凹包，并在地图上显示 |
| 绘制 | 动态的绘制正弦波 |
| 绘制 | 根据两个坐标值，设置arc弧线和Marker |
| 绘制 | 一个marker的世界旅行动画 |
| 绘制 | 根据坐标点设置多边形，生成geojson文件，计算面积值 |
Event和Control
| 示例 | 示例 |
|---|---|
| Control | 实现鹰眼图 |
| Control | 两种方法添加比例尺 |
| Control | 配置Zoom属性，个性化放大缩小按钮 |
| Control | 通过Control.extend，自定义zoom放大缩小 |
| Event | 鼠标进出事件 mouseover和mouseout |
| Event | 鼠标click和dblclick，并解决两者冲突 |
| Event | 点击鼠标显示经纬度坐标信息 |
| Event | 移动鼠标显示经纬度坐标 |
| Event | 设置右键菜单，配置相应的功能 |
| Event | 获取使用者当前的地理位置 |
综合应用
| 序号 | 标题 |
|---|---|
| 1 | 轨迹移动，有开始和暂停功能 |
| 2 | 数据聚合 |
| 3 | 将实际地址转化为坐标，设置marker |
| 4 | 实现左卷帘效果 |
| 5 | 自定义游戏瓦片tile地图，进行3级zoom加载 |
常见问题
| 序号 | 标题 |
|---|---|
| 1 | 解决marker呈现灰色边框的问题 |
最后
以上就是清秀冥王星为你收集整理的leaflet 示例教程100+ 目录vue+leaflet 目录的全部内容，希望文章能够帮你解决leaflet 示例教程100+ 目录vue+leaflet 目录所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复