2021 年值得關(guān)注的React 5 大地圖庫(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)單地圖

這個(gè) React 庫(kù)允許快速創(chuàng)建 SVG 地圖，同時(shí)由庫(kù)本身負(fù)責(zé)平移、縮放和渲染功能。

React Simple Maps 不依賴于整個(gè) d3 庫(kù)，而是圍繞著 d3-geo 和 topojson 庫(kù)，使得 React Simple Maps 非常輕量級(jí)。

優(yōu)點(diǎn)

• 該庫(kù)將地圖呈現(xiàn)為 SVG，這使得使用 HTML 處理起來(lái)非常容易。
• 可與其他 React 組件一起擴(kuò)展。
• 一個(gè)輕量級(jí)的庫(kù)。

缺點(diǎn)

• 處理大量地圖數(shù)據(jù)時(shí)的性能問(wèn)題。
• 較小的開發(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 庫(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 開發(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)畫的強(qiáng)大地圖庫(kù)。

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ù)將現(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ù)。

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 上的流行度。

我希望我的建議能幫助您為您的項(xiàng)目選擇最好的地圖庫(kù)。

感謝閱讀！！！