作者 | James Graham
来源 | Medium
编辑 | 代码医生团队
最近参与了一个涉及流媒体信用卡交易数据并根据风险概率对其进行分类的项目。在此基础上，想探索可视化数据的选项。决定专注于地理方面，因为它是尝试识别欺诈性交易时的关键组成部分。
代码：
https://github.com/jgraham0325/streaming-visualization
现场演示：
https://streaming-visualisation.appspot.com/
用例
能够可视化流式地理空间数据可以解决实际问题的原因有很多。从本质上讲，这些归结为在事件发生后很快做出决定的情况。它可以是负责做出决策的人或者使过程自动化的机器学习算法。
一些例子：
waze危险
联网汽车：随着汽车中传感器数量的增加及其对互联网的访问，可以在驾驶员成为危险之前提醒驾驶员注意道路上的危险。例如刚刚在前方道路上被炸毁的一棵树。
http://www.waze.com/
Azure IoT连接工厂
物联网：通过可视化潜在问题的位置并找到最接近的备件供应，可以增强预测性维护。它还可以识别不明显的模式或集群。
https://azure.microsoft.com/en-gb/features/iot-accelerators/connected-factory/
FlightRadar24
航班跟踪：显示实时航班信息有助于预测延误，处理不规则操作和分析路线效率。
https://www.flightradar24.com/
实时火灾隐患（Weatherbug）
减灾：在火灾等危险事件发生之前和之后收集可操作的GIS数据，可以帮助人们避免危险情况。
http://www.weatherbug.com/
技术选择
有许多商业产品能够近乎实时地显示地理空间数据。
商业产品包括
1.ArcGIS：ESRI的基于桌面或云的产品，几十年来一直是商业地图应用的主导力量。它功能强大但许可证成本昂贵。
https://www.esri.com/arcgis-blog/products/arcgis-pro/real-time/real-time-data-arcgis-pro/
2.Cesium：特别擅长可视化3D数据。它被FlightRadar24等网站使用，每月访问量达4500万次。每月根据存储和使用情况收费。
https://cesiumjs.org/demos/
3.Kinetica：独特的卖点是GIS与AI / ML的结合。
https://www.kinetica.com/products/streaming-analytics/
4.Zoomdata：以流媒体可视化功能而闻名，但不是特别适用于GIS。能够在各种图表中显示数据，并将它们与地图上的图表相结合。
https://www.zoomdata.com/master-class/streaming-analytics-and-internet-things/geospatial-data-visualization-demo/
还有许多JavaScript API可用于更多DIY方法。
Javascript API
1.Leaflet.js：简单，开源，并提供了一个很好的插件库（包括Mapbox JS）。
https://leafletjs.com/
2.OpenLayers：功能强大，开源但比其他更复杂。
https://openlayers.org/
3.Mapbox GL：适用于使用WebGL显示复杂数据层。
https://docs.mapbox.com/mapbox-gl-js/api/
4.Google Maps JS API：易于使用，但要求付费许可超过阈值。
https://developers.google.com/maps/documentation/javascript/tutorial
5.Three.js：使用WebGL在Web浏览器中创建3D图形。
https://threejs.org/
决定：使用Leaflet.js，因为它易于使用，灵活且不会产生任何许可证费用。Node.js服务器与Socket.io库一起用于将实时事件推送到客户端浏览器中的地图。还实现了一些Three.js可视化以进行比较。
高级架构
性能
一次在地图上显示数十万个点在技术上具有挑战性，并且可能不是很有用。人们发现很难以原始格式解释这些数据。
为了解决这些问题，通常使用热图或点集合来聚合点。通过一些试验和错误，发现这些层的性能可以根据它们的实现而有很大不同。过滤器也很有用，在信用卡交易的情况下，只显示高风险交易。这使得信用卡交易的典型数量从890万/小时（基于英国平均每年924万）降至840 /小时（基于平均欺诈率0.08％并假设9/10高风险交易是误报）
作为PoC的一部分，实现了以下层：
- Three.js（WebGL）：这是资源最密集的选项，因为它渲染了世界的3D地图。使其具有高效性的唯一方法是将同时显示的点数限制为小于100.使用2D WebGL地图可以显示数千个点但分辨率太低而无法在实践中使用。
使用three.js的3D WebGL热图。闪烁指示新交易
使用three.js的2D WebGL热图
- Leaflet.heat插件：这可以在不到1秒的时间内下载并渲染超过10K的点数。它对于识别热点很有用，但不允许用户缩小以查看各个点，这对于识别潜在的欺诈通常是必不可少的。
热图有5,000个高风险交易。
- Leaflet MarkerCluster插件：这是最常用的插件，用于对点靠近的点进行分组，使其在屏幕上可管理。但是，渲染10K点需要2-3秒，并且由于每次添加数据点时都不能很好地处理流数据，因此需要刷新图层。将此替换为下面提到的PruneCluster实现。
使用Leaflet Marker Cluster插件的高风险交易的聚集点
单个位置的15个高风险交易示例。使用MarkerCluster，由于整个图层刷新，新数据会导致“蜘蛛”收缩到单个点
- Leaflet PruneCluster插件：这被发现是性能最佳的解决方案，并且与流数据配合良好。它也是为物联网应用而设计的，现有点可能经常改变位置。在美观上它与Marker Cluster插件非常相似。
PruneCluster的性能统计数据如下所示
基于Leaflet PruneCluster插件的地图上渲染点的指示性能
挑战和经验教训
- 事件缓存： Redis Pub / Sub使得将新事件推送到客户端变得简单，但是在客户端首次连接时不提供检索最近先前事件的选项。在Redis或时间序列模块中使用排序集可以允许这样做，但会增加额外的复杂性。对于此PoC，在Javascript阵列中的服务器上维护一个简单的缓存，允许新连接的客户端根据最大阈值加载先前的事件。
- 历史分析：需要引入滑块来控制显示的时间段。使用JQuery和Leaflet.js可以很容易地实现这一点。
- 街景：是调查潜在风险区域的有用工具。虽然Google Maps API与此功能的集成度最高，但可以将其构建到几乎所有基于浏览器的地图中，如此PoC所示。
结论
地理空间可视化数据可以解锁可能会错过的有价值的见解。只需极少的努力和慷慨的开源社区，就可以创建强大的可视化而无需花一分钱！
