Leaflet在“莆田系医院”数据可视化的使用

github地址 wandergis/hospital-viz

引言

莆田系医院一事可以说成为了最近的一个热门话题。除了讨论百度的作恶多端外，我们还可以学到很多新的关于数据可视化的知识。在这里，我引用wandergis/hospital-viz的这个“莆田系医院”数据可视化的项目，浅谈一下Leaflet.js在空间数据展示的使用。

莆田系医院（图片来自百度）

@wandergis是我在github上follow的一个同行，他在5月3号建立这么一个关于“莆田系医院”的Repositories。当时，我想是不是会运用些爬虫技术将所有“莆田系医院”的位置数据获取，但是我还是太天真。直至昨天我看了一下源码，整个项目还算是简单清晰，有很多数据可视化的知识点值得入门者学习。

流程

整个项目的流程非常简单，数据源来自两处。

• 来源一：凤凰新闻网
• 来源二：langhua9527/Hospital

数据可以通过脚本解析成包含医院名称的 hospital.json，然后通过node.js执行数据处理的脚本 getLocation.js 去获取对应的坐标信息，这里调用了高德地图的地理编码API，并最终生成 hospital.geojson。结合 GeoJson深度入门 ，可见Geojson在WebGIS中使用的频率极其高。剩下的工作即是将“莆田系医院”位置数据在地图中展示。此处，还有数位热心Contributors提供功能，其中包括我。我考虑将属性搜索的功能做出一个leaflet的插件，敬请期待。

• @kunkun12 增加查看附近功能
• @brandonxiang 添加搜索功能

流程图

源码分析

数据的展示上采用了L.geoJson实现，同时运用设置pointToLayer针对每个数据进行定制。

hospitalLayer = L.geoJson(data);

这里使用了L.circleMarker（圆形图标），并设置了半径颜色radius，厚度weight，透明度opacity等属性。

 var marker = L.circleMarker(latlng, {
                    radius: 5,
                    color: '#fff',
                    fill: true,
                    weight: 2,
                    opacity: 1,
                    fillColor: '#ff1c2a',
                    fillOpacity: 1
                });

针对医院的名称属性专门定制图标，即地图图标。icon的属性可以用L.divIcon()去替换，其中不设置icon大小，设置'label'为类名，以及用html模板来自定义整个图标。这让用户更直观看到医院名称。

 var label = L.marker(latlng, {
                    icon: L.divIcon({
                        iconSize: null,
                        className: 'label',
                        html: '
' + feature.properties.name + '
'
                    })
                });

此后，还有很多事件如click，mouseover和 mouseout，以及Leaflet.heat的运用，不在这里一一赘述。感兴趣的同学可以仔细看看源码。

总结

wandergis/hospital-viz可以说非常有趣，简洁使用，支持移动端。它很好地结合了时下的需求，让很多百姓从中得到帮助。同时，这项目还是值得入门GISer学习的，如果哪位大神将“莆田系医院”的位置数据的爬虫搭建好就更完美。

界面

转载，请表明出处。总目录Awesome GIS

微信公众号