Leaflet 中常用的 gis 功能可以满足一般使用，有些特殊需求，官方也有插件系统，本文会挑选一些常用的，经过测试可用的插件单独放出来使用方法和一些注意事项，希望能够帮助到同僚们。

最近项目中有移动端的开发需求，自然就用到了最轻量级的 gis 组件——Leaflet，100 多 k 的体积，五脏俱全，丰富的第三方插件，虽然开发者数量上不及大哥级产品 Arcigs，但也基本够用，对于 esri 的自家系统支持好，svg 和 canvas 两种渲染方式，让数据量大的要素图层渲染也不是那么吃力。

这里把自己对于 Leaflet 的一些探索研究记录一下，一方面便于自己后期回顾，另一方面也希望和大家一起探讨学习。

本文中所使用的数据来源于温州台风网，通过 F12 抓取，你可以在我的GitHub上查看数据和本文源代码

台风的风圈是一种不常见但算的上规则的图形，在上面的网站可以看到最终效果，简单的解剖下其实就是四个 1/4 圆

从数据结构上也可以看出来：

var radius_quad = {
  ne: 250, //单位为KM
  se: 250,
  sw: 180,
  nw: 150,
};

在某个固定经纬度点上，以此点为圆心组合成了一个所谓的风圈形状，四个方向分别代表每个 1/4 圆的半径。刚开始是为了实现这种效果进行了研究，后来发现 openlayers 对于这种效果的支持还挺有意思，记录下来已做分享。

  最近用 Vue+element 开发项目时，在dialog组件上嵌套使用dialog组件或是MessageBox这类弹框组件，发现会出现遮罩层重合之类的问题，导致很多人只能选择关闭遮罩层。GitHub上就此问题也出现过类似讨论。有几种解决方案：