react-leaflet：將React和Leaflet結合起來

本文轉載自查看原文 2020-12-10 15:25 362 Leaflet/ React

https://react-leaflet.js.org/

React Leaflet provides bindings between React and Leaflet. It does not replace Leaflet, but leverages it to abstract Leaflet layers as React components. As such, it can behave differently from how other React components work, notably:

React-Leaflet提供React和Leaflet之間的膠水。它並不會取代Leaflet，而是充分使它成為抽象的Leaflet圖層作為React組件。因此，它與其它的React組件的工作方式可能不同，值得注意的有：

https://react-leaflet.js.org/docs/start-introduction

github：https://github.com/PaulLeCam/react-leaflet

create-leaflet加載arcgis切片：

DOM rendering# DOM渲染

React does not render Leaflet layers to the DOM, this rendering is done by Leaflet itself. React only renders a <div> element when rendering the MapContainer component, the contents of UI layers components.

React不會把Leaflet圖層渲染到DOM，這部分渲染是由Leaflet自己完成的。當渲染MapContainer組件時，React只是渲染一個<div>元素。

Component properties# 組件屬性

The properties passed to the components are used to create the relevant Leaflet instance when the component is rendered the first time and should be treated as immutable by default.

傳遞給組件的屬性用於在第一次呈現組件時創建相關的傳單實例，默認情況下應視為不可變的。

During the first render, all these properties should be supported as they are by Leaflet, however they will not be updated in the UI when they change unless they are explicitely documented as being mutable.

在第一次呈現期間，所有這些屬性都應該像傳單一樣得到支持，但是當它們更改時，它們不會在UI中更新，除非它們被明確地記錄為可變的。

Mutable properties changes are compared by reference (unless stated otherwise) and are applied calling the relevant method on the Leaflet element instance.

可變屬性更改通過引用進行比較（除非另有說明），並應用於調用傳單元素實例上的相關方法。

React context#

React Leaflet uses React's context API to make some Leaflet elements instances available to children elements that need it.

Each Leaflet map instance has its own React context, created by the MapContainer component. Other components and hooks provided by React Leaflet can only be used as descendants of a MapContainer.

Lifecycle process#

The MapContainer renders a container <div> element for the map. If the placeholder prop is set, it will be rendered inside the container <div>.
The MapContainer instantiates a Leaflet Map for the created <div> with the component properties and creates the React context containing the map instance.
The MapContainer renders its children components.
Each child component instantiates the matching Leaflet instance for the element using the component properties and context, and adds it to the map.
When a child component is rendered again, changes to its supported mutable props are applied to the map.
When a component is removed from the render tree, it removes its layer from the map as needed.

Limitations#

Leaflet makes direct calls to the DOM when it is loaded, therefore React Leaflet is not compatible with server-side rendering.
The components exposed are abstractions for Leaflet layers, not DOM elements. Some of them have properties that can be updated directly by calling the setters exposed by Leaflet while others should be completely replaced, by setting an unique value on their key property so they are properly handled by React's algorithm.

Installation安裝

React prerequisites#

This documentation assumes you are already familiar with React and have a project setup. If it is not the case, you should read React's Getting Started documentation first.

Leaflet prerequisites#

This documentation assumes you are already familiar with Leaflet. React Leaflet does not replace Leaflet, it only provides bindings between React and Leaflet.

This documentation is not a replacement for Leaflet's documentation, it only focuses on aspects specific to React Leaflet.

READ THIS BEFORE GOING FURTHER

Before using React Leaflet, you must setup your project following Leaflet's Quick Start Guide.

Adding React Leaflet#

React, React DOM and Leaflet are required peer dependencies. You must add them to your project if they are not already installed:

npm
yarn

npm install react react-dom leaflet

Then you can install React Leaflet:

npm
yarn

npm install react-leaflet

Finally, you import the necessary components, for example:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

Using TypeScript#

React Leaflet provides TypeScript definitions in the installed packages, but needs Leaflet's definitions to be present. If you have not installed them yet, you will need to add them: