标签: react-leaflet

我开始使用react-leaflet,我遇到了一个问题:在我的应用程序中,用户填写一个表单,然后请求返回GeoJSON的休息服务,然后将其添加为我的地图上的新图层.我的问题:如何在react-leaflet中动态添加图层？

谢谢.

如何动态添加标记到React-Leaflet贴图？

我想在用户点击地图时添加新标记.我无法让它发挥作用.

import React, { Component } from 'react'
import { render } from 'react-dom';
import Control from 'react-leaflet-control';
import { Map, Marker, Popup, TileLayer, ZoomControl, ScaleControl } from 'react-leaflet';
import './Points.scss'

export default class PointsMap extends Component {
  state = {
    lat: 50.2, 
    lng: 30.2,
    zoom: 13,
  }

  handleClick = (e) => {
    this.addMarker();
  }

  addMarker() {

    // A) Following raises error:  
    var marker3 = L.marker([50.5, 30.5]).addTo(this.refs.map);

    // B) With following marker doesn't appear on map:
    const position2 = …

我有一个简单的组件来在地图上选择点,然后显示与此点相关的一些GeoJSON数据:

import React, { Component } from 'react';

import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

import { connect } from 'react-redux';
import './style.css';

import { setPoint, fetchData } from '../../actions/map';

@connect(store => {
  return {
    map: store.map
  }
})
class MyMap extends Component {

  mapClick(e) {
    this.props.dispatch(setPoint(e.latlng));
    this.props.dispatch(fetchData(e.latlng));
  }

  render() {
    const marker = () => {
      if(this.props.map.point) {
        return <Marker position={this.props.map.point} />;
      }
    };

    const data = () => {
        if(this.props.map.data.length > 0) {
            const …

我有非常简单的代码来使用react-leaflet显示地图并在其上放置标记.但是,我在浏览器控制台中收到以下两个错误

GET http:// localhost:8080/marker-icon-2x.png 404(未找到)

GET http:// localhost:8080/marker-shadow.png 404(未找到)

我尝试通过下载这两个图像并将它们放在根目录来解决此问题.有用.但是,如何更改react-leaflet标记元素查找标记图像的URL？我想将它们存储在"./images"而不是根目录中.

我正在尝试在react-leaflet 中 创建一个自定义组件，v2扩展传单插件EdgeMarker。该文档并未真正提供有关如何执行此操作的详细信息。所以我Leaflet.EdgeMarker.js从 repo复制了文件并将其添加到我的实现中。

这是我到目前为止所做的：

import PropTypes from 'prop-types';
import { MapLayer, withLeaflet } from 'react-leaflet';
import L from 'leaflet';
import '../EdgeMarker/EdgeMarker';


class EdgeMarkerComp extends MapLayer{

  static childContextTypes = {
    layerContainer: PropTypes.object
  }

  getChildContext () {
    return {
      layerContainer: this.leafletElement
    }
  }

  createLeafletElement(props) {
    const { options } = props;
    console.log("Options: ", options);
    return new L.EdgeMarker(options);
  }

}

export default withLeaflet(EdgeMarkerComp);

在我的地图上：

const options = {
      icon: L.icon({ // style markers
          iconUrl: 'images/edge-arrow-marker-black.png', …

我正在使用反应传单绘制来绘制多边形和圆形.

但是当我选择编辑多边形时,没有移动的拖动处理程序和调整大小.

如果有任何人有同样的问题,如何解决这个问题？

这是代码

              <Map
                 style={this.leafletMapService.getMapStyle()}
                 selectArea={true}
                 onAreaSelected={(event) => this.handleAreaSelection(event)}
                 boxZoom={false}
                 ref={map => {this.map = map}}
                 center={this.props.center}
                 zoom={this.props.zoom}
                 minZoom={this.props.minZoom}
                 maxZoom={this.props.maxZoom}
                 attributionControl={false}
                 doubleClickZoom={false}
                 zoomControl={false}
                 editable={true}
                 onZoomEnd={this.handleZoomEnd}
                 bounceAtZoomLimits={false}
                 crs={this.leafletMapService.getNonGeographicMapCRS()}
                 dragging={!!this.props.selectedSection}
                 scrollWheelZoom={false}>
                <FeatureGroup>
                    <EditControl
                        position='topright'
                        onCreated={(event) => this.onCreatedHandler(event)}
                    />
                    {this.props.children}
                </FeatureGroup>
            </Map>

如果有人可以帮助我，我会非常高兴......我已经在我的反应项目中安装了反应传单并且地图组件已成功加载，我需要获取当前的纬度并在我单击地图时将其显示在弹出窗口中但我不知道怎么做:(

拜托……拜托……帮帮我……

这是我的代码

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

class Mapp extends React.Component {
    componentDidMount() {

    }

    render() {
        return (
            <LeafletMap
                center={[35.755229,51.304470]}
                zoom={16}
                maxZoom={20}
                attributionControl={true}
                zoomControl={true}
                doubleClickZoom={true}
                scrollWheelZoom={true}
                dragging={true}
                animate={true}
                easeLinearity={0.35}
            >
                <TileLayer
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />
                <Marker position={[35.755229,51.304470]}
                draggable={true}
                >
                    <Popup >
                        Popup for any custom information.
                    </Popup>

                </Marker>
            </LeafletMap>
        );
    }
}

export default Mapp;

我正在尝试在react-leaflet GeoJSON onEachFeature 弹出窗口中渲染自定义反应组件，例如用所有相应的feature.properties. 在弹出的反应传单组件中它效果很好

<Popup>
   Some text
   <Another React Component />
</Popup>

但是 GeoJSON 的 onEachFeature 函数看起来像这样

onEachFeature(feature, layer) {
    const popupContent = `
        <div>
            <p>${feature.properties.name}</p>                  
        </div>
            `;
        layer.bindPopup(popupContent);
        }

popupContent是一个html代码，我不知道如何在其中包含反应组件。需要帮忙！谢谢你！

我需要将反应传单地图定位到用户的当前位置并获取该地图的边界。我尝试应用以下代码，但遇到了错误：

类型错误：无法读取未定义的属性“定位”（匿名函数）

请帮我！

import React, { useState, useEffect, useRef } from 'react';
import restaurantsInfo from "./RestaurantsList.json";
import "./App.css";
import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from "react-leaflet";
import { Icon, latLng } from "leaflet";
import Restaurants from "./Restaurants.js";
import LocationMarker from "./LocationMarker.js";
import L from 'leaflet';

const myLocation = [49.1951, 16.6068];
const defaultZoom = 13;

export default function App() {

  const mapRef = useRef();
  useEffect(() => {
    const { current = {} } = mapRef;
    const { leafletElement: map …

在react-leaflet v4中，Popup组件有一个与指向 的关闭按钮关联的默认href #close。React 有没有办法修改这个 href 或禁用 href 重定向？它破坏了我的反应域 HashRouter。

值得注意的是，Leaflet 1.8 中的 Popup.js 有以下代码：

var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container);
closeButton.setAttribute('role', 'button'); // overrides the implicit role=link of <a> elements #7399
closeButton.setAttribute('aria-label', 'Close popup');
closeButton.href = '#close';
closeButton.innerHTML = '<span aria-hidden="true">&#215;</span>';