logo标签列表

在React Leaflet中使用Leaflet插件

reactjsleafletreact-leaflet
4
1
我邀请你去找一些 react-leaflet-examples :) 并非所有插件都能正常工作，但有些可以。 - Grzegorz T.
@giorgimoniava 你说得对，我应该加上一些例子。 - Grzegorz T.
将leaflet插件移植到react-leaflet似乎一开始很复杂，但它会让你对leaflet、react和react-leaflet非常熟悉。我强烈建议尝试一下。试着浏览官方文档，或者也许我在另一个问题中的回答可以帮助你。 - Seth Lutske
1
@SethLutske 我同意，但你真的需要对leafletjs、react-leaflet、reactjs以及你想要重写的库有很多了解。还有一些文档非常缺乏的库存在问题，有时候会有一些没有源代码的库，只有已经被压缩的库。 - Grzegorz T.
1
@GrzegorzT。这是事实。但考虑到问题的一般性质和约翰是新贡献者的事实，我认为这只是一般建议。我个人通过尝试此类操作获得了有关leaflet、react和react-leaflet的许多知识。这仅仅是一个两分钱的评论。没有文档和源代码的库即使对经验丰富的开发人员来说也很难移植。 - Seth Lutske
1个回答
4

很不幸，在大多数情况下，为了使leaflet插件在react-leaflet中工作，必须从头开始编写它，但也有例外。

下面是一个示例，可以让您在全屏幕上使用地图。

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const MapWrapper = () => {
  return (
    <MapContainer
      fullscreenControl={true}
      center={center}
      zoom={13}
      scrollWheelZoom={false}
    >

      <TileLayer {...tileLayer} />

    </MapContainer>
  )
}

export default MapWrapper;

最受欢迎和发展最为成熟的通常都有 react-leaflet 版本，例如 react-leaflet-markercluster

不要忘记导入，然后它也可以与 react-leaflet 4.0 一起使用。 - user3606183
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接