github地址 wandergis/hospital-viz

引言

莆田系醫(yī)院一事可以說成為了最近的一個(gè)熱門話題。除了討論百度的作惡多端外，我們還可以學(xué)到很多新的關(guān)于數(shù)據(jù)可視化的知識(shí)。在這里，我引用wandergis/hospital-viz的這個(gè)“莆田系醫(yī)院”數(shù)據(jù)可視化的項(xiàng)目，淺談一下Leaflet.js在空間數(shù)據(jù)展示的使用。

莆田系醫(yī)院（圖片來自百度）

@wandergis是我在github上follow的一個(gè)同行，他在5月3號(hào)建立這么一個(gè)關(guān)于“莆田系醫(yī)院”的Repositories。當(dāng)時(shí)，我想是不是會(huì)運(yùn)用些爬蟲技術(shù)將所有“莆田系醫(yī)院”的位置數(shù)據(jù)獲取，但是我還是太天真。直至昨天我看了一下源碼，整個(gè)項(xiàng)目還算是簡單清晰，有很多數(shù)據(jù)可視化的知識(shí)點(diǎn)值得入門者學(xué)習(xí)。

流程

整個(gè)項(xiàng)目的流程非常簡單，數(shù)據(jù)源來自兩處。

• 來源一：鳳凰新聞網(wǎng)
• 來源二：langhua9527/Hospital

數(shù)據(jù)可以通過腳本解析成包含醫(yī)院名稱的 hospital.json，然后通過node.js執(zhí)行數(shù)據(jù)處理的腳本 getLocation.js 去獲取對(duì)應(yīng)的坐標(biāo)信息，這里調(diào)用了高德地圖的地理編碼API，并最終生成 hospital.geojson。結(jié)合 GeoJson深度入門 ，可見Geojson在WebGIS中使用的頻率極其高。剩下的工作即是將“莆田系醫(yī)院”位置數(shù)據(jù)在地圖中展示。此處，還有數(shù)位熱心Contributors提供功能，其中包括我。我考慮將屬性搜索的功能做出一個(gè)leaflet的插件，敬請(qǐng)期待。

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

流程圖

源碼分析

數(shù)據(jù)的展示上采用了L.geoJson實(shí)現(xiàn)，同時(shí)運(yùn)用設(shè)置pointToLayer針對(duì)每個(gè)數(shù)據(jù)進(jìn)行定制。

hospitalLayer = L.geoJson(data);

這里使用了L.circleMarker（圓形圖標(biāo)），并設(shè)置了半徑顏色radius，厚度weight，透明度opacity等屬性。

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

針對(duì)醫(yī)院的名稱屬性專門定制圖標(biāo)，即地圖圖標(biāo)。icon的屬性可以用L.divIcon()去替換，其中不設(shè)置icon大小，設(shè)置'label'為類名，以及用html模板來自定義整個(gè)圖標(biāo)。這讓用戶更直觀看到醫(yī)院名稱。

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

此后，還有很多事件如click，mouseover和 mouseout，以及Leaflet.heat的運(yùn)用，不在這里一一贅述。感興趣的同學(xué)可以仔細(xì)看看源碼。

總結(jié)

wandergis/hospital-viz可以說非常有趣，簡潔使用，支持移動(dòng)端。它很好地結(jié)合了時(shí)下的需求，讓很多百姓從中得到幫助。同時(shí)，這項(xiàng)目還是值得入門GISer學(xué)習(xí)的，如果哪位大神將“莆田系醫(yī)院”的位置數(shù)據(jù)的爬蟲搭建好就更完美。

界面

轉(zhuǎn)載，請(qǐng)表明出處。總目錄Awesome GIS