花姐夫JUN的博客

GIS开发过程中，经常需要绘制marker，这些marker很大概率会有坐标相同导致的叠加问题，这种情况下会降低使用体验感。所以我们可以将叠加的marker的popup做一个分页效果，可以切换显示的marker。我们以leaflet为例，我们可以使用leaflet的popup展示marker的详细信息，简单的信息展示我们可以直接拼接html字符串就能解决，但是我们需要切换信息，这样就会涉及到dom的事件监听还有信息内容的动态更新，如果用js+html这样的方式实现起来非常复杂，于是我们看看能不能直接用vue

在气象领域中，对台风的准确可视化呈现对于灾害预警和防范具有重要意义。本文将深入探讨一段使用 JavaScript 实现台风可视化功能的代码。原本只是简单的绘制台风的路径，但是后面的需求要求显示台风各个历史节点的动画绘制，于是难度增加了，最后还是使用leaflet的插件（）完成了动画需求，以下就来介绍我的动画实现方式，请多指教。

图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素，本文要介绍的图例组件还可以按需求过滤掉不用显示的要素，使地图的更能清晰的显示我们需要显示的内容。

两点之间的连线是很常见的，但是都是直直的一条线段，为了使连线更加平滑，我们可以使用曲线进行连线，本功能考虑使用贝塞尔曲线进行连线绘制，最后将线段的两端节点连接，返回一个polygon。给定不同的点 P0 和 P1，线性贝塞尔曲线只是这两点之间的一条线。相当于线性插值。接受一条线，通过应用贝塞尔样条算法返回一个弯曲的版本。

项目中有一个需求，就是需要绘制一个圆，并且绘制的时候还要设置方位角，最后返回圆的坐标集合和方位角。本功能使用Leaflet-Geoman+Turf.js+leaflet实现。在陆地导航中，方位角通常表示为 alpha、α，并定义为从北基线或子午线顺时针测量的水平角。方位角也被更广泛地定义为从任何固定参考平面或容易建立的基准方向线顺时针测量的水平角度。今天，方位角的参考平面通常是真北，测量为 0° 方位角，但也可以使用其他角度单位（grad、mil）。

在GIS开发中，缓冲区的绘制和使用是非常广泛的，一般情况下就是对缓冲区范围内的要素做分析使用，也会有一些其他的操作，下面我就记录一下使用leaflet+turf.js完成缓冲区的绘制操作Turf.js是一个用于地理空间计算的 JavaScript 库。它提供了许多地理空间操作的函数，如点线面的创建、缓冲区计算、距离计算、区域合并等，方便在前端应用中处理地理空间数据和实现地图相关功能。Turf.js 不依赖于任何地图库，可以在任何 JavaScript 环境中使用。绘制缓冲区主要使用buffer。

Leaflet是一款开源的轻量级交互式地图可视化JavaScript库，能够满足大多数开发者的地图可视化需求，其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行，其功能可通过插件进行扩展，拥有易于使用的、文档完善的API，提供了简单、可读性高的源代码。

地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。

leaflet的marker可以使用icon，所以这篇文章我们自定义一个icon，并在marker中使用，满足我的恶趣味。

Leaflet的地图图层控件可控制两类图层：一类是底图图层（Base Layers），一次只能选择一个图层作为地图的背景图层，即底图图层，在地图图层控件中用单选按钮控制；另一类是覆盖图层（Overlays），也就是覆盖在底图上的其他图层，一次可以覆盖一个图层，也可以覆盖多个图层，甚至可以不覆盖任何图层，在地图图层控件中用复选框控制。

地图缩略图控件有助于用户了解主窗口显示的地图区域在全球、全国、全省、全市等范围内的相对位置，也称为鹰眼图。Leaflet提供了好几种地图缩略图控件，本文介绍其中一个最常用控件，即插件Leaflet.MiniMap。