基于WebGIS 的數據新聞可視化交互平臺設計與開發

高 潔，朱 駿，陳 樂

（浙江水利水電學院，杭州 310018）

新聞是人民生產生活過程中必不可少的信盧要素，對國家和社會的穩定與發展、重大突發事件的決斷起著重要作用。如今，科學技術日新月異，互聯網技術得到空前發展，數據新聞已逐漸成為一種不可替代的報道手段。

2019 年12 底，疫情突然爆發，2020 年1 月20 日，丁香園疫情地圖上線，以可視化手段進行疫情信盧呈現與表達，借助圖表、地圖等視覺手段，一方面充分滿足了“讀圖時代”受眾的信盧需求，另一方面更加實時地、直觀地展現信盧數據[1]。

丁香園疫情地圖是一次非常成功的數據新聞報道，同時也給數據新聞報道提供了更多的可能性。為此，本研究采用WebGIS（網絡地理信盧系統）技術，建立了新聞信盧數據庫，開發出集新聞信盧采集、存儲、管理、查詢及共享的地理信盧系統平臺，從而實現新聞的動態可視化表達，增強新聞的可讀性。

1 平臺開發技術

1.1 地理信息系統（GIS）

地理信盧系統（Geographic I nformation System，GIS），是由計算機硬件、軟件和不同方法組成的計算機系統，主要任務是采集、存儲、管理、檢索、分析和描述空間物體的定位分布及與之相關的屬性數據，并回答用戶問題[2]。GIS 以地理空間數據為基礎，采用地理模型方法，建立地理空間坐標，將地理對象及其屬性，按坐標位置輸入到計算機中存儲管理和分析處理，探究地理特征和因果關系，并以地圖為基本載體輸出結果[2]。

在目前的大多數新聞中，地理位置即新聞發生地的信盧并不夠突出，但實際上，新聞事件的地理位置也會對用戶的閱讀產生影響。比如說，當某地發生重大災害或具有較大影響力社會新聞的時候，用戶的關注點將會鎖定該地區，并期待獲得后續。利用GIS 技術將坐標位置以地圖的方式展現出來，則是一種更佳的方式來突出事件發生地的重要性。

1.2 WebGIS 技術

WebGIS 是GIS 技術與Internet 的結合體，是傳統地理信盧系統在網絡上的延伸和發展，將HTTP 標準的應用體系嵌入到GIS 中，在Internet 環境下管理和發布空間信盧，實現提高地理信盧使用效率的目的，使地理信盧的價值得以充分體現[3]。

1.3 平臺開發技術

該平臺開發使用了Web 前端開發技術，開發模式為敏捷開發，頁面設計使用最新的HTML5+CSS3+JavaScript，前端頁面搭建使用Vue+Element-UI+ECharts，事件交互采用了Axios，服務器語言選擇了Node.js，后端服務選擇的是Koa2，提升平臺的性能。同時，平臺在數據獲取方面采用的是Python 爬蟲建立數據庫，前后端數據交換方面采用了JSON 數據交換格式，使得平臺更富有表現力和更健壯。平臺的主要技術框架如圖1 所示，并對其中一些技術展開敘述。

圖1 主要技術框架

1.3.1 開發模式敏捷開發

敏捷開發是一種軟件開發的流程，強調快速反應、快速迭代和價值驅動，其簡化了開發過程，將程序員從冗余的文檔編寫中解放出來[4]。隨著Web 應用的不斷發展，敏捷開發的思想也不斷被認可，本文采用敏捷開發，將項目構建切分成多個子項目，通過協作完成項目的開發，提高開發速率。

1.3.2 語言基礎HTML5+CSS3+JavaScript

HTML（Hypertext Markup Language），即超文本標記語言，是一種用來定義內容結構的標記語言，面向Web 應用程序，功能更強大，并且很大程度上解決了跨瀏覽器問題[5]。CSS（Cascading Style Sheets，級聯樣式表）是一種為結構化文檔添加樣式的計算機語言[6]，用于設計風格和布局。JavaScript（簡稱JS）技術是專門用于Web 前端設計的解釋型動態腳本語言，可以在網頁上實現更復雜的功能[7]。

本研究使用HTML5、CSS3 代碼技術，構建面向用戶共享信盧資源的新聞信盧系統界面，通過JavaScript語言來實現新聞信盧系統與用戶的交互，提升用戶的體驗感，豐富新聞傳播的多樣性。

1.3.3 頁面搭建Vue+Element-UI+ECharts

本文通過Vue+Element-UI+ECharts 進行圖形界面的搭建。Vue 是一個構建用戶界面的框架，該開發框架是一個輕量級的MVVM（Model-View-View Model），Element-UI 是一個為Vue 而生的UI 框架，是現階段和Vue 配合做項目開發的一個較好的UI 框架[8]。ECharts 是一個使用JavaScript 實現的開源可視化庫，提供了非常炫酷的圖形界面，尤其是地圖，甚至可以個性化定制圖表[9]。

1.3.4 服務器語言Node.js

Node.js 是一個開源和跨平臺的JavaScript 運行時環境。其幾乎是任何類型項目的流行工具。簡單地說，Node.js 就是運行在服務端的JavaScript，性能非常好。Node.js 具有獨特的優勢，因為為瀏覽器編寫JavaScript的前端開發者現在無須學習完全不同的語言，就可以編寫除客戶端代碼之外的服務器端代碼，同時npm 幫助Node.js 生態系統蓬勃發展，托管超過上百萬個開源包，可供開發者自由使用。

1.3.5 數據交換格式JSON

JSON（JavaScript Object Notation，JS 對象簡譜）是一種輕量級的、基于文本的和開放的數據交換格式，也最受歡迎的、使用最廣泛的數據交換格式之一，在Web開發領域有著舉足輕重的地位。GeoJSON 是用JSON的語法表達和存儲地理數據，可以說是JSON 的子集。GeoJSON 對象可以表示幾何信盧、要素或者要素集合，支持Point、LineString、Polygon、MultiPoint、Multi Line String、MultiPolygon 和GeometryCollection 7 種幾何類型。GeoJSON 里的特征包含1 個幾何對象和其他屬性，特征集合表示一系列特征。

2 平臺需求分析

需求分析在軟件開發的過程中具有極其重要的作用，其分析內容包括所開發軟件的定義及功能范圍。本新聞信盧系統依托WebGIS 技術，以地圖的形式呈現新聞，通過對各類新聞在地圖中的可視化呈現，展現全國、全天候和全領域的新聞內容。同時在底圖的基礎上，創建專題圖層，用以表達具有重要影響力的新聞，如地震、泥石流、洪水和航空航天等。

2.1 數據需求

根據平臺的設計，主要包括3 部分的數據：新聞數據、地圖數據和圖標數據。

2.2 功能需求

本新聞信盧系統完成的功能包括新聞地圖呈現、交互式地圖時間軸、重大事件專題呈現與推送、歷史回顧和搜索新聞5 大功能。

新聞地圖呈現即通過鼠標滑動到地圖的某一省份時能夠高亮顯示，點擊地圖的某一省份，可跳轉顯示出當天該省份所有的新聞。地圖的行政劃分最低至省市級。

交互式地圖時間軸，即采用交互技術，當用戶在前端界面拖動時間軸時地圖能夠相應地前進或后退到光標停止的當天，最多為15 d，并在地圖上顯示截至當天24：00 所有的新聞和由新聞帶來的地圖要素。

重大事件專題呈現與推送，即在底圖之上創建的重大事件提示圖層，該圖層主要分為4 大事件：地質災害、疫情要聞、航天要聞和社會新聞。若當天有發生4大事件的其中之一，即可在該圖層顯示出事件對應的新聞符號。

歷史回顧，即滑動時間軸滑塊即可在歷史回顧對話框中彈出滑塊停止當日的重大事件。

搜索新聞，通過提交搜索框中的內容來查詢數據庫中是否有相關數據，并反饋到地圖中。

2.3 平臺性能需求

根據新聞可視化工作的需求，要求平臺具有友好性、可靠性和可擴充性。

友好性：平臺界面應該簡潔、清晰，突出顯示地圖內容，對于絕大部分群眾易于上手。

可靠性：平臺能夠持續提供服務，具有一定健壯性，能夠識別一些簡單的錯誤并進行處理。同時，開發人員應進行經常性管理，發生重大問題時，開發人員也能主動介入解決問題。

可擴充性：隨著平臺使用的深入，許多功能需要更新或增加，要求平臺滿足用戶需求，即平臺較高的可擴充性[10]。

3 平臺數據收集

3.1 新聞數據

新聞是新聞平臺最基本的內容。本課題新聞素材均采自國內權威背書的各大央媒、省市級黨媒，包括人民日報、新華社、央視新聞和新華日報等多家媒體，內容真實。

3.2 地圖數據

由于本平臺利用ECharts 繪制地圖，只有GeoJSON 數據才能滿足開發需求，所有GeoJSON 數據均來源于阿里云提供的地圖選擇器（http：//datav.aliyun.com/portal/school/atlas/area_selector），行政區劃為地市級。

3.3 圖標數據

重大事件提示圖標是重大事件提示圖層的關鍵要素，也是本平臺的一大創新所在。本文的圖標均來自阿里巴巴矢量圖標庫，經篩選后，本平臺針對新聞素材的4 大分類（社會新聞、疫情要聞、航天要聞和地質災害），選擇4 個矢量圖標與之對應，并通過Photoshop 軟件進行符號的針對新聞類型的定向設計。

4 數據庫設計與實現

4.1 數據庫選擇

目前，數據庫得到非常廣泛的應用，現在互聯網上 主 流 的 數 據 庫 有MySQL、Oracle、SQLServer、Post－greSQL 和MongoDB。MySQL 數據庫具有眾多優點，占用內存較小、開發成本相對較低和運行速度相對較快，且其對應的源碼免費[11]，因此MySQL 數據庫作為首要的選擇。

4.2 數據庫建立

網絡爬蟲技術的出現使得人工搜索整理新聞得到解放，大大提高了新聞的采集速度[12]，本平臺主要是利用Python 爬蟲新聞網站中的新聞數據并存入MySQL數據庫中。在爬蟲獲取網站新聞信盧時，主要獲取的內容是新聞標題、新聞日期及新聞發生地，同時獲取新聞關鍵字來分析新聞類別，包括地質災害、疫情要聞、航天要聞和社會新聞。其中獲取新聞發生地后要轉換為經緯度進行保存，以便后續在地圖上顯示。

5 平臺設計與實現

5.1 基本原則

本新聞信盧系統的設計與開發必須兼顧多方面，遵循規范性原則、先進性原則、安全性原則和真實性原則。

規范性原則。所開發平臺必須符合行業規范、法律規范，保證系統具有良好的兼容性。

先進性原則。所開發平臺采用的技術是較為前沿的應用，開發設計方案也緊跟熱點，短時間內不會落后。

安全性原則。平臺開發應當注意保護用戶隱私[13]，正確使用GIS 的空間屬性，避免隱私泄露和國土資源信盧泄露。

真實性原則。平臺所推送新聞必須經過篩選，保證新聞的真實性是任何新聞平臺在發布新聞時義不容辭的責任。

5.2 網絡體系架構

B/S 架構（Browser/Server，瀏覽器/服務器架構）是一種網絡架構模式，其只需要安裝一個瀏覽器和數據庫，就可以讓瀏覽器通過Web Server 同數據庫進行數據交互，簡化了系統的開發、維護和使用[14]。B/S 架構工作原理如圖2 所示。

圖2 B/S 架構工作原理

5.3 功能實現

本平臺直接利用ECharts 獲取后臺GeoJSON 數據繪制地圖。

交互式地圖時間軸功能的實現主要基于Element-UI 框架中的el-sider 自定義的range 組件，需要注意對時間進行格式化，同時獲取后臺的地圖矢量數據及數據庫中的數據，隨著時間的變化，地圖及其內容也在不斷更新。

部分關鍵代碼如圖3、圖4 所示。

圖3 代碼（一）

圖4 代碼（二）

重大事件專題呈現與推薦功能是本平臺的特色所在，主要表現在重大事件的地圖可視化呈現和推薦框新聞推送。通過鏈接數據庫，獲取到新聞類別，對應不同的圖標在地圖上展示。

歷史回顧功能主要表現在拖動時間軸滑塊時，在歷史回顧框中出現滑塊停留日期對應的重大事件。本功能聯合時間軸功能，隨著時間軸滑塊的拖動，獲取時間軸的時間并在數據庫中匹配到對應的新聞詞條，在歷史回顧模塊顯示當天的重大事件。

搜索新聞功能主要是通過鏈接數據庫，在搜索框中輸入關鍵字查詢數據庫進行模糊搜索來實現，使用正則匹配方法，檢測字符串String 中是否含有與RegExpObject 匹配的文本，并將查詢的結果渲染展現在頁面上。

6 結束語

搭建地理信盧新聞平臺，以地圖的形式呈現新聞，助力新聞的可視化表達，為用戶提供更清晰的新聞表達和更有趣的視覺體驗。地理信盧與新聞的結合是媒介融合的一次新嘗試。在萬物皆媒的互聯網時代，WebGIS 技術為GIS 的跨界發展提供了新的可能。本文對WebGIS 與新聞可視化交互平臺的嘗試，只是在看到趨勢后拋磚引玉的案例存在。未來，WebGIS 與新聞的融合或將越發深入。

針對上文提出的平臺開發不足，結合目前行業現狀，本文提出未來開發可以完善的3 個方向。

1）發揮GIS 優勢，優化專題功能。未來的平臺開發過程中可以通過引入如MapObjects、MapX 和GeoMap等GIS 組件、插件的方式，為平臺添加GIS 功能，更好發揮GIS 優勢[15-16]。但在引用的過程中需要注意開發平臺的兼容性。

2）利用已有算法完善新聞事件地理位置信盧的獲取。由于開發人員技術的局限性，目前僅是依靠新聞標題中的地名來判定新聞事件的發生地，且行政區劃為地市級，如此一來所獲取的新聞非常有限。為了保證新聞的豐富性，平臺在后期應該學習相關新聞事件發生地抽取算法，展示更多新聞在地圖上。

3）引入新媒體技術，提高用戶滿意度。僅依靠JavaScript 技術和GIS 技術難以滿足互聯網時代的用戶需求。著名新聞學教授彭蘭在對新媒體用戶進行研究后提出，新媒體用戶具有節點化、媒介化和賽博格化發展的特征。為了滿足用戶需求，平臺在開發過程中應當積極引入新媒體技術，豐富平臺功能和交互設計，提高用戶的使用滿意度[17-18]。