react-leaflet：将React和Leaflet结合起来
<p>https://react-leaflet.js.org/</p><p><img src="https://img2020.cnblogs.com/blog/457232/202012/457232-20201210152445922-891997696.png" alt="" width="1238" height="592" loading="lazy"></p>
<p>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:</p>
<p>React-Leaflet提供React和Leaflet之间的胶水。它并不会取代Leaflet，而是充分使它成为抽象的Leaflet图层作为React组件。因此，它与其它的React组件的工作方式可能不同，值得注意的有：</p>
<p>https://react-leaflet.js.org/docs/start-introduction</p>
<p>github：https://github.com/PaulLeCam/react-leaflet</p>
<p>create-leaflet加载arcgis切片：</p>
<p> </p>
<h3>DOM rendering# DOM渲染</h3>
<p>React does not render Leaflet layers to the DOM, this rendering is done by Leaflet itself. React only renders a <code><div></code> element when rendering the <code>MapContainer</code> component, the contents of UI layers components.</p>
<p>React不会把Leaflet图层渲染到DOM，这部分渲染是由Leaflet自己完成的。当渲染MapContainer组件时，React只是渲染一个<div>元素。</p>
<h3>Component properties# 组件属性</h3>
<p>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.</p>
<p>传递给组件的属性用于在第一次呈现组件时创建相关的传单实例，默认情况下应视为不可变的。</p>
<p>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.</p>
<p>在第一次呈现期间，所有这些属性都应该像传单一样得到支持，但是当它们更改时，它们不会在UI中更新，除非它们被明确地记录为可变的。</p>
<p>Mutable properties changes are compared by reference (unless stated otherwise) and are applied calling the relevant method on the Leaflet element instance.</p>
<p>可变属性更改通过引用进行比较（除非另有说明），并应用于调用传单元素实例上的相关方法。</p>
<h3>React context#</h3>
<p>React Leaflet uses React's context API to make some Leaflet elements instances available to children elements that need it.</p>
<p>Each Leaflet map instance has its own React context, created by the <code>MapContainer</code> component. Other components and hooks provided by React Leaflet can only be used as descendants of a <code>MapContainer</code>.</p>
<h2>Lifecycle process#</h2>
<ol>
<li>The <code>MapContainer</code> renders a container <code><div></code> element for the map. If the <code>placeholder</code> prop is set, it will be rendered inside the container <code><div></code>.</li>
<li>The <code>MapContainer</code> instantiates a Leaflet Map for the created <code><div></code> with the component properties and creates the React context containing the map instance.</li>
<li>The <code>MapContainer</code> renders its children components.</li>
<li>Each child component instantiates the matching Leaflet instance for the element using the component properties and context, and adds it to the map.</li>
<li>When a child component is rendered again, changes to its supported mutable props are applied to the map.</li>
<li>When a component is removed from the render tree, it removes its layer from the map as needed.</li>
</ol>
<h2>Limitations#</h2>
<ul>
<li>Leaflet makes direct calls to the DOM when it is loaded, therefore React Leaflet is not compatible with server-side rendering.</li>
<li>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 <code>key</code> property so they are properly handled by React's algorithm.</li>
</ul>
<p> </p>
<h1 class="docTitle_3OxN">Installation安装</h1>
<div class="markdown">
<h2>React prerequisites#</h2>
<p>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.</p>
<h2>Leaflet prerequisites#</h2>
<p>This documentation assumes you are already familiar with Leaflet. React Leaflet does not replace Leaflet, it only provides bindings between React and Leaflet.</p>
<p>This documentation is not a replacement for Leaflet's documentation, it only focuses on aspects specific to React Leaflet.</p>
<div class="admonition admonition-caution alert alert--warning">
<div class="admonition-heading">
<h5><span class="admonition-icon">READ THIS BEFORE GOING FURTHER</span></h5>
</div>
<div class="admonition-content">
<p>Before using React Leaflet, you must setup your project following Leaflet's Quick Start Guide.</p>
</div>
</div>
<h2>Adding React Leaflet#</h2>
<p>React, React DOM and Leaflet are required peer dependencies. You must add them to your project if they are not already installed:</p>
<div>
<ul class="tabs">
<li class="tabs__item tabItem_3rDf tabs__item--active">npm</li>
<li class="tabs__item tabItem_3rDf">yarn</li>
</ul>
<div class="margin-vert--md">
<div class="mdxCodeBlock_omlV">
<div class="codeBlockContent_1hPK">
<div class="prism-code language-bash codeBlock_2SYb thin-scrollbar">
<div class="codeBlockLines_3FyA">
<div class="token-line">
<div class="cnblogs_code">
<pre>npm install react react-dom leaflet</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>Then you can install React Leaflet:</p>
<div>
<ul class="tabs">
<li class="tabs__item tabItem_3rDf tabs__item--active">npm</li>
<li class="tabs__item tabItem_3rDf">yarn</li>
</ul>
<div class="margin-vert--md">
<div class="mdxCodeBlock_omlV">
<div class="codeBlockContent_1hPK">
<div class="prism-code language-bash codeBlock_2SYb thin-scrollbar">
<div class="codeBlockLines_3FyA">
<div class="token-line">
<div class="cnblogs_code">
<pre>npm install react-leaflet</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>Finally, you import the necessary components, for example:</p>
<div class="mdxCodeBlock_omlV">
<div class="codeBlockContent_1hPK">
<div class="prism-code language-js codeBlock_2SYb thin-scrollbar">
<div class="codeBlockLines_3FyA">
<div class="token-line">
<div class="cnblogs_code">
<pre>import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Using TypeScript#</h2>
<p>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:</p>
<div>
<ul class="tabs">
<li class="tabs__item tabItem_3rDf tabs__item--active">npm</li>
<li class="tabs__item tabItem_3rDf">yarn</li>
</ul>
<div class="margin-vert--md">
<div class="mdxCodeBlock_omlV">
<div class="codeBlockContent_1hPK">
<div class="prism-code language-bash codeBlock_2SYb thin-scrollbar">
<div class="codeBlockLines_3FyA">
<div class="token-line"><span class="token function">npm<span class="token plain"> <span class="token function">install<span class="token plain"> -D @types/leaflet</span></span></span></span></div>
<div class="token-line"> </div>
<div class="token-line"> </div>
<div class="token-line">
<h1 class="docTitle_3OxN">Setup设置</h1>
<div class="markdown"><ol>
<li>Follow all the steps from the installation page</li>
<li>Add the following code to your app and check it displays correctly:</li>
</ol>
<div class="mdxCodeBlock_omlV">
<div class="playgroundHeader_ZRyp playgroundEditorHeader_3RO1">LIVE EDITOR</div>
<div class="playgroundEditor_1OhS"><textarea class="npm__react-simple-code-editor__textarea" data-gramm="false"></textarea>
<div class="token-line"><span class="token tag punctuation"><<span class="token tag class-name">MapContainer<span class="token tag"> <span class="token tag attr-name">center<span class="token tag script language-javascript script-punctuation punctuation">=<span class="token tag script language-javascript punctuation">{<span class="token tag script language-javascript punctuation">[<span class="token tag script language-javascript number">51.505<span class="token tag script language-javascript punctuation">,<span class="token tag script language-javascript"> <span class="token tag script language-javascript operator">-<span class="token tag script language-javascript number">0.09<span class="token tag script language-javascript punctuation">]<span class="token tag script language-javascript punctuation">}<span class="token tag"> <span class="token tag attr-name">zoom<span class="token tag script language-javascript script-punctuation punctuation">=<span class="token tag script language-javascript punctuation">{<span class="token tag script language-javascript number">13<span class="token tag script language-javascript punctuation">}<span class="token tag"> <span class="token tag attr-name">scrollWheelZoom<span class="token tag script language-javascript script-punctuation punctuation">=<span class="token tag script language-javascript punctuation">{<span class="token tag script language-javascript boolean">false<span class="token tag script language-javascript punctuation">}<span class="token tag punctuation">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token tag punctuation"><<span class="token tag class-name">TileLayer</span></span></span></div>
<div class="token-line"><span class="token tag"> <span class="token tag attr-name">attribution<span class="token tag attr-value punctuation">=<span class="token tag attr-value punctuation">'<span class="token tag attr-value entity">&copy;<span class="token tag attr-value"> <a href="http://osm.org/copyright">OpenStreetMap</a> contributors<span class="token tag attr-value punctuation">'</span></span></span></span></span></span></span></div>
<div class="token-line"><span class="token tag"> <span class="token tag attr-name">url<span class="token tag attr-value punctuation">=<span class="token tag attr-value punctuation">"<span class="token tag attr-value">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png<span class="token tag attr-value punctuation">"</span></span></span></span></span></span></div>
<div class="token-line"><span class="token tag"> <span class="token tag punctuation">/></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token tag punctuation"><<span class="token tag class-name">Marker<span class="token tag"> <span class="token tag attr-name">position<span class="token tag script language-javascript script-punctuation punctuation">=<span class="token tag script language-javascript punctuation">{<span class="token tag script language-javascript punctuation">[<span class="token tag script language-javascript number">51.505<span class="token tag script language-javascript punctuation">,<span class="token tag script language-javascript"> <span class="token tag script language-javascript operator">-<span class="token tag script language-javascript number">0.09<span class="token tag script language-javascript punctuation">]<span class="token tag script language-javascript punctuation">}<span class="token tag punctuation">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token tag punctuation"><<span class="token tag class-name">Popup<span class="token tag punctuation">></span></span></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token constant">A<span class="token plain"> pretty <span class="token constant">CSS3<span class="token plain"> popup<span class="token punctuation">.<span class="token plain"> <span class="token tag punctuation"><<span class="token tag">br<span class="token tag"> <span class="token tag punctuation">/><span class="token plain"> Easily customizable<span class="token punctuation">.</span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token tag punctuation"></<span class="token tag class-name">Popup<span class="token tag punctuation">></span></span></span></span></div>
<div class="token-line"><span class="token plain"> <span class="token tag punctuation"></<span class="token tag class-name">Marker<span class="token tag punctuation">></span></span></span></span></div>
<div class="token-line"><span class="token plain"><span class="token tag punctuation"></<span class="token tag class-name">MapContainer<span class="token tag punctuation">></span></span></span></span></div>
</div>
<div class="playgroundHeader_ZRyp playgroundPreviewHeader_18s2">RESULT</div>
<div class="playgroundPreview_1mpV">
<div class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom">
<div class="leaflet-pane leaflet-map-pane">
<div class="leaflet-pane leaflet-tile-pane">
<div class="leaflet-layer ">
<div class="leaflet-tile-container leaflet-zoom-animated"><img src="https://a.tile.openstreetmap.org/13/4093/2723.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://b.tile.openstreetmap.org/13/4094/2723.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://b.tile.openstreetmap.org/13/4093/2724.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://c.tile.openstreetmap.org/13/4094/2724.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://c.tile.openstreetmap.org/13/4092/2723.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://c.tile.openstreetmap.org/13/4095/2723.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://a.tile.openstreetmap.org/13/4092/2724.png" alt="" class="leaflet-tile leaflet-tile-loaded"><img src="https://a.tile.openstreetmap.org/13/4095/2724.png" alt="" class="leaflet-tile leaflet-tile-loaded"></div>
</div>
</div>
<div class="leaflet-pane leaflet-shadow-pane"> </div>
</div>
</div>
</div>
</div>
<p>If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.</p>
<ol>
<li>Make sure all dependencies are installed and using supported versions</li>
<li>Make sure Leaflet's CSS is loaded</li>
<li>Make sure your map container has a defined height</li>
</ol>
<p>If you're still having trouble, you can use the <code>react-leaflet</code> tag on Stack Overflow.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/2008nmj/p/14115275.html
頁:
[1]