标签: react-leaflet

我正在使用与图书馆传单的反应，但我想在我的地图上添加以公里为单位的比例尺。

我该怎么做才能做到这一点？

这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles.css';

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13,
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

这是链接： …

所以我对反应和传单真的很陌生，但我想做的基本上就是让用户输入一些输入，然后在他们按回车键后，触发一个事件，然后该事件飞到从该输入生成的坐标。我正在使用地理编码，经纬度坐标已成功生成。但是我不知道如何使地图飞到那个位置。这是我到目前为止所拥有的：

import './App.css';
import * as React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Geocode from "react-geocode";
import SearchBar from './SearchBar';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      position: [43.653225, -79.383186]
    }
  }
  mapRef = React.createRef();

  changePos (pos) {
    this.setState({position: pos});
    this.mapRef.current.flyTo(pos);
  }

  render () {
    return (
      <ChakraProvider resetCSS = {false}>
        <div className = "App">
          <div id="title">
            <h1>
              CovidStopSpots
            </h1>
              <p>A responsive …

我不确定这是否是react-leaflet-markercluster、react-leaflet、leaflet、react或我的代码的问题。

我有一张包含数千个标记的地图，我正在使用react-leaflet-markercluster 进行标记聚类。如果我需要更新 的全局状态MapComponent，则反映此更改时会有 1-3 秒的延迟。

我创建了一个包含 5000 个标记的codeandox，您可以看到有 2 个存在性能问题的用例：

1.)MapComponent位于react-reflex元素内部，允许调整面板大小并将新尺寸（宽度、高度）传播到MapComponent. 如果宽度和高度发生变化，mapRef.invalidateSize()则调用该函数来更新地图尺寸。调整大小非常慢。

2.) 如果用户单击Marker，则更新所选的全局状态。它是单击的标记 ID 的列表。地图调用fitBounds方法以关注单击的标记，并且标记图标也发生更改。大约有 1 秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，则在开发模式下需要 2-3 秒才能反映更改，并且它只是MapComponent及其元素（标记）的一次重新渲染。

我查看了 Chrome 性能概况，似乎大部分时间都花在内部 React 方法上。

可以通过使用 防止重新渲染来解决此问题memo，这与 类似shouldComponentUpdate，但它使整个代码库过于复杂。preferCanvas选项不会改变任何东西。我想知道解决这些问题的好方法是什么。

我试图用传单标记方法绘制大约 50K 点，但由于渲染时间和所需的内存而无法实现。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点（而不是在 DOM 中）。我如何在 React leaflet 3.X 中执行此操作。我尝试了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但它不支持传单的V3。

有什么建议吗？

问题是，在我的 React 项目中使用 TS 时，我需要设置函数的类型useRef()，但我不知道它是什么。正如下面的代码所示，我将其设置为然后any调用leafletElement。出现的问题是，即使通过whenCreated函数 isnide引用了映射，该元素也始终是未定义的MapContainer。

我试图MapContainer以一种显示所有内容的方式进行设置Marker，使其动态调整大小，因此当位置更改时，它会更新它并调整它，MapContainer因为它没有属性ref。

我试图重现的示例

const MapTry = () => {
const [nodes, setNodes] = useState<INode[]>([]);
const [devices, setDevices] = useState<IDevice[]>([]);

const [nodeDeviceTest, deviceNodeConnection] = useState([]);
var arrObj: any = [];
var arrOfBounds: any = [];
var mapRef = useRef<any>();
var groupRef = useRef<any>();


var device = new L.Icon({
    iconUrl: deviceCar,
    iconSize: [30, 30],
    iconAnchor: [16, 3],
    popupAnchor: [1, …

背景

对于React Leaflet v2，有一个NPM插件react-leaflet-control，它允许您创建任何类型的控件并将其放入react-leaflet控件容器中。显然，随着 RL-v3 的引入，随着 API 的更改，这在 v3 中不再适用。我想创建一个自定义控件包装器，以允许我在其中放置任何类型的 React Node。

当前状态

我目前拥有的代码可以工作......但不能。我从 Stack Overflow 帖子中的示例中提取了内容：React Leaflet V3 Custom Control，它让我获得了创建自定义控件的 99% 解决方案。但是，我的用例是地图上的工具栏，其中包含可交互的按钮（颜色用于指定活动工具）。然而，通过这段代码，我拥有了该功能，但由于每次渲染都会导致创建一个新控件，因此工具提示会在失去其锚元素时闪烁。

期望的行为

我想要一个工具栏，允许用户选择工具在地图上执行操作（想想老式的）leaflet-draw。为了提供反馈，我希望按钮在工具处于活动状态时改变颜色，对于用户体验，我想要工具提示来描述操作按钮的。

实际行为

工具栏存在，用户可以选择工具并且有 UI 反馈，但是，当选择工具时在每个渲染上删除并重新添加控件时，工具提示会丢失其锚元素。

代码沙箱

https://codesandbox.io/s/react-leaflet-custom-control-n1xpv

我尝试在 Next JS 13.0.1 项目中实现 LeafLet 地图组件，但地图组件的渲染出现问题。

第一次加载地图组件时，出现这样的错误：

ReferenceError: window is not defined
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:229:19)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:7:11)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:9:3)
    at Object.(sc_client)/./node_modules/leaflet/dist/leaflet-src.js (C:\desenvolvimento\estacionai-front\.next\server\app\page.js:482:1)
    at __webpack_require__ (C:\desenvolvimento\estacionai-front\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js:2:18)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js:4:2)
    at Object.(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js (C:\desenvolvimento\estacionai-front\.next\server\app\page.js:472:1)  
    at __webpack_require__ (C:\desenvolvimento\estacionai-front\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./components/Mapa.tsx:11:91)

无论如何，地图会加载，但标记之类的东西不会出现

真正的问题是当页面重新加载时，是硬重新加载或链接引用。出现此错误：

TypeError: Cannot read properties of undefined (reading 'default')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:330:14) …

我正在使用 React Leaflet 创建自定义地图。

当前正在渲染卡片（图像叠加），但它不会填充放置卡片的容器。

容器的大小是严格设置的，我希望地图尽可能填充容器。所有使用 CSS 调整大小的尝试都失败了。

实例： https: //codesandbox.io/s/dark-worker-8qbzfr

我的代码：

import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const M = ({ width, height, zoom, center }) => {
  const wh = [width, 500];
  const origin = [0, 0];
  const bounds = [origin, wh];

  return (
    <div style={{ width: "1100px", height: "600px" }}>
      <MapContainer
        style={{ height: "100%", minHeight: "100%" }}
        bounds={zoom ? undefined : bounds}
        boundsOptions={{
          padding: [0, 0]
        }}
        maxBounds={bounds}
        zoom={center ? zoom : …

我在尝试将react-leaflet与nextjs 集成时遇到一些麻烦。当我在index.tsx文件中使用地图时，我使用动态导入。当我使用“pnpm dev / run”运行应用程序时，这工作正常，当我尝试构建应用程序时，问题就出现了。当使用“pnpm build”时，它编译得很好，但是当它处于“收集页面数据”步骤时，它崩溃并返回和错误，完整的日志如下：

日志

$ pnpm build\n\n> tjenesteplattform@0.1.0 build C:\\Users\\OlavA\\OneDrive\\Desktop\\Tjenesteplattform\n> next build\n\ninfo  - Loaded env from C:\\Users\\OlavA\\OneDrive\\Desktop\\Tjenesteplattform\\.env\nwarn  - Invalid next.config.js options detected: \n  - The root value has an unexpected property, styledComponents, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, …

我使用react-leaflet在地图上可视化很长的路径.用户可以从列表中进行选择,我希望所选路径具有不同的颜色.更改状态和再次渲染太慢,我正在寻找更快的解决方案.

Leaflet路径元素有setStyle()方法,所以我的第一个想法是使用它而不是再次渲染.但是如何参考传单层？

class MyPathComponent extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.selected){
      this.setState({selected: true});
      LEAFLET_POLYLINE.setStyle({
        color: 'red'
      });
    }
    return false;
  }

  render() {
    return(
      <Polyline polylines={this.props.path} />
    );
  }
}

那么我应该在这段代码中编写什么而不是LEAFLET_POLYLINE？