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

作者: brandonxiang | 来源:发表于2016-05-05 10:59 被阅读2902次

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的插件,敬请期待。

流程图

源码分析

数据的展示上采用了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>'
                    })
                });

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

总结

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

界面

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

微信公众号

相关文章

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

    github地址 wandergis/hospital-viz 引言 莆田系医院一事可以说成为了最近的一个热门话题...

  • 《生词》

    《莆田系》莆田系,指莆田人所辖医院集合的简称,莆田系在全国各地开设私立医院,并逐步抱团形成一定的组织规模。这些医院...

  • “莆田系”医院,莆田系医院

    文/景萧 本文纯属虚构,没有文笔,只是单纯的叙事。 一 “莆田系医院?” 最近有条新闻引起热议,某患者在莆田系医院...

  • 从民营医院发展看看医患关系的问题

    说到民营医院肯定先说莆田系,莆田系医院我看到一个暗访的视频,莆田系一个医院的院长对朋友聊,说到只要进了我医院的,我...

  • 黑心医院开发总结

    莆田系医院作的恶已经人尽皆知,为了让家人远离附近的莆田系医院,我特意开发了一款APP供大家使用,现已上架AppSt...

  • 莆田系医院

    已经无数次希望与失望之间徘徊了,就这样莫名的抱着幻想,我应该是个病人,好无奈的希望能够好起来,我不能理性的思考这件...

  • R数据可视化-动态、交互式地图神器(三)符号标记

    Leaflet/LeafletCN 系列 R数据可视化-动态、交互式地图神器(一)概述与实现R数据可视化-动态、交...

  • Leaflet 笔记一:简单入门

    Leaflet 笔记一:简单入门 Leaflet可以说在我的博客当中应该出现了很多次,它首先是空间数据可视化的“佼...

  • 后来的计划

    今天在寝室待了一天。也许是因为腰痛,也许是就是懒。 莆田系的医院真是无孔不入,武警医院99%都是莆田系。之前还不信...

  • 转载:莆田系医院

    头条搜索打开 大批“莆式”医院被定为黑恶势力,医疗欺诈已被列为整治重点 健识局 11个月前1.4万评论 作者:Ch...

网友评论

  • 0d601f651140:我想说有人打赏你没?
    brandonxiang:@Nick_Cai 你快打赏我啊,森哥
  • 傅简书:用百度的echarts做一个莆田系地图😂
    brandonxiang:@Michael_Fu echart更多是做 线状图,等值线图,如果做等值线图不用echart也可以。做散点图也不错其实,wanderGIS这哥们有个项目将leaflet和echart结合在一起。[wandergis/leaflet-echarts3](https://github.com/wandergis/leaflet-echarts3)
  • d778e83d24f8:总感觉是一种嘲讽 :joy:
    brandonxiang:@我纯洁 没有嘲讽啊。

本文标题:Leaflet在“莆田系医院”数据可视化的使用

本文链接:https://www.haomeiwen.com/subject/dlrdrttx.html