标签: react-leaflet

我正在尝试使用库react-leaflet创建一个简单的Web应用程序。

我有以下代码：

import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class LeafletMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default LeafletMap;

但是，TileLayer始终以随机顺序显示。我已经阅读了很多必须与ComponentDidMount()by 一起使用的代码Reactjs，但是与库相比，我看到的渲染完全不同。

你知道我该怎么办吗？

问候！

我正在尝试将 React-Leaflet 合并到我的 Create React App 中。我能够在底图上叠加 GeoJSON 数据，但我无法在该图层上注册点击次数。

在调查此问题时，我发现了以下 jsfiddle，https: //jsfiddle.net/n7jmqg1s/6/，它会在单击形状时注册事件，如 onEachFeature 函数所证明的那样：

onEachFeature(feature, layer) {
console.log(arguments)
const func = (e)=>{console.log("Click")};

layer.on({
    click: func
});
}

我尝试将其复制并粘贴到我的 React 应用程序中，但在那里不起作用。我唯一改变的是使用 es6 导入而不是 window.React/window.LeafletReact。我不认为这会导致问题，但我认为这是可能的。

我查看了 onEachFeature 函数的参数。在 jsfiddle 中，我得到 2 个参数——特征和图层数据。但是，在我复制的示例中，我得到 3 个参数，其中前两个为空，第三个参数包含一个包含许多内容的对象，包括 (enqueueCallback : (publicInstance, callback, callerName))

我意识到这有点含糊，但我希望这个问题很容易被识别为对 React 或传单的误解。我认为这与我没有传递正确的范围或直接操作 DOM 或其他事情有关。但我不确定。我将不胜感激任何帮助。

这是我的组件代码：

    import React from 'react';
import { Map, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';

export default class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = …

我在 react-leaflet 地图上使用了一些标记来显示各种文本。
但是我找不到 autoOpen 工具提示的标志。

我得到 (position, children, onOpen, onClose) 作为可用属性。

render() {
    return (
        <div className={'ShapeLayer'}>
            {
                this.shapes.map(shape => {
                    return (
                        <Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
                            <Popup>
                                <span>{shape['text']}</span>
                            </Popup>
                        </Marker>
                    );

                })
            }
        </div>
    )
}

这是通过本机传单上的此代码完成的

var marker = L.marker(shapess[i]['coordinates'], {
        opacity: 0.01
    }).bindTooltip(shapess[i]['text'],
        {
            permanent: true,
            className: "shapesText" + i,
            offset: [0, 0],
            direction: "center"
        }
    ).openTooltip().addTo(mymap);

我如何在 react_leflet 上做同样的事情

我是 React 的新手。我尝试在反应项目中使用 npm 模块重叠标记蜘蛛飞叶传单。

我按照https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet 上的说明进行操作npm install -S overlapping-marker-spiderfier-leaflet，然后import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet';在我的项目中进行操作。

然后我做，var oms = new OverlappingMarkerSpiderfier(this.map); 但我得到：

未处理的拒绝（类型错误）： WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet .OverlappingMarkerSpiderfier 不是构造函数

你知道我如何解决这个错误。你认为我更愿意使用缩小的 js 来使用这个插件吗？为何如此？

我想用react-leaflet创建一个自定义组件，该组件显示鼠标的实际位置（x，y），但是我不知道如何创建它。我找到了，react-leaflet-control但似乎不是最新的，当然我读了api文档https://react-leaflet.js.org/docs/en/custom-components.html，但我不明白：/

有人可以给我一个自定义组件的例子吗，一个显示“ Hello world”的组件应该足够了。

在以下链接中，有在线演示案例展示了如何使用 esri-leaflet-geosearch 插件，https: //codepen.io/exomark/pen/dafBD

var searchControl = new L.esri.Controls.Geosearch().addTo(map);

var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
});

这个在线演示可以很好地支持地理搜索功能。

在我的 React 应用程序中，我还计划添加诸如用于传单的搜索框。但无法弄清楚如何做到这一点。

由于esri-leaflet-geosearch取决于esri-leaflet，所以安装了两个 npm 包，但找不到下一步。所以有什么帮助吗？

是否可以设置react-leaflet.js.org附带的弹出窗口的样式？我一直在修改样式，但是您可以获得弹出窗口的 ui 模板/或者完全改变弹出窗口外观的正确方法是什么？

代码片段

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

我想将弹出窗口设计为如下所示

谢谢，

我正在尝试在 react 16.4.1 中使用传单插件 polylinedecorator（所以没有钩子）。但是，我能够找到的关于如何在 react 中使用此插件的唯一示例是使用钩子（请参阅：如何将 polylinedac​​orator 与 react 传单一起使用），我不确定如何调整它以便能够在我的代码。

到目前为止，我拥有的是这个 polylinedecorator 组件：

import React, { Component } from "react";
import { Polyline } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";

export default class PolylineDecorator extends Component {
  componentDidUpdate() {
    if (this.props.map) {
        const polyline = L.polyline(this.props.positions).addTo(this.props.map);

        L.polylineDecorator(polyline, {
            patterns: [
                {
                  offset: "100%",
                  repeat: 0,
                  symbol: L.Symbol.arrowHead({
                    pixelSize: 15,
                    polygon: false,
                    pathOptions: { stroke: true }
                  })
                }
              ]
        }).addTo(this.props.map);
    }
  }

  render() {
    return …

我无法理解如何使用 react-leaflet 正确更新我的标记。使用这个例子：

import React from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import { Map, Marker, TileLayer } from 'react-leaflet';

const map = props => (
  <Map center={[51.505, -0.09]} zoom={13}>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
    {props.markers.map(m => (
      <Marker position={m.position} />
    ))}
  </Map>
);

const mapStateToProps = state => ({
  markers: state.markers // array of objects with positions. this can change
});

render(connect(mapStateToProps)(map), document.getElementById('map-container'));

这有效，但我不知道这是否是正确的做法。因为在这种情况下，当标记更新其位置（或有更多标记）时，Leaflet 将删除标记并放置新标记，而不是更新原始标记的位置。

所以我的问题是。我做得对还是这不是最高效的方式？

谢谢！

我一直在尝试在右上角添加图例和/或信息部分以显示有关我突出显示的状态的描述，但我无法这样做，因此我不得不发布一些指导。

我正在使用React 16.13with typescript，所以在这个阶段使用钩子而不是类组件（仍然可以使用，但试图避免它）。我正在使用的库是React-Leaflet. 我一整天都在网上阅读，我无法弄清楚如何将这两件事添加到我的项目中，我想一旦我弄清楚如何做另一个就会很容易实现。

这是我的代码如下：

const App: React.FC = () => {
  const [mapCenter, setMapCenter] = useState<L.LatLngTuple>([
    36.778259,
    -119.417931
  ]);
  const [geoJson, setGeoJson] = useState<TopoJSON[]>([]);
  const geoJsonRef = useRef<GeoJSON>(null);

  useEffect(() => {
    if (data.type === "Topology") {
      for (let key in data.objects) {
        if (data.objects.hasOwnProperty(key)) {
          setGeoJson(topojson.feature(data, data.objects[key]));
        }
      }
    }
  }, []);

  const highlightFeature = (e: L.LeafletMouseEvent) => {
    let layer = e.target;
    layer.setStyle({
      weight: 5,
      color: "#666",
      dashArray: "",
      fillOpacity: 0.7
    }); …