WebGIS入门实战（06）：基于Leaflet 台风实时路径实现(实战篇) （持续更新中）

实战：基于Leaflet 台风实时路径实现

上一篇简单介绍了几个地图JS库实现简单的DEMO后，本章内容将渐进实现一个模拟台风实时路径效果的Demo。这个demo使用什么JS库都可以实现，以下我将使用 leaflet.js 去实现，感兴趣的同学可以使用其他JS库模仿实现一样的功能效果。

Demo功能介绍：

·地图图层切换（基础底图&影像图）

·台风路径绘制及动态绘制路径效果。

·台风图标Marker及气泡信息弹窗

先看最终效果：

下边来一步步实现如图效果的代码过程。

地图图层切换实现

上一篇文章的介绍的 leaflet demo 加载了一个地图地图和实现了折线图的绘制，我们来增强一下效果。

L.Map 接口参数可以接收个 layers 属性，用来在地图初始化时加载多个图层。我们先定义好两个图层：影像图 和 街道图 图层：

以上id属性mapbox.satellite意思是加载卫星影像的切片图层的意思，你可以更换为 mapbox.grayscale 看效果，就是加载grayscale图层了。

然后将图层加载到地图实例上：

这样还不行，地图初始化已经加载了两个图层，我们还需要加一个图层切换按钮来控制切换不同图层。这里可以自定义图层按钮效果，为了演示方便，使用官方的 layers-control 来实现即可。比较简单，见下面代码：

我们来看截图效果：

地图右下角版权信息自定义

我们平时浏览地图时，细心的你会发现，右下角一般都有版权信息，这个信息也是可以自定义的（不过商业使用要注释版权问题，这里只是学习演示）。

版权信息是加载再图层上的，每个图层都可以自定义不同的版权信息。Leaflet中，通L.tileLayer的第三个属性就是版权信息参数，接收的是html字符串或者文本。

然后定义图层的时候把版权信息传入即可：

最终效果：

台风路径绘制及动态绘制路径效果

(一)、获取台风路径点数据

说明：本文章是为了实现demo效果，数据获取方面，正式的开发中，是通过接口调用后端访问数据的。demo演示时，将会写死点数据。

文章demo数据在源码目录下的./data.js文件中，数据量有点大，直接引入到demo页面加载，这里就不粘贴出来了。数据获取是从浙江水利厅台风实时系统获取的，有想自己获取数据的同学，可以打开网站，打开调试工具后，network tab下看对应接口的请求日记返回值即可找到台风信息的坐标点数据。

从网站上获取台风路径数据格式如图：

台风数据格式

（二）、根据点数据绘制折线

之前的简单demo我们也演示过简单折线的绘制，和台风数据折线实际没多大区别，可以简单的认为就是坐标点多了一些而已。

我们在编码之前要多思考，比如实现台风路径绘制，调用接口绘制路线，先分析台风数据格式的特点，再了解Leaflet polyline 方法的参数特点，如果不一致，必然是需要程序去转换一下。

L.polyline 的参数为一个二维数据，也就是 [[经度，纬度],[经度,纬度]] 的格式。和获取到的台风路径json格式有出入，所以我们需要进行一次数据转换。

数据转换代码：

效果截图：

台风折线图

（三）、让折线“动”起来，实现动态绘制路线

我们已经实现了静态折线的绘制，为了模拟台风路径行走的效果，需要动态的绘制出折线，实现模拟台风“行走”。最简单的思路就是，通过一组一组递增的折线点，绘制折线，最新的折线绘制之前，清楚之前的折线图层，时间间隔控制在1s左右，这样就相当于折线动起来了。

代码里边一般都很详细的说明了每个步骤的意思（照顾新人）

最后的效果：

会动的折线哦

台风眼图标&气泡信息弹窗

动态的台风路线以及实现了，然后还差一个台风眼marker效果，并且支持popup弹窗信息展示，展示台风的风速，位置具体信息。

（一）、Marker效果实现

我们先一步步来，介绍静态的 Marker图标 定位如何实现。Leaflet 提供了一个 L.Marker 图层，它继承于Layer，支持点击和拖拽以及自定义图标。

简单使用：

自定义图标可以通过 L.Icon 来实现，我们找到一个类似台风眼的图标，然后使用marker定位到台风路线上：

marker自定义图标

（二）气泡信息弹窗

通过 L.Popup 来实现点击marker后弹窗信息，我们来实现点击气泡来展示台风信息弹窗信息实现有两种方式，一种是使用Map对象提供的bindPopup方法，一种是L.popup()。下边演示使用bingPopup方式，在创建完marker后，链式创建popup气泡弹窗信息窗口。

我们动态的获取台风信息，创建popup弹窗，如图：

信息弹窗

到现在，就实现了想要的效果了。但是为了更逼真，或者说和台风实时系统一致的效果，可以把marker动态绘制，和折线点一样的原理。

我们修改之前的animateDrawLine()方法，使得在动态绘制折线的时候，也动态绘制marker，最后一个折线点绘制marker后，并展示Popup弹窗信息。

最终效果：

本章小结

本章实现台风路径Demo，分解功能点：地图图层，折线、动态折线绘制、Marker，动态Marker、Popup弹窗信息，并逐个实现出来，为了让读者可以熟悉API功能，以及用这些简单的API能做出各种自己想要的效果，建议初学者自己举一反三，实现其他应用效果，以便熟悉了解API，并认识到如何去开发一个功能全面一些的Demo。或者使用非Leaflet的地图JS库去实现本Demo效果。不要觉得看懂了而不动手，也不要看不懂而不动手，这样就学不好编程开发。

源码地址：gis616（备注源码）

（持续更新中.....）