leaflet 示例教程100+ 目录

在这里插入图片描述

目前已发表134篇文章

vue+leaflet系列教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，解释相应的API知识点，做到简易实现，轻松学会。

vue+leaflet 目录

类别	标题
搭建	从0 到1 搭建开发环境
Layer	清除所有图层的通用方法
Layer	删除所有的marker图层，保留其他图层
Layer	清除底图以外的所有图层（两种方法）
Layer	URL中显示zoom大小，经度和纬度的值
Option	获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）
Option	获取map当前的边界值（8个方位）
Option	只显示一屏地图，设定范围不让循环延展
转换	leaflet中将地址转换为坐标，弹出marker
转换	leaflet的 Point 和 LatLng 坐标互相转换

类型	示标题
显示	加载显示单个图片
显示	leaflet DivIcon使用技巧
显示	自定义marker图标，每个点设置不同图片
显示	加载geojson数据,随机显示不同颜色的circleMarker
显示	添加多个marker方法1（一一添加）
显示	添加多个marker方法2（先组markerGroup）
绘制	点击marker，实现跳跃的动画效果
绘制	使用circleMarker画圆形
绘制	使用circle画随机颜色圆形
绘制	使用Polyline画多段折线
绘制	绘制渐变折线
绘制	绘制带箭头的轨迹线
绘制	使用Polygon画嵌套多边形
绘制	使用Rectangle显示矩形
绘制	leaflet使用circle加载显示多个点
绘制	绘制两个多边形的交集、差集、并集
绘制	绘制多个点的envelope矩形）
绘制	根据一组点的值生成凹包，并在地图上显示
绘制	动态的绘制正弦波
绘制	根据两个坐标值，设置arc弧线和Marker
绘制	一个marker的世界旅行动画
绘制	根据坐标点设置多边形，生成geojson文件，计算面积值

示例	示例
Control	实现鹰眼图
Control	两种方法添加比例尺
Control	配置Zoom属性，个性化放大缩小按钮
Control	通过Control.extend，自定义zoom放大缩小
Event	鼠标进出事件 mouseover和mouseout
Event	鼠标click和dblclick，并解决两者冲突
Event	点击鼠标显示经纬度坐标信息
Event	移动鼠标显示经纬度坐标
Event	设置右键菜单，配置相应的功能
Event	获取使用者当前的地理位置

序号	标题
1	解决marker呈现灰色边框的问题