标签: react-leaflet

我使用以下代码在地图中创建一个矩形leaflet。

const rectangles = [[51.49, -0.08], [51.5, -0.06]]   

<Rectangle key={key} bounds={rectangle} color="green">

</Rectangle>

我想在矩形内添加文本，就像矩形的标签一样，有办法做到这一点吗？

我为此使用了react-leaflet库。

我正在尝试将一些 GeoJSON 导入到事件处理程序FeatureGroup中_onFeatureGroupReady，但它似乎没有渲染到地图中。该代码主要基于react-leaflet-draw 此处库中的示例。奇怪的是，编辑菜单变得可用，表明数据可能存在，但只是没有被渲染。

我不确定发生了什么，因为我总体来说是地图的初学者。相关代码在else if(this.props.data) {块中。这些console.log()报表均显示数据存在且格式正确。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              37.79,
              -122.45
            ],
            [
              37.79,
              -122.42999999999999
            ],
            [
              37.77,
              -122.42999999999999
            ],
            [
              37.77,
              -122.45
            ],
            [
              37.79,
              -122.45
            ]
          ]
        ]
      }
    }
  ]
}

这是我尝试将此数据导入到的代码FeatureGroup：

_onFeatureGroupReady = (ref) => {
    console.log('_onFeatureGroupReady');
    console.log(ref);
    if(ref===null) {
        return;//bug???
    }
    this._editableFG = ref; 
    // populate the …

我正在尝试使用react-leaflet.js获取基本地图。这是我的代码：

import React from 'react';
import { Map } from 'leaflet';

const mapStyle = {
  height: '400px'
};

const mapCenter = [0, -0];
const zoomLevel = 3;

export default class MapT extends React.PureComponent {
  render() {
    return (
      <div>
        <Map
          style={mapStyle}
          center={mapCenter}
          zoom={zoomLevel}
        >
        </Map>
      </div>
    );
  }
}

但是我遇到一个错误：

Uncaught TypeError: Cannot read property 'initialize' of undefined
    at NewClass (leaflet-src.js:300)
    at mountIndeterminateComponent (react-dom.development.js:14003)
    at beginWork (react-dom.development.js:14470)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev …

我在准系统应用程序中使用leaflet-react的简单示例。create-react-app

问题：地图图块确实会渲染，但始终有 1-2 行地图图块未渲染（呈灰色）。当地图移动时，不同的行将开始消失。

但是，如果我要调整浏览器窗口的大小，地图就会正确渲染！

问题是什么？我们该如何解决？

使用react-leafletv2.2.1、1.4.0 leaflet。Chrome 浏览器和 Brave 浏览器上也存在同样的问题。

地图.js

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

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

    render() {
        const position = [this.state.lat, this.state.lng];

        return (
            <div>
                <Map center={position} zoom={this.state.zoom}>
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    />
                    <Marker position={position}>
                        <Popup>
                            <span>A …

我在 React 中有一个 Leaflet 地图，使用react-leaflet和react-leaflet-markercluster

集群似乎工作得很好，但如果我单击其中一个集群CircleMarker，或者Tooltip它打开一个新链接（我将其作为onClick），但不幸的是集群 Spiderfy 关闭，因此如果用户想要单击其他链接，他们需要重新打开（并重新蜘蛛化）簇，然后冲洗并重复。有什么方法可以让 Spiderfy 在单击时保持打开状态，并在缩小时关闭它（后者已经表现正常）？

例如，单击“Huckberry”将打开一个新链接，关闭工具提示：

但不幸的是，单击 onClick 链接后，集群也会关闭并出现 Spiderfy：

这是我的代码：

        <Map
          style={{ height: "480px", width: "100%", opacity: "0.9" }}
          zoom={screensizeZoom}
          maxZoom={20}
          center={[37.7687477, -99.6820275]}
          attributionControl={false}>
          <TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png"
            attribution="Map by <a href='http://stamen.com' target='_blank'>Stamen Design</a> | &copy; <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
          />

          <AttributionControl position="bottomright" prefix={false} />

          <MarkerClusterGroup
            spiderfyDistanceMultiplier={1}
            showCoverageOnHover={false}
            maxClusterRadius={35}
          >
            {this.state.dataMaps.map((dataItem, k) => {
              let { coordinates, company, url, loc } = dataItem;
              return (
                <CircleMarker onClick={() …

默认情况下使react-leaflet v3 中的属性不可变的原因是什么？现在，如果我更改任何此类属性，那么我必须使用不同的属性key来强制更新组件。无论如何，这是正确的方法吗？

在 v2 中，我发现属性默认是可变的，这样我就不必做这样的“黑客”了。（属性）可变性是 React 的核心概念之一。

我正在使用react-leaflet，并添加了一个带有事件处理程序的标记，单击即可缩放到该标记，但是当我尝试使用 const map=useMap() 时，我得到的只是这个错误=>：

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>

可能有类似的问题但没有答案，有人可以帮忙解决吗？这是我的代码：

const map = useMap()
 return (
        <div>
          <MapContainer
            className="leaflet-container"
            center={[33.8735578, 35.86379]}
            zoom={9}>

            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />

            <Marker
              icon={port}
              eventHandlers={{
                click: (e) => {
                  map.setView(e.latlng, 14);
                },
              }}
              position={[33.90757548098519, 35.51700873340635]}
            ></Marker>
          </MapContainer>

谢谢！

我正在尝试使用react-leaflet-markercluster，但添加<MarkerClusterGroup>到代码后，控制台中会显示错误，并且页面不会加载。如果不添加这个组件，一切都会正常。

也许问题出在版本冲突上，但我尝试回滚 的版本react-leaflet，但react-leaflet@3.2.1与其余软件包安装时也会发生冲突。因此，我决定专注于实际版本。

应用程序.js

import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/dist/styles.min.css'

const App = () => {
  return (
    <div className="container">
      <MapContainer className="map-container" center={[49.8397, 24.0297]} zoom={6}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />        
        <MarkerClusterGroup>
          <Marker position={[49.8397, 24.0297]} />
          <Marker position={[52.2297, 21.0122]} />
          <Marker position={[51.5074, -0.0901]} />
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  )
}

export default App

错误：

Uncaught Error: No context provided: useLeafletContext() can only …

我突然得到这个错误。

代码在我使用时工作正常，但在使用Jest测试时会弹出此问题。...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ......

细节：

    C:\node_modules\react-leaflet\lib\index.js
:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { us
eMap, useMapEvent, useMapEvents } from './hooks.js';
                                                                                      ^^^^^^     

    SyntaxError: Unexpected token 'export'

       9 | } from 'react-leaflet';
      10 | import { private } from 'private';
    > 11 |
         | ^

这是我的笑话配置

module.exports = {
  moduleNameMapper: {
    // Resolve .css and similar files to identity-obj-proxy instead.
    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
    // Resolve .jpg and similar files to __mocks__/file-mock.js
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
  },

  clearMocks: true,

  coverageDirectory: 'coverage',
  // …

我将 React leaflet 与自定义 CRS、Leaflet CRS 文档一起使用

我想做的是：

1. 自定义图像在地图容器中显示为ImageOverlay
2. 当用户单击图像上的某个位置时，标记将显示在图像顶部ImageOverlay

所以插图是这样的：

这是我的尝试：

地图容器

<MapContainer
    center={[250, 500]}
    zoom={0}
    style={{ height: '100vh', width: '100%' }}
    crs={L.CRS.Simple as CRS}
    maxZoom={2}
    zoomControl={false}
    doubleClickZoom={false}
    scrollWheelZoom={false}
    dragging={false}
    >
    <MapClick />

     {/**This is where I display the marker */}
    {routePoints.map((point, index) => (
    <Marker
        key={index}
        position={point}
        icon={L.icon({
        iconUrl: `${playerMarkerAssest}`,
        iconSize: [35, 35],
        })}
    />
    ))}

    {/**This is the image url */}
    <ImageOverlay url={mapAssest} bounds={imageBounds} />
</MapContainer>

使用地图事件

useMapEvents({
    click: (e) => {
        setRoutePoints([...routePoints, e.latlng]); …