leaflet 示例教程100+ 目录

雨点打透心脏的1/2处 2024-04-07 14:05 19阅读 0赞

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center]

目前已发表134篇文章

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

#### 文章目录 ####

*  vue+leaflet 目录
 *   *   *  基础设置
         *  加载地图
         *  加载、上传、导出文件
         *  绘制显示图形
         *  Event和Control
         *  综合应用
         *  常见问题

## vue+leaflet 目录 ##

#### 基础设置 ####

<table> 
 <thead> 
  <tr> 
   <th>类别</th> 
   <th align="left">标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>搭建</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126745283" rel="nofollow">从0 到1 搭建开发环境</a></td> 
  </tr> 
  <tr> 
   <td>Layer</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126773220" rel="nofollow">清除所有图层的通用方法</a></td> 
  </tr> 
  <tr> 
   <td>Layer</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129137613" rel="nofollow">删除所有的marker图层，保留其他图层</a></td> 
  </tr> 
  <tr> 
   <td>Layer</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129137528" rel="nofollow">清除底图以外的所有图层（两种方法）</a></td> 
  </tr> 
  <tr> 
   <td>Layer</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129184858" rel="nofollow">URL中显示zoom大小，经度和纬度的值</a></td> 
  </tr> 
  <tr> 
   <td>Option</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127908955" rel="nofollow">获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）</a></td> 
  </tr> 
  <tr> 
   <td>Option</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127909005" rel="nofollow">获取map当前的边界值（8个方位）</a></td> 
  </tr> 
  <tr> 
   <td>Option</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127924501" rel="nofollow">只显示一屏地图，设定范围不让循环延展</a></td> 
  </tr> 
  <tr> 
   <td>转换</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128446463" rel="nofollow">leaflet中将地址转换为坐标，弹出marker</a></td> 
  </tr> 
  <tr> 
   <td>转换</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127927530" rel="nofollow">leaflet的 Point 和 LatLng 坐标互相转换</a></td> 
  </tr> 
 </tbody> 
</table>

#### 加载地图 ####

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th align="left">标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127900987" rel="nofollow">直接加载图片缩放，不需要地图底图</a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126748012" rel="nofollow">加载OpenStreetMap地图</a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126761464" rel="nofollow">加载高德地图（多种形式）</a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129768813" rel="nofollow">加载谷歌google地图（多种形式）</a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127882736" rel="nofollow">加载天地图，多种形式</a></td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127887520" rel="nofollow">加载百度地图（2种形式）</a></td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127887650" rel="nofollow">加载Geoq智图，4种形式</a></td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127890529" rel="nofollow">加载腾讯地图 (路网、影像、地形)</a></td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127791892" rel="nofollow">加载OpenTopoMap地图</a></td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127800896" rel="nofollow">加载Stadia地图（多种形式）</a></td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127803525" rel="nofollow">加载MapTilesAPI地图（多种语言）</a></td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127805873" rel="nofollow">加载Jawg地图（6种形式）</a></td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127807087" rel="nofollow">加载Thunderforest地图（多种形式）</a></td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127809807" rel="nofollow">加载Esri地图（多种形式）</a></td> 
  </tr> 
  <tr> 
   <td>15</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129167393" rel="nofollow">自定义添加地图网格线 </a></td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129174572" rel="nofollow">利用CRS实现椭圆形的全球地图 </a></td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129319876" rel="nofollow">瓦片拼图，点击某个网格，加载显示相应的瓦片数据 </a></td> 
  </tr> 
 </tbody> 
</table>

#### 加载、上传、导出文件 ####

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th align="left">标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126887391" rel="nofollow">加载json文件，并自定义icon</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126894446" rel="nofollow">加载Geoserver地图，wms格式数据</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/1127845958" rel="nofollow">加载含有shp文件的zip，显示shp图形</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127863374" rel="nofollow">加载KML文件(方法1)</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128972312" rel="nofollow">加载KML文件(方法2)</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128971899" rel="nofollow">加载GPX文件(方法1)</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129764235" rel="nofollow">加载GPX文件(方法2)</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128973233" rel="nofollow">加载WKT文件(方法1)</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128974121" rel="nofollow">加载geojson文件</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128970244" rel="nofollow">加载topojson文件</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128969575" rel="nofollow">加载CSV文件</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129266874" rel="nofollow">加载视频文件，配置暂停播放按钮</a></td> 
  </tr> 
  <tr> 
   <td>加载</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129168198" rel="nofollow">实现极地标线地图，加载tileLayer.wms数据</a></td> 
  </tr> 
  <tr> 
   <td>上传</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128980741" rel="nofollow">上传geojson文件，在地图上显示图形</a></td> 
  </tr> 
  <tr> 
   <td>上传</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128981951" rel="nofollow">上传CSV文件，在地图上显示图形</a></td> 
  </tr> 
  <tr> 
   <td>上传</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128986009" rel="nofollow">上传WKT文件，在地图上显示图形</a></td> 
  </tr> 
  <tr> 
   <td>上传</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129012481" rel="nofollow">上传SHP文件，在地图上显示图形</a></td> 
  </tr> 
  <tr> 
   <td>上传</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129012685" rel="nofollow">上传包含shp的zip文件，在地图上显示图形</a></td> 
  </tr> 
  <tr> 
   <td>转换</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128986044" rel="nofollow">读取上传的wkt文件，转换为geojson文件</a></td> 
  </tr> 
  <tr> 
   <td>转换</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/128986084" rel="nofollow">读取上传的geojson文件，转换为wkt文件</a></td> 
  </tr> 
  <tr> 
   <td>导出</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129202955" rel="nofollow">导出图片，打印图片（A4横版或竖版）</a></td> 
  </tr> 
  <tr> 
   <td>导出</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129276908" rel="nofollow">转换geojson文件，导出KML格式文件</a></td> 
  </tr> 
  <tr> 
   <td>导出</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129276981" rel="nofollow">转换geojson文件，导出WKT格式文件</a></td> 
  </tr> 
  <tr> 
   <td>导出</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129277915" rel="nofollow">转换geojson文件，导出CSV格式文件）</a></td> 
  </tr> 
 </tbody> 
</table>

#### 绘制显示图形 ####

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th align="left">示标题</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126793440" rel="nofollow">加载显示单个图片</a></td> 
  </tr> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127974149" rel="nofollow">leaflet DivIcon使用技巧</a></td> 
  </tr> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126830511" rel="nofollow">自定义marker图标，每个点设置不同图片</a></td> 
  </tr> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129139894" rel="nofollow">加载geojson数据,随机显示不同颜色的circleMarker</a></td> 
  </tr> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126829317" rel="nofollow">添加多个marker方法1（一 一添加）</a></td> 
  </tr> 
  <tr> 
   <td>显示</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126829388" rel="nofollow">添加多个marker方法2（先组markerGroup）</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129319932" rel="nofollow">点击marker，实现跳跃的动画效果</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126849871" rel="nofollow">使用circleMarker画圆形</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126849903" rel="nofollow">使用circle画随机颜色圆形</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126854332" rel="nofollow">使用Polyline画多段折线</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129205808" rel="nofollow">绘制渐变折线</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129187527" rel="nofollow">绘制带箭头的轨迹线</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126854387" rel="nofollow">使用Polygon画嵌套多边形</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126854463" rel="nofollow">使用Rectangle显示矩形</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127927463" rel="nofollow">leaflet使用circle加载显示多个点</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129128919" rel="nofollow">绘制两个多边形的交集、差集、并集</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129127812" rel="nofollow">绘制多个点的envelope矩形）</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129126641" rel="nofollow">根据一组点的值生成凹包，并在地图上显示</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129126544" rel="nofollow">动态的绘制正弦波</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129121480" rel="nofollow">根据两个坐标值，设置arc弧线和Marker</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129065704" rel="nofollow">一个marker的世界旅行动画</a></td> 
  </tr> 
  <tr> 
   <td>绘制</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/130689975" rel="nofollow">根据坐标点设置多边形，生成geojson文件，计算面积值</a></td> 
  </tr> 
 </tbody> 
</table>

#### Event和Control ####

<table> 
 <thead> 
  <tr> 
   <th>示例</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Control</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127974749" rel="nofollow">实现鹰眼图</a></td> 
  </tr> 
  <tr> 
   <td>Control</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126829193" rel="nofollow">两种方法添加比例尺</a></td> 
  </tr> 
  <tr> 
   <td>Control</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/127851588" rel="nofollow">配置Zoom属性，个性化放大缩小按钮</a></td> 
  </tr> 
  <tr> 
   <td>Control</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/1127851627" rel="nofollow"> 通过Control.extend，自定义zoom放大缩小</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126838718" rel="nofollow"> 鼠标进出事件 mouseover和mouseout</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126838751" rel="nofollow"> 鼠标click和dblclick，并解决两者冲突</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126838865" rel="nofollow"> 点击鼠标显示经纬度坐标信息</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/126838905" rel="nofollow"> 移动鼠标显示经纬度坐标</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129184113" rel="nofollow"> 设置右键菜单，配置相应的功能</a></td> 
  </tr> 
  <tr> 
   <td>Event</td> 
   <td align="left"><a href="https://blog.csdn.net/cuclife/article/details/129321763" rel="nofollow"> 获取使用者当前的地理位置</a></td> 
  </tr> 
 </tbody> 
</table>

#### 综合应用 ####

#### 常见问题 ####

[804c6d40d4d24c23bc0d621973afeef0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a4ed336f7aa04644988788492ba61e44.png