标签: react-leaflet

我正在尝试创建一个react-typescript应用程序以及传单。我使用了命令，

npm install leaflet react-leaflet @types/react @types/leaflet --save 安装依赖项。

但是当我启动应用程序时，它说，

    ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

这是我的 package.json

{
  "name": "aq-monitor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": …

我有以下反应类,它通过浏览器获取地理位置.

我正在绘制传单地图.我想将地理定位作为setView的输入,以便地图"缩放"到客户端浏览器位置的区域.

这是反应类:

    import React from 'react';
    import L from 'leaflet';
    import countries from './countries.js'; 

    var Worldmap = React.createClass({

        render: function() {

            let geolocation = [];

            navigator.geolocation.getCurrentPosition(function(position) {
                let lat = position.coords.latitude;
                let lon = position.coords.longitude;
                geolocation.push(lat, lon);
                locationCode()
            });

            function locationCode() {
                if(geolocation.length <= 0)
                    geolocation.push(0, 0);
            }


            let map = L.map('leafletmap').setView(geolocation, 3);

            L.geoJSON(countries, {
                style: function(feature) {
                    return {
                        fillColor: "#FFBB78",
                        fillOpacity: 0.6,
                        stroke: true,
                        color: "black",
                        weight: 2
                    };
                }
            }).bindPopup(function(layer) {
                return layer.feature.properties.name;
            }).addTo(map);

            return ( …

我正在尝试用来react-leaflet显示地图.我使用这个小提琴的代码正在工作,但在我的电脑上我有这个输出

这是我的代码:

DeviceMap.js

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

export class DeviceMap 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} scrollWheelZoom={false}>
        <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 pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default DeviceMap

DeviceTabs.js …

我不知道如何在 Leaflet 地图上调用 fitBounds()。

如果我只是使用香草传单，这个解决方案将完美地工作：缩放以适应 Mapbox 或传单中的所有标记

不幸的是，我正在使用 react-leaflet。

如果我只是单独使用传单，这是解决方案。

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

我认为这段代码（我的代码）this.mapRef.current.leafletElement相当于var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();，但是什么map.fitBounds();相当于 react-leaflet 中的？

基本上，我试图在地图上显示多个标记并相应地调整视图（放大、缩小、飞到等）。

这是我的代码。

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

export default class MasterLeafletMap extends Component {
  constructor(props) {
    super(props);
    this.markers = this.markers.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.mapRef = createRef()
  }

  handleClick() {
    const leafletMap = …

我收到一个 ReferenceError：

将 next.js 与 Leaflet.js 一起使用时未定义 window 。

想知道这个问题是否有一个简单的解决方案 - 使用 next.js 是否使我的工作流程过于复杂？

对于那些对确切代码感到好奇的人，

import React, { createRef, Component } from "react";
import L from "leaflet";
import { Map, TileLayer, Marker, Popup, DivOverlay } from "react-leaflet";
import axios from "axios";
import Header from "./Header";


export default class PDXMap extends Component {
  state = {
    hasLocation: false,
    latlng: {
      lat: 45.5127,
      lng: -122.679565
    },
    geoJSON: null
  };

  mapRef = createRef();

  componentDidMount() {
    this.addLegend();
    if (!this.state.hasLocation) {
      this.mapRef.current.leafletElement.locate({
        setView: true
      }); …

我在 Next js 中使用react-leaflet，但是当重新加载页面时显示“窗口未定义”，即使我使用 ssr:false 的动态导入，我在这里看到了其他人提出的这个问题，并尝试了他们提供的答案，但没有成功，还尝试使地图安装在组件之后，但再次没有结果，我的代码：

function ContactPage() {
    const MapWithNoSSR = dynamic(() => import('../Map/Map'), {
        ssr: false,
    })
    return (
        <div className={styles.map}>
            <MapWithNoSSR/>
        </div>
    )
}

function Map(){

const [markers, setMarkers]= useState([
        {cord:[12.3774729,20.446257]},
        {cord:[45.3774729,10.45224757]},
        {cord:[40.3774729,15.4364757]},
    ])

<MapContainer center={[12.374729,22.4464757]} zoom={13} scrollWheelZoom={true} style={{height: "100%", width: "100%",zIndex:'1'}}>
          <TileLayer
              url={`example.com`}
              attribution='Map data &copy; <a>Mapbox</a>'
          />
          {markers?.map((element,idx)=>{
            return <Marker
                position={element?.cord}
                draggable={true}
                animate={true}
                key={idx}
            >
              <Popup>
                Test PopUP
              </Popup>
            </Marker>
          })}
        </MapContainer> 

}}
}

我有一个包含 4360 个地理标记的数据集，希望在 Leaflet 地图上显示。CircleMarker 工作正常，构建的地图的性能还可以。但是，构建地图需要太多时间（大约 20 秒）。没有反应，构建标记需要几分之一秒。是否有一些性能提示或技巧可用于使其更快地构建地图？

import * as React from 'react';
import { Component } from 'react';
import { LatLng } from 'leaflet';
import { Map, TileLayer, CircleMarker, Popup } from 'react-leaflet';

export default class Editor extends Component {
    state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 13,
        markers : [ ]
    }

    componentDidMount() {
        // data.csv contains several thousands of items
        fetch('data.csv')
            .then(res => res.json())
            .then(data => this.setState({ markers: data.items.map(v => new LatLng(v.lat, v.lng)) }));
    } …

我想获得当前地图的边界,以便我可以使用Overpass API搜索这些边界.

对于传单我知道方法只是map.getBounds(),但我不知道如何在react-leaflet中实现它.

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

  componentDidMount() {
    console.log(this.refs.map.getBounds())
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} ref='map'>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
      </Map>
    );
  }
}

这就是我尝试过的.错误说这this.refs.map.getBounds不是一个功能.

我有一个 React 应用程序，我在其中通过react-leaflet使用Leaflet，这两个库都非常有用。

在这个应用程序中，我有一组坐标需要渲染如下：

1. 缩小时，将坐标聚类为标记聚类，如下所示

2. 放大时，每个 Marker 需要有

   1. 它下面有一个动态倒数计时器
   2. 一个动态的 SVG 倒计时时钟，就像这样

对于聚类，我使用react-leaflet-markercluster插件，它非常适合显示静态内容。

但是，当我需要在每个标记中显示任何动态内容时，我无法选择发送JSX，只有从此处提供的示例中可以看出，只有静态 HTML 的规定。

// Template for getting popup html MarkerClusterGroup
// IMPORTANT: that function returns string, not JSX
function getStringPopup(name) {
  return (`
    <div>
      <b>Hello world!</b>
      <p>I am a ${name} popup.</p>
    </div>
  `);
}

// that function returns Leaflet.Popup
function getLeafletPopup(name) {
  return L.popup({ minWidth: 200, closeButton: false })
    .setContent(`
      <div>
        <b>Hello world!</b>
        <p>I am a ${name} …

我刚刚开始了一个全新的项目，使用create-react-app并react-leaflet按照他们的文档在这里推荐的进行设置。

我正在尝试使用此示例来检查它是否一切正常，但随后我收到以下错误：

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

看起来react-scripts不能处理react-leaflet文件。有人可以帮助我了解为什么会发生这种情况以及如何解决吗？