react-leaflet：将React和Leaflet结合起来

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#

1. The MapContainer renders a container <div> element for the map. If the placeholder prop is set, it will be rendered inside the container <div>.
2. The MapContainer instantiates a Leaflet Map for the created <div> with the component properties and creates the React context containing the map instance.
3. The MapContainer renders its children components.
4. Each child component instantiates the matching Leaflet instance for the element using the component properties and context, and adds it to the map.
5. When a child component is rendered again, changes to its supported mutable props are applied to the map.
6. 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:

• npm
• yarn

npm install -D @types/leaflet

 

 

Setup设置

1. Follow all the steps from the installation page
2. Add the following code to your app and check it displays correctly:

LIVE EDITOR

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>

<TileLayer

attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

/>

<Marker position={[51.505, -0.09]}>

<Popup>

A pretty CSS3 popup. <br /> Easily customizable.

</Popup>

</Marker>

</MapContainer>

RESULT

 

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

1. Make sure all dependencies are installed and using supported versions
2. Make sure Leaflet's CSS is loaded
3. Make sure your map container has a defined height

If you're still having trouble, you can use the react-leaflet tag on Stack Overflow.