在反应传单上使用Leaflet插件

Posted 2021-05-05

我正在用react-leaflet构建一个ReactJs应用程序。问题是有很多Leaflet插件不支持react-leaflet。

我尝试使用这个插件 http://kartena.github.io/Leaflet.zoomslider/

在这种情况下，有人可以提出解决方案吗？

答案

大多数Leaflet插件没有React组件。您可以从Leaflet插件中获取React-Leaflet的create custom components。

另一答案

我打算说你通过获取对地图对象的引用来做到这一点，但我不认为这是必要的。但是我已经把它留在了这个回复的基础上，因为它是一个非常有用的东西。

尝试以下方法：

var map = L.map('map', {
          zoomsliderControl: true,
          zoomControl: false,
          layers: [layer]
      }).setView([57.7, 11.9], 8);

其中'map'是Map元素的id。

===========================================在Map元素上获取参考到地图对象。

<Map ref={(m) => this.leaf = m} etc...>

然后在你的反应组件中。你有componentDidMount =（）=> {

使用地图对象添加到滑块中

var map = this.leaf.leafletElement;