leaflet 综合教程150+ 【目录 】

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

文章目录

• • • 基础设置
    • 加载地图
    • 加载、上传、导出文件
    • 显示图形
    • 手绘编辑图形
    • Event 和 Control
    • 综合应用
    • 常见问题

      基础设置

      1. vue+leaflet：从0 到1 搭建开发环境
      2. vue+leaflet：清除所有图层的通用方法
      3. vue+leaflet：清除所有的marker图层，保留其他图层
      4. vue+leaflet：清除底图以外的所有图层（两种方法）
      5. vue+leaflet：只显示一屏地图，maxBounds的控制
      6. vue+leaflet：设定范围，只加载显示某个区域的瓦片
      7. vue+leaflet：获取map状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）
      8. vue+leaflet：获取map当前的边界值（8个方位）
      9. vue+leaflet：设置一个图层或者多个图层的透明度（setOpacity）
      10. vue+leaflet：Point 和 LatLng 互相转换
      11. vue+leaflet：禁止拖拽、禁止zoom（双击、滚轮、键盘）、禁止tap
      12. vue+leaflet：双击地图，放大zoom
      13. vue+leaflet： URL中显示zoom大小，经度和纬度的值
      14. vue+leaflet：修改popup的样式，个性化弹窗

      加载地图

      1. vue+leaflet：直接加载图片缩放，不需要地图底图
      2. vue+leaflet：加载OpenStreetMap地图
      3. vue+leaflet：加载天地图，多种形式自由切换
      4. vue+leaflet：加载google地图（多种形式）
      5. vue+leaflet：加载高德地图（多种形式）
      6. vue+leaflet：加载腾讯地图，3种形式
      7. vue+leaflet：加载百度地图，2种形式切换
      8. vue+leaflet：加载Geoq智图，4种形式切换
      9. vue+leaflet：加载Jawg地图（6种形式）
      10. vue+leaflet：加载Esri地图（多种形式）
      11. vue+leaflet：加载here地图（v2软件多种形式）
      12. vue+leaflet：加载here地图（v3软件多种形式）
      13. vue+leaflet：加载tomtom地图（多种形式）
      14. vue+leaflet：加载MapTilesAPI地图（多种版本形式）
      15. vue+leaflet：加载Thunderforest地图（多种形式）
      16. vue+leaflet：加载OpenTopoMap地图
      17. vue+leaflet：加载Stadia地图（多种形式）
      18. vue+leaflet：自定义添加地图网格线
      19. vue+leaflet：实现极地标线地图，加载tileLayer.wms数据
      20. vue+leaflet：利用CRS实现椭圆形的全球地图
      21. vue+leaflet：在25833投影坐标下，加载一小块图像叠层数据
      22. vue+leaflet：点击某个网格，加载显示相应的瓦片数据
      23. vue+leaflet：加载数据，显示热力图

      加载、上传、导出文件

      1. vue+leaflet：使用SVGOverlay来加载svg文件
      2. vue+leaflet：加载json文件，并自定义icon显示
      3. vue+leaflet：加载Geoserver地图，WMS格式数据
      4. vue+leaflet：加载WMTS数据，显示图形
      5. vue+leaflet：加载含有SHP文件的zip，显示SHP图形
      6. vue+leaflet：加载本地shp文件，并在地图上显示出来
      7. vue+leaflet：加载KML文件，显示图形（方法1）
      8. vue+leaflet：加载KML文件，显示图形（方法2）
      9. vue+leaflet：加载KML文件，显示图形（方法3）
      10. vue+leaflet：加载KMZ文件，显示图形
      11. vue+leaflet：加载GPX文件，显示图形（方法1）
      12. vue+leaflet：加载GPX文件，显示图形（方法2）
      13. vue+leaflet：加载GPX数据，导出为geoJson文件
      14. vue+leaflet：加载topojson文件，显示图形（方法1）
      15. vue+leaflet：加载CSV文件，显示图形
      16. vue+leaflet：加载WKT文件，显示图形
      17. vue+leaflet：使用L.geoJSON加载文件，参数pointToLayer的使用方法
      18. vue+leaflet：使用L.geoJSON加载文件，onEachFeature的使用方法
      19. vue+leaflet：使用L.geoJSON加载文件，参数style的使用方法
      20. vue+leaflet：使用L.geoJSON加载文件，参数filter的使用方法
      21. vue+leaflet：加载geojson文件，显示图形）
      22. vue+leaflet：feach方法加载俄罗斯国界线geojson，可以拖拽图层）
      23. vue+leaflet：使用VideoOverlay来加载mp4视频
      24. vue+leaflet：加载mp4等视频文件，设置播放暂停按钮
      25. vue+leaflet：加载Geotiff文件，在map上显示图形
      26. vue+leaflet：上传Geotiff文件，并在map上显示图形
      27. vue+leaflet：上传geojson文件，在map上显示图形
      28. vue+leaflet：上传CSV文件，在map上显示图形
      29. vue+leaflet：上传WKT文件，在地图上显示图形
      30. vue+leaflet：上传gpx文件，在地图上显示图形
      31. vue+leaflet：上传SHP文件，在map上显示图形
      32. vue+leaflet：上传包含SHP的zip文件，在地图上显示图形
      33. vue+leaflet：上传KML文件，在map上显示图形
      34. vue+leaflet：上传KMZ文件，在map上显示图形
      35. vue+leaflet：读取上传的wkt文件，转换为geojson文件
      36. vue+leaflet：读取上传的geojson文件，转换为wkt文件
      37. vue+leaflet：设置多个marker，导出为一个geojson文件
      38. vue+leaflet：根据坐标点设置多边形，生成geojson文件，计算面积值
      39. vue+leaflet：上传KML文件，导出为geojson文件
      40. vue+leaflet：上传CSV文件，导出geojson格式文件
      41. vue+leaflet：转换geojson文件，导出WKT格式文件
      42. vue+leaflet：转换geojson文件，导出KML格式文件
      43. vue+leaflet：转换geojson文件，导出CSV格式文件
      44. vue+leaflet：导出图片，打印图片（A4横版或竖版）

      显示图形

      1. vue+leaflet：加载显示单个图片gif 等，运用imageOverlay
      2. vue+leaflet：随机显示不同颜色的circleMarker
      3. vue+leaflet：使用circle加载显示多个点point
      4. vue+leaflet：DivIcon实战示例代码，个性化marker
      5. vue+leaflet：自定义marker图标，每个点设置不同图片
      6. vue+leaflet：一个marker的世界旅行动画
      7. vue+leaflet：实现波动的marker效果
      8. vue+leaflet：选择一个marker，点击后设置其为中心点
      9. vue+leaflet：点击marker，实现跳跃的动画效果
      10. vue+leaflet：设置marker，并可以任意拖动
      11. vue+leaflet：纯css的marker标记，不用图片来表示
      12. vue+leaflet：添加多个marker方法1，一一添加到地图
      13. vue+leaflet：添加多个marker方法2：先构成markerGroup
      14. vue+leaflet：使用Rectangle显示矩形
      15. vue+leaflet：使用Polygon画嵌套多边形，一个数组多条数据
      16. vue+leaflet：绘制具有虚线框的多边形
      17. vue+leaflet：使用Polyline画多段折线
      18. vue+leaflet：绘制带箭头的轨迹线
      19. vue+leaflet：显示大箭头的线
      20. vue+leaflet：显示不同颜色的点划线
      21. vue+leaflet：绘制显示半圆形，扇形
      22. vue+leaflet：使用hotline沿折线绘制渐变
      23. vue+leaflet：绘制两个多边形的交集、差集、并集
      24. vue+leaflet：绘制多个点的信封envelope矩形
      25. vue+leaflet：根据一组点的值生成凹包，并在地图上显示
      26. vue+leaflet：在地图上动态的绘制正弦波
      27. vue+leaflet：根据两个坐标值，设置arc弧线和Marker
      28. vue+leaflet：分别使用L.svg和L.canvas来渲染矢量图形的示例

      手绘编辑图形

      1. vue+leaflet：使用circle画随机颜色的圆形
      2. vue+leaflet：使用circleMarker画圆形
      3. vue+leaflet：自定义绘制，可以画多边形、折线、圆形、marker、矩形
      4. vue+leaflet：设置线段、圆形、矩形等可编辑状态，拖拽改变形状
      5. vue+leaflet：测量线段.圆形.多边形的长度面积，并控制显示隐藏
      6. vue+leaflet：个性化配置，利用Leaflet-Geoman绘制多种图形
      7. vue+leaflet：利用Leaflet-Geoman绘制图形，导出为geojson文件

      Event 和 Control

      1. vue+leaflet：添加比例尺（两种方法）
      2. vue+leaflet：通过Control.extend，自定义zoom放大缩小
      3. vue+leaflet：配置Zoom属性，个性化放大缩小按钮
      4. vue+leaflet：添加zoomslider，控制zoom放大缩小
      5. vue+leaflet：实现鹰眼图效果
      6. vue+leaflet：设置显示全屏和退出全屏功能
      7. vue+leaflet：移动鼠标显示经纬度坐标（小数点后5位）
      8. vue+leaflet：点击鼠标显示经纬度坐标 （小数点后5位）
      9. vue+leaflet：鼠标事件click和dblclick，并解决两者冲突问题
      10. vue+leaflet：鼠标事件 mouseover和mouseout，弹出文字信息
      11. vue+leaflet：鼠标点击弹出明星名片
      12. vue+leaflet：鼠标mouseover显示城市图片信息,mouseout隐藏信息
      13. vue+leaflet：设置右键菜单，配置相应的功能
      14. vue+leaflet：获取使用者当前的地理位置
      15. vue+leaflet：自定义L.control扩展，配置地图水印
      16. vue+leaflet：多功能集成（位置、搜索、切换地图、全屏、鹰眼等）

      综合应用

      1. vue+leaflet：轨迹移动，有开始和暂停功能
      2. vue+leaflet：实现数据点聚合功能
      3. vue+leaflet：数据聚合，显示当前bounds区域中的点的名称列表
      4. vue+leaflet：实现左卷帘效果
      5. vue+leaflet：给出地址，esri转换为坐标后，弹出marker
      6. vue+leaflet：自定义游戏瓦片tile地图，进行3级zoom加载
      7. vue+leaflet：通过两行根数TLE，计算并显示卫星轨迹
      8. vue+leaflet：地图上叠加日夜区域
      9. vue+leaflet：利用mapbox坐标转地址，点击鼠标显示地址信息
      10. vue+leaflet：利用高德逆地理编码，点击地图标记marker，popup地址信息

      常见问题

      1. vue+leaflet：解决marker呈现灰色边框的问题
      2. vue+leaflet：解决 leaflet.TileLayer.WMTS不显示图形bug的问题
      3. vue+leaflet：鼠标事件click和dblclick，并解决两者冲突问题