2021 年值得關(guān)注的React 5 大地圖庫(kù)
本文轉(zhuǎn)載自微信公眾號(hào)「TianTianUp」，作者小弋 。轉(zhuǎn)載本文請(qǐng)聯(lián)系TianTianUp公眾號(hào)。
大家好，我是小弋。
當(dāng)你的項(xiàng)目需要使用地圖庫(kù)時(shí)，應(yīng)該如何選擇呢?
接下來(lái)推薦一些能幫助您的項(xiàng)目選擇更好的地圖庫(kù)。
2021 年 React 的 5 大地圖庫(kù)
實(shí)施用戶友好、有效的地圖功能可能是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。但是，如果你知道正確的工具，你可以讓它變得更容易。
因此，在本文中，我將介紹 React 的 5 個(gè)最佳地圖庫(kù)，并進(jìn)行功能比較，以幫助您為下一個(gè)項(xiàng)目選擇最佳地圖庫(kù)。
主要推薦的庫(kù)如下：
- React Simple Maps
- Google Map React
- Deck.gl
- React Leaflet
- Pigeon Maps
每個(gè)庫(kù)都有自己的優(yōu)缺點(diǎn)，下面簡(jiǎn)單介紹一下。
React Simple Maps
滿足基本需求的輕量級(jí)簡(jiǎn)單地圖
React 簡(jiǎn)單地圖示例預(yù)覽
這個(gè) React 庫(kù)允許快速創(chuàng)建 SVG 地圖，同時(shí)由庫(kù)本身負(fù)責(zé)平移、縮放和渲染功能。
React Simple Maps 不依賴于整個(gè) d3 庫(kù)，而是圍繞著 d3-geo 和 topojson 庫(kù)，使得 React Simple Maps 非常輕量級(jí)。
React Simple Maps Bundle 大小
優(yōu)點(diǎn)
- 該庫(kù)將地圖呈現(xiàn)為 SVG，這使得使用 HTML 處理起來(lái)非常容易。
- 可與其他 React 組件一起擴(kuò)展。
- 一個(gè)輕量級(jí)的庫(kù)。
缺點(diǎn)
- 處理大量地圖數(shù)據(jù)時(shí)的性能問(wèn)題。
- 較小的開(kāi)發(fā)者社區(qū)。
這是一個(gè)維護(hù)良好的庫(kù)，每周 NPM 下載量超過(guò) 44,000 次，GitHub 星數(shù)超過(guò) 23,000。
假設(shè)您是初學(xué)者并嘗試添加一個(gè)簡(jiǎn)單的 React 地圖組件以滿足基本需求。在這種情況下，我會(huì)為您推薦 React Simple Maps。
您可以使用 npm 或 yarn 輕松安裝它：
- npm install --save react-simple-maps
- yarn add --save react-simple-maps
Google Map React
用谷歌地圖 API 來(lái)實(shí)現(xiàn)地圖功能。
Google Map React預(yù)覽
Google Map React 庫(kù)是可用于 React 的最流行的地圖庫(kù)之一。這個(gè)庫(kù)是完全同構(gòu)的，可以從服務(wù)器端渲染。
Google Map React 擁有超過(guò) 5000 顆 GitHub 星，每周大約有 184,000 次 NPM 下載。
優(yōu)點(diǎn)
- 支持帶有懸停效果的自定義地圖標(biāo)記。
- 使用內(nèi)容豐富的 Google Map API 來(lái)獲取地圖數(shù)據(jù)。
- 同構(gòu)渲染——客戶端和服務(wù)器端的地圖渲染支持。
- 如果 API 沒(méi)有響應(yīng)，Google Map React 可以在瀏覽器中本地渲染基本地圖組件。
缺點(diǎn)
- 需要設(shè)置 Google 開(kāi)發(fā)者帳戶和 API 密鑰。
- 對(duì)于生產(chǎn)和廣泛使用，您需要購(gòu)買Google Map Service。
如果您正在尋找一個(gè)輕松的地圖組件來(lái)與您的 React 應(yīng)用程序集成，Google Map React 是完美的解決方案，它可以使用 npm 或 yarn 安裝。
- npm install --save google-map-react
- yarn add google-map-react
Deck.gl
這是一個(gè)帶有帶有動(dòng)畫(huà)的強(qiáng)大地圖庫(kù)。
動(dòng)畫(huà)庫(kù)預(yù)覽
Deck.gl 是免費(fèi)提供的最先進(jìn)的高性能 React 地圖庫(kù)之一。這是基于 WebGL 的，能夠可視化大比例尺的地圖數(shù)據(jù)。
Deck.gl 是一個(gè)高度可定制的地圖庫(kù)，幾乎可以滿足任何地圖需求，因?yàn)樗募軜?gòu)易于擴(kuò)展。
優(yōu)點(diǎn)
- 高度可擴(kuò)展和可定制的庫(kù)。
- 大型數(shù)據(jù)集的高性能渲染和更新。
- 交互式事件處理，例如拾取、突出顯示和過(guò)濾。
- 內(nèi)置支持不同的圖層類型，如圖標(biāo)、多邊形、文本;以及不同的視圖，例如第一人稱、正字法。
- 支持與主要基本地圖提供商的集成，包括 Mapbox、Google Maps 等。
缺點(diǎn)
- 客戶端機(jī)器渲染地圖的大量?jī)?nèi)存需求。
- 較少的瀏覽器兼容性和較少的跨平臺(tái)支持。
Deck.gl 每周下載量超過(guò) 45,000 次，在 GitHub 上擁有超過(guò) 8,000 顆星。它提供了良好的文檔，包括有關(guān)其功能和安裝的所有詳細(xì)信息。
如果您打算設(shè)計(jì)一個(gè) React 應(yīng)用程序來(lái)處理和顯示大量地圖數(shù)據(jù)，這可能是您的最佳選擇。
您可以使用 NPM 或 Yarn 輕松安裝 Deck.gl：
- npm install deck.gl --save
- yarn add deck.gl
注意：建議在集成此庫(kù)后對(duì)應(yīng)用程序進(jìn)行性能測(cè)試和可用性測(cè)試。
React Leaflet
滿足基本需求的移動(dòng)響應(yīng)式地圖。
React Leaflet 是一個(gè)簡(jiǎn)單的地圖庫(kù)，具有開(kāi)箱即用的圖層自定義支持。
該庫(kù)將現(xiàn)有的 javascript Leaflet庫(kù)包裝為 React 組件，使其簡(jiǎn)單且適合移動(dòng)設(shè)備。
優(yōu)點(diǎn)
- 具有微調(diào)基本功能的簡(jiǎn)單庫(kù)。
- 跨瀏覽器和平臺(tái)支持。
- 圖層自定義。
- 移動(dòng)響應(yīng)能力。
缺點(diǎn)
- 不支持服務(wù)器端渲染。
- 直接 DOM 調(diào)用是在加載階段進(jìn)行的，這對(duì)于處理大量地圖數(shù)據(jù)來(lái)說(shuō)可能會(huì)很麻煩。
React Leaflet 每周有超過(guò) 149K 的 NPM 下載量和 37K 的 GitHub 星數(shù)。
你可以使用 NPM 或 Yarn 來(lái)安裝 React Leaflet：
- npm install react react-dom leaflet
- npm install react-leafletyarn add react react-dom leaflet
- yarn add react-leaflet
Pigeon Maps
這是性能優(yōu)先的地圖庫(kù)。
預(yù)覽 Pigeon Maps
Pigeon Maps 是一個(gè)輕量級(jí)的地圖庫(kù)，其主要目標(biāo)是提供一個(gè)性能第一、以 React 為中心的可擴(kuò)展地圖引擎。
Pigeon Maps 附帶 Open Street Maps (OSM)、MapTiler 和更多地圖圖塊提供商。但它也允許您與自定義地圖圖塊提供程序集成。
優(yōu)點(diǎn)
- 輕量級(jí)和快速的地圖渲染。
- 自定義地圖圖塊提供程序支持。
- 移動(dòng)優(yōu)化的地圖控件。
缺點(diǎn)
- 與其他組件的可擴(kuò)展性較差。
- 無(wú)法進(jìn)行高級(jí)地圖自定義。
Piegon Map 擁有 3100 顆 GitHub 星，每周在 GitHub 上的下載量超過(guò) 3000 次。
如果您正在尋找響應(yīng)式、移動(dòng)性和性能優(yōu)化的地圖庫(kù)，Pigeon Map 是您的不二之選。
您可以使用 NPM 或 Yarn 輕松安裝 Pigeon Map：
- npm install —-save pigeon-map
- yarn add pigeon-maps
小結(jié)
上面的地圖庫(kù)只是 React 可用的許多地圖庫(kù)的一個(gè)子集。但是，我展示了 5 個(gè)精心挑選的庫(kù)以及它們的優(yōu)缺點(diǎn)。您可以在下表中找到它們?cè)?GitHub 上的流行度。
趨勢(shì)對(duì)比
我希望我的建議能幫助您為您的項(xiàng)目選擇最好的地圖庫(kù)。
