leaflet 示例教程100+ 目录

在这里插入图片描述

目前已发表121篇文章

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 加载天地图,多种形式
5 加载百度地图(2种形式)
6 加载Geoq智图,4种形式
7 加载腾讯地图 (路网、影像、地形)
8 加载OpenTopoMap地图
9 加载Stadia地图(多种形式)
10 加载MapTilesAPI地图(多种语言)
11 加载Jawg地图(6种形式)
12 加载Thunderforest地图(多种形式)
13 加载Esri地图(多种形式)
14 自定义添加地图网格线
15 利用CRS实现椭圆形的全球地图
15 瓦片拼图,点击某个网格,加载显示相应的瓦片数据

加载、上传、导出文件

类型 标题
加载 加载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的世界旅行动画

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+,leaflet,leaflet教程,javascript,leaflet示例)