描述

在大流行期間管理社區(qū)響應(yīng)需要提供信息和教育的工具。幾個(gè)世紀(jì)以來，地圖已經(jīng)做到了這一點(diǎn)，我們現(xiàn)在擁有了驚人的數(shù)字工具，只需點(diǎn)擊幾個(gè)按鈕即可完成。以下是我們的社區(qū)如何應(yīng)對(duì)危機(jī)，并希望其他人可以利用這些工具來構(gòu)建自己的應(yīng)用程序，以幫助通知和動(dòng)員他們的社區(qū)。

第 1 階段 - 啟動(dòng)并運(yùn)行工具。快速地！

那是 2020 年 3 月，新聞似乎每天都在惡化。COVID-19 出現(xiàn)在我們的社區(qū)中，人們正在尋求行動(dòng)。啟動(dòng)了一個(gè)項(xiàng)目，允許來自整個(gè)社區(qū)的志愿者“采用他們居住的街區(qū)”，并在需要的時(shí)候幫助他們的鄰居。一個(gè)名為 ForRichmond 的非營利組織開始了這項(xiàng)工作，它跨越了弗吉尼亞州中部的地理邊界。由于我們也被隔離，該項(xiàng)目將需要依賴數(shù)字工具。那是我自愿提供幫助的地方。

鑒于這種巨大的影響，我建議讓應(yīng)用程序盡快啟動(dòng)并運(yùn)行。雖然我們發(fā)現(xiàn)了一些很棒的應(yīng)用程序可供建模，但我們認(rèn)為開始這項(xiàng)工作的時(shí)間非常寶貴。所以我們從 MVP 模型開始努力，從一個(gè)基本的應(yīng)用程序開始運(yùn)行。

第 1 步 - 建立志愿者表格

我們合作的非營利組織已經(jīng)擁有一個(gè)由 Squarespace 托管的基本靜態(tài)網(wǎng)站。能夠獲得可以用于注冊志愿者并直接加載到 g-sheet 的表單頁面設(shè)置。該頁面隨后被鏈接到他們的主網(wǎng)站，并在多個(gè)社交媒體渠道上共享。

使用 G-Sheets 的在線 Web 表單

?

第 2 步 - 構(gòu)建地圖

這家非營利組織的創(chuàng)始人已經(jīng)聽說過費(fèi)城的一個(gè)類似項(xiàng)目，并且能夠?qū)⑽遗c該項(xiàng)目的負(fù)責(zé)人聯(lián)系起來。這是基于開放街道地圖。根據(jù)研究，我發(fā)現(xiàn)還有一個(gè)名為 Mapbox 的商業(yè)產(chǎn)品，它構(gòu)建了添加到它的工具和服務(wù)。我注冊了該服務(wù)，并能夠使用免費(fèi)套餐快速構(gòu)建地圖。每當(dāng)有人想通過在網(wǎng)站上填寫表格來“采用區(qū)塊”時(shí)，我們就可以在地圖上繪制該區(qū)塊以供參考。然后將該地圖集成到 Squarespace 網(wǎng)站上托管的網(wǎng)頁中，以供其他人查看采用了多少塊的進(jìn)度。

第 3 步（進(jìn)行中）- 手動(dòng)維護(hù)地圖

當(dāng)志愿者在表格中注冊時(shí)，需要有人從 G-sheet 中取出數(shù)據(jù)，然后進(jìn)入 Mapbox 的 Studio 界面并繪制志愿服務(wù)的街道。這需要通過文本和電子郵件進(jìn)行一些協(xié)調(diào)。進(jìn)行更改后，將發(fā)布新版本的地圖，然后將其反映在站點(diǎn)中。這有點(diǎn)手動(dòng)，但很容易啟動(dòng)和運(yùn)行，因此達(dá)到了 MVP 的目標(biāo)。這是一個(gè)供參考的流程。

第 2 階段 - 數(shù)字地圖

在啟動(dòng)并運(yùn)行 MVP 后，我開始著手研究下一個(gè)版本。兩個(gè)關(guān)鍵限制是（1）在某人注冊一個(gè)區(qū)塊的時(shí)間和由于手動(dòng)輸入而出現(xiàn)的時(shí)間之間存在延遲，以及（2）試圖根據(jù)文本輸入字段理解志愿者的意圖。第二點(diǎn)與地理有關(guān)。在經(jīng)典的市中心街道網(wǎng)格中，很容易描述什么是街區(qū)。例如，Main Street 的 3300 街區(qū)，或 K & L Street 之間的 Centre Ave。在郊區(qū)，街區(qū)更加模糊，因?yàn)樗鼈儾蛔裱W(wǎng)格，而是由彎曲的道路和死胡同組成。要解決此問題，需要更改界面，并預(yù)定義用戶可以明確選擇的塊。這是同樣使用 Mapbox 構(gòu)建的新版本的視圖，以及它是如何構(gòu)建的。

采用街區(qū)的互動(dòng)版（采用藍(lán)色街道）

?

第 1 步 - 獲取數(shù)據(jù)

大里士滿都會(huì)區(qū)有超過一百萬人居住在其中，分布在數(shù)百平方英里的土地上。手動(dòng)繪制所有這些數(shù)據(jù)需要數(shù)年時(shí)間，但幸運(yùn)的是，這些信息已經(jīng)存在——只是找出位置的問題。我們的研究表明，當(dāng)?shù)厥姓?dāng)局的 GIS 部門已經(jīng)為其他目的構(gòu)建了數(shù)字地圖，并將其作為公共數(shù)據(jù)發(fā)布。這是里士滿市的其中一個(gè)站點(diǎn)的示例。

來自市政當(dāng)局的 GIS 街道數(shù)據(jù)

?

https://richmond-geo-hub-cor.hub.arcgis.com/maps/edit?content=cor%3A%3Acenterlines

可以下載這些數(shù)據(jù)，然后在其他項(xiàng)目中使用。我下載了我們想要獲取街區(qū)級(jí)別數(shù)據(jù)的我們地區(qū)所有四個(gè)城市的數(shù)據(jù)，因此這使得我們能夠推進(jìn)構(gòu)建所有可以采用的住宅街區(qū)的區(qū)域地圖的新方法。

第 2 步 - 將街道數(shù)據(jù)轉(zhuǎn)換為 GeoJSON

雖然我能夠獲得數(shù)據(jù)版本，但一致的主題是數(shù)據(jù)集的格式與 Mapbox 中所需的格式不同。KML 數(shù)據(jù)是 GIS 部門常用的格式，但需要的是 geojson。這需要轉(zhuǎn)換。這些下載的文件也很大——在 10-100MB 范圍內(nèi)，考慮到我們最終需要使用 API 來加載這些數(shù)據(jù)，我需要保持大小可控。我使用在線實(shí)用程序?qū)?KML 結(jié)構(gòu)轉(zhuǎn)換為更常見的 csv 格式（參見下面的鏈接），然后創(chuàng)建多個(gè)分片，將文件分解成更易于管理的文件（每個(gè)分片大約 5-10MB）。

https://www.convertcsv.com/xml-to-csv.htm

第 3 步 - 過濾和豐富數(shù)據(jù)

接下來是減少數(shù)據(jù)集以獲取我們需要的信息的步驟。這將有助于提高應(yīng)用程序的可用性和性能。這個(gè)應(yīng)用程序只需要住宅街道。我們從市政當(dāng)局收到的地圖用于街道維護(hù)，因此包括高速公路和立交橋之類的東西都被刪除了。這是通過在 AWS 中編寫為 lambda 函數(shù)的數(shù)據(jù)過濾過程來完成的，該函數(shù)可以處理暫存在 S3 存儲(chǔ)桶中的數(shù)據(jù)。

交互式地圖還需要為每個(gè)塊添加屬性。這使得在 Mapbox 中更容易渲染地圖。為了實(shí)現(xiàn)這一點(diǎn)，有一個(gè)布爾值指示該塊是否已被采用，以及誰采用了它。這些屬性在上一步中添加到過濾后的數(shù)據(jù)中，繼續(xù)使用 json 格式。

第 4 步 - 將數(shù)據(jù)加載到 Mapbox

要?jiǎng)?chuàng)建將由瀏覽器呈現(xiàn)的地圖，我需要將數(shù)據(jù)導(dǎo)入 Mapbox 到唯一的數(shù)據(jù)集中。這可以通過 API 或 Studio 界面來完成，我選擇了后者。一次可以處理多大的上傳文件是有限制的，因此文件大小需要實(shí)用。這是針對(duì)上一步中處理的所有四個(gè)數(shù)據(jù)集完成的。

第 5 步 - 構(gòu)建地圖數(shù)據(jù)視圖

將數(shù)據(jù)加載到 Mapbox 后，需要?jiǎng)?chuàng)建反映不同街道數(shù)據(jù)組的瓦片集。這些瓦片集是瀏覽器在地圖中呈現(xiàn)的用戶可以與之交互的圖層，并且也在瀏覽器代碼中的 SDK 中引用。每個(gè)圖層都有自己的屬性——顏色、字體大小、線寬等。這一切都在 Mapbox Studio 中完成，稱為樣式。

第 6 步 - 添加區(qū)域圖層以使地圖可用

我需要添加的一個(gè)意外范圍是地圖的匯總層，我們稱之為區(qū)域?qū)印?/font>前面步驟中的基礎(chǔ)數(shù)據(jù)集總共有 10 萬個(gè)城市街區(qū)（特征），所以當(dāng)試圖一次顯示它們時(shí)，用戶體驗(yàn)很糟糕，因?yàn)樗皇亲兂闪艘粋€(gè)單一顏色的大塊，因?yàn)樗薪值蓝蓟旌显谝黄稹?/font>

為了解決這個(gè)問題，我創(chuàng)建了一個(gè)區(qū)域的摘要視圖，在嘗試獲取整個(gè)內(nèi)容時(shí)可用。這是通過使用 Mapbox studio 創(chuàng)建一個(gè)數(shù)據(jù)集來概述這些區(qū)域的。然后地圖的起點(diǎn)在這個(gè)級(jí)別被縮小，顯示更廣泛的區(qū)域。

地圖的頂級(jí)視圖

?

網(wǎng)頁中嵌入了 javascript，允許用戶單擊其中一個(gè)區(qū)域，然后放大該區(qū)域。從那里可以單擊更用戶友好的地圖版本。

第 7 步 - 構(gòu)建可以更新地圖的 API

Mapbox 已經(jīng)有可以管理更新的 API。要調(diào)用 API，將需要要更新的功能的唯一標(biāo)識(shí)符。鑒于 Mapbox 設(shè)置了唯一標(biāo)識(shí)符，需要在加載地圖后從 Mapbox 中提取地圖，并在調(diào)用 API 之前構(gòu)建一個(gè)用作包裝器的查找實(shí)用程序，以應(yīng)用唯一標(biāo)識(shí)符。這是用 NodeJS 編寫的，并托管在 AWS 中。

第8 步 - 將 API 集成到數(shù)字地圖中

一旦我們有 API 工作，然后將其集成到我們的。我構(gòu)建了一個(gè)簡單的 AngularJS Web 應(yīng)用程序，然后調(diào)用 API 將塊分配給單個(gè)志愿者。這使多個(gè)人能夠直接更新地圖，從而使項(xiàng)目能夠擴(kuò)大規(guī)模。

更新地圖的管理工具

?

?