大剑师兰特的GIS世界

vue+leaflet系列教程旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。注意本示例目录中的内容可能加载是vue+openlayers的示例， 本目录是要加载vue+leaflet的示例，只是内容少，逐渐更新中。

本示例演示如何在vue+leaflet中使用canvas绘制不同方向、不同颜色的等腰三角形，这里模仿在海上具有不同的船的方向和不同类型（用颜色区分）的船只。 这个示例自定义了船只的icon，通过L.divIcon加载自定义的html，将canvas画出的船只图片以base64的形式传递给html中img。 这里要注意如何用canvas绘制三角形，先要旋转一下画布。

本示例是介绍如何在vue+leaflet, 自定义CRS，形成新的投影，这里是25833投影，并使用 L.Proj.imageOverlay的方法在地图上加载载一小块图像叠层数据。

本示例介绍如何在vue+leaflet中添加tomtom地图，这里包含了多种形式，诸如中文标记、英文标记、白天地图、晚上地图、卫星影像图，高山海拔地形图等。

本示例的目的是介绍演示如何在vue+leaflet中利用高德逆地理编码，点击地图标记marker，popup地址信息 。主要利用高德地图的api将坐标转化为地址，然后在点击的位置，弹出弹窗，在里面显示出地址信息。

本示例介绍如何在vue+leaflet中添加HERE地图（v2版本的软件），并且含多种的表现形式。包括地图类型，文字标记的设置、语言的选择、PPI的设定。 v3版本和v2版本有很大的区别，关键是引用方法上，请参考文章尾部的API链接。

本示例介绍如何在vue+leaflet中添加HERE地图（v3版本的软件），并且含多种的表现形式。包括地图类型，文字标记的设置、语言的选择、PPI的设定。 v3版本和v2版本有很大的区别，关键是引用方法上，请参考文章尾部的API链接。

第138个本示例的目的是介绍演示如何在vue+leaflet中加载本地shp文件，利用读取shp数据，转换为json，利用L.geoJSON()在地图上显示图形。

第137个本示例的目的是介绍演示如何在vue+leaflet中将经纬度坐标转化为地址，点击鼠标显示某地的地址信息。主要利用mapbox的api将坐标转化为地址，然后在固定的位置显示出来。

第136个本示例的目的是介绍演示如何在vue+leaflet中个性化配置，利用Leaflet-Geoman绘制多种图形。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。

第135个本示例的目的是介绍演示如何在vue+leaflet中利用Leaflet-Geoman绘制多种图形，导出为geojson文件。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。利用FileSaver可以导出geojson文件。

本示例介绍如何在vue+leaflet中绘制显示半圆形，扇形 。这里引用了一个插件，非常方便的绘制扇形和半圆形等。

第133个本示例的目的是介绍演示如何在vue+leaflet中根据坐标点设置多边形，通过.toGeoJSON() 来生成geojson文件，通过turf.area来计算面积值。

第132个本示例的目的是介绍如何在vue+leaflet项目中通过两行根数TLE，计算并显示卫星轨迹。

第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。

第130个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍pointToLayer的使用方法。点的处理方式不同于折线和多边形。默认情况下，简单标记使用为GeoJSON点绘制。在创建GeoJSON涂层时，我们可以通过pointToLayer在GeoJSON选项对象中传递函数来改变这一点。该函数传递一个LatLng并返回一个ILayer的实例，在这种情况下可能是Marker或CircleMarker。

第129个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍onEachFeature的使用方法。onEachFeature 选项是在将每个功能添加到GeoJSON图层之前调用的功能。使用此选项通常是为了点击某个功能时可以附加弹出窗口。

第128个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍style的使用方法。style选项可以用来以两种不同的方式来设置样式。

第127个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，这里介绍filter的使用方法。filter将用于决定是否包含某个功能的函数。默认是包括所有特征。

第126个本示例的目的是介绍如何在vue+leaflet中显示日夜交替叠加区域。

第125个本示例的目的是介绍如何在vue+leaflet中绘制具有虚线框的多边形。

第124个本示例的目的是介绍如何在vue+leaflet中显示大箭头的线。

第123个本示例的目的是介绍如何在vue+leaflet中显示不同颜色的点划线。

第122个本示例的目的是介绍演示如何在vue+leaflet中加载kmz文件，并解析后在地图上显示图形。

第121个本示例的目的是介绍演示如何在vue+leaflet中使用插件做功能集成，里面包括位置、搜索、切换地图、全屏、鹰眼等。

第120个本示例的目的是介绍演示如何在vue+leaflet中添加谷歌地图，有多种形式，分别是google路网图、google卫星影像图等。

第119个本示例的目的是介绍演示如何在vue+leaflet中加载GPX文件，将图形显示在地图上，这是另外一种方式，看前一种方式请从目录中查找。GPX文件是以GPS数据交换格式保存的GPS数据文件，是一种通用的地图信息文件，可以被众多GPS应用和Web服务更轻松地导入和读取GPS数据。GPX文件包含经度和纬度位置数据，其中包括路点、轨迹和路程。

第118个本示例的目的是介绍演示如何在vue+leaflet中设定范围，只加载显示某个区域的瓦片。这里解决了几个难点：1，圈定我们想要的区域；2，圈界外的区域不能拖拽加载瓦片；3，圈界内的可以放大zoom等级,并可以上下左右拖动。

第117个本示例的目的是介绍演示如何在vue+leaflet中显示矢量图形的渲染方式，这里包含svg和canvas的方式，里面蓝色的为canvas的方式，里面紫色的为svg方式。

第116个本示例的目的是介绍演示如何在vue+leaflet中添加svg图片，这里使用SVGOverlay来做载体加载svg文件。

第115个本示例的目的是介绍演示如何在vue+leaflet中添加播放视频，这里使用VideoOverlay来做播放器载体加载mp4视频文件或者其他视频文件。

第114个本示例的目的是介绍演示如何在vue+leaflet中自定义L.control扩展，配置地图水印。要制作控件，只需继承 L.Control 并实现 onAdd() 和 onRemove()。除了 onAdd() 必须返回表示控件的 HTMLElement 实例之外，这些方法的工作方式与它们的 L.Layer 对应方法类似（只要将控件添加到地图或从地图中删除它们就会运行）。将元素添加到地图是自动完成的，删除它也是如此。

第113个本示例的目的是介绍演示如何在vue+leaflet中上传GPX文件，将图形显示在地图上，并导出为geoJson文件。

本示例的目的是介绍演示如何在vue+leaflet中加载GPX文件，将图形显示在地图上，并导出为geoJson文件。

第111个本示例的目的是介绍演示如何在vue+leaflet中自定义绘制工具，可以画多边形、折线、圆形、marker、矩形。

第110个本示例的目的是介绍演示如何在vue+leaflet中使用feach方法加载俄罗斯国界线geojson，可以拖拽图层。

第109个本示例的目的是介绍演示如何在vue+leaflet中设置显示全屏功能和退出全屏功能。

第108个本示例的目的是介绍演示如何在vue+leaflet中设置线段、圆形、矩形等可编辑状态，拖拽改变形状，点击测量，可以显示长度和面积的值，点击隐藏测量值，可以隐藏长度和面积的值。

第107个本示例的目的是介绍演示如何在vue+leaflet中设置线段、圆形、矩形等可编辑状态，拖拽改变形状。

第106个本示例的目的是介绍演示如何在vue+leaflet中自定义瓦片的加载和显示。这是示例的想法是基于对CRS及瓦片大小的一个理解和认知，同时对游戏地图的另一种诠释。