github地址 wandergis/hospital-viz
引言
莆田系医院一事可以说成为了最近的一个热门话题。除了讨论百度的作恶多端外，我们还可以学到很多新的关于数据可视化的知识。在这里，我引用wandergis/hospital-viz的这个“莆田系医院”数据可视化的项目，浅谈一下Leaflet.js在空间数据展示的使用。
@wandergis是我在github上follow的一个同行，他在5月3号建立这么一个关于“莆田系医院”的Repositories。当时，我想是不是会运用些爬虫技术将所有“莆田系医院”的位置数据获取，但是我还是太天真。直至昨天我看了一下源码，整个项目还算是简单清晰，有很多数据可视化的知识点值得入门者学习。
流程
整个项目的流程非常简单，数据源来自两处。
数据可以通过脚本解析成包含医院名称的 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: '<div>' + feature.properties.name + '</div>'
})
});
此后，还有很多事件如click，mouseover和 mouseout，以及Leaflet.heat的运用，不在这里一一赘述。感兴趣的同学可以仔细看看源码。
总结
wandergis/hospital-viz可以说非常有趣，简洁使用，支持移动端。它很好地结合了时下的需求，让很多百姓从中得到帮助。同时，这项目还是值得入门GISer学习的，如果哪位大神将“莆田系医院”的位置数据的爬虫搭建好就更完美。
转载，请表明出处。总目录Awesome GIS
