介绍
Leaflet-Realtime是一个基于Leaflet地图库的npm包，可以让我们轻松地在地图上显示实时数据。它支持websocket、ajax等多种数据源，可用于实时交通、气象、物流等领域。
安装
使用npm安装：
npm install leaflet-realtime
或者使用yarn安装：
yarn add leaflet-realtime
使用方法
引入
首先需要引入Leaflet和Leaflet-Realtime：
import L from 'leaflet'; import 'leaflet-realtime';
创建地图
创建一个地图实例：
const map = L.map('map').setView([51.505, -0.09], 13);添加图层
添加一个实时图层：
const layer = L.realtime({
url: 'https://wanderdrone.appspot.com/',
crossOrigin: true,
type: 'json'
}, {
interval: 3 * 1000
}).addTo(map);这个实时图层从https://wanderdrone.appspot.com/获取实时位置数据，并且每3秒钟更新一次。
自定义Marker
为了在地图上展示实时数据，我们需要自定义Marker（标记）。Marker可以根据数据的不同属性来改变样式，比如大小、颜色等。
-- -------------------- ---- -------
----- ------------- - ------------
---- ----------------------------------
----- -------
--------- - - ----
-- -
------------- -------- --------- ------- -
------ ---------------- -
----- --------
-------- ------------------------
--------- ---- ----
----------- ---- ----
------------ --- ----
--
---
-
--------------这里我们从http://localhost:3000/api/items获取数据，然后根据不同数据设置Marker的图标。
自定义Popup
在Marker上添加Popup（弹出框）可以让地图更加交互和友好。Popup可以显示更多详细信息，比如名称、地址等。
-- -------------------- ---- -------
----- ------------- - ------------
---- ----------------------------------
----- -------
--------- - - ----
-- -
------------- -------- --------- ------- -
------ ---------------- -
----- --------
-------- ------------------------
--------- ---- ----
----------- ---- ----
------------ --- ----
--
--------------
-----
-----------------------------------
------------------------------------
------
---
-
--------------这里我们使用bindPopup方法来添加Popup，并在Popup中显示数据的名称和地址。
自定义样式
我们也可以自定义Marker和Popup的样式以及行为。比如当鼠标移动到Marker上时，让它放大，并显示Popup。当鼠标移开时，让Marker恢复原状。
-- -------------------- ---- -------
----- ------------- - ------------
---- ----------------------------------
----- -------
--------- - - ----
-- -
------------- -------- --------- ------- -
----- ------ - ---------------- -
----- --------
-------- ------------------------
--------- ---- ----
----------- ---- ----
------------ --- ----
--
---
---------------------- -------- --- -
---------------------
-------- ------------------------
--------- ---- ----
----------- ---- ----
------------ --- ----
----
-----------------
---
--------------------- -------- --- -
---------------------
-------- ------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------