标签: react-leaflet

我试图在我的反应网站上显示示例地图。我已经安装了传单包和反应传单包，然后按照反应传单文档所述进行所有设置。您可以在下面查看我的代码，以获取有关我如何设置它的参考。

 <div>
  <h3 className='text-4xl my-4 text-center text-slate-800 font-bold'>Maps and Direction</h3>
  <div className='mx-auto py-2' style={{ width: "80%", height: "100%" }}>
    <MapContainer center={position} zoom={13} scrollWheelZoom={true}>
      <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={position}>
        <Popup>
          Website Name
        </Popup>
      </Marker>
    </MapContainer>
  </div>
</div>

我还在我的index.html中导入了传单CSS CDN，如下所示，

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />

我还设置了地图容器的定义高度和宽度，正如您在我的代码中看到的那样。但它显示了地图的一些分散部分，如下图所示。

。

请任何人帮助我解决可能出现的问题或者我是否缺少任何说明。

我突然得到这个错误。

代码在我使用时工作正常，但在使用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]); …

现在我通过传递一个bounds参数来设置我的反应传单映射的边界,如下所示:

   <div hidden={!this.props.hide && !this.props.toggle} className="map-container">

       <Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >

       <Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>

             { this.geoResults().map(this.renderMarker) }


       </Leaflet.Map>

   </div>

问题是有时标记会在地图的最外面部分(在视​​图中)呈现,因此除非我拖动地图或缩小一个点,否则标记甚至不可见.我试图用缓冲区修复此问题或尝试绘制边界然后使用缩放来缩小一次,但似乎没有任何效果.你们有什么想法吗？

该react-leaflet地图不得到适当的渲染。

• 地图绘制在其父级边界之外
• 地图的某些图块丢失

当将地图与标准react组件一起使用时，会发生此问题。

我的网站也使用react-bootstrap。如我所读，这可能会导致如何react-leaflet渲染某些潜在问题。

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

const position = [37.335556, -122.009167];

class MapView extends React.Component {
    render() {
        return (
                  <div
                    style={{
                        height:"100%"
                    }}>
                    <Map center={position} zoom={13}>
                        <TileLayer
                          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        />
                        <Marker position={position}>
                          <Popup>
                            <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
                          </Popup>
                        </Marker>
                      </Map>
                  </div>
        );
    }
}

module.exports = MapView;

我有一个离线的Leaflet地图,其中的国家/地区是从带有坐标的巨大Javascript变量中提取的.

index.html就是这样(来自codepen的一个例子,我在本地加载库):

<html>

<head>

  <title>Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

</head>

<body>

  <div id="mapid" style="width: 100%; height: 800px;"></div>

</body>

</html>

而Map.js是这样的:

var map = L.map('mapid').setView([0, 0], 2);

// Huge geojson of every country, one country sample here. 
var countries =  "type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "id": "AFG",
    "properties": {
        "name": "Afghanistan"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [61.210817, 35.650072],
                [62.230651, 35.270664],
                [62.984662, 35.404041], …

在原生 Leaflet 地图中，lib CRS 属性应设置如下

var mymap = L.map('mapid', {
    center: [-1800, 1000],
    zoom: 13,
    crs: L.CRS.Simple,
    minZoom: 0,
    maxZoom: 13,
});

如何在 react-leaflet 中做到这一点，我尝试了一些方法但没有成功：/

    <Map crs={CRS.useSimple()} center={[-1800, 1000]} zoom={13} doubleClickZoom={false} >

    </Map>

但是出现了没有导入CRS的错误。如何导入CRS？

我哪里错了？

我知道LatLng，但我想检索类似于以下链接的库的地址：https://github.com/perliedman/leaflet-control-geocoder，但我不知道如何使用这个库进行react-leaflet 2.1.2.

我的地图有问题。一张react-leaflet地图。它在我加载我的网站时显示。但另一方面，就像点击链接一样，它没有。我只是在滚动时一张一张地加载左上角的图块。

以前有人遇到过这个问题吗？或者有人有什么想法？

一个例子：http : //www.noelshack.com/2019-02-1-1546872914-capture.png

import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './local_leaflet.css';

const mapState = {
  lat: 49.4431,
  lng: 1.0993,
  zoom: 10,
  visible: true,
  url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
};

export default () => (
  <div>
    <Map center={[mapState.lat, mapState.lng]} zoom={mapState.zoom}>
      <TileLayer url={mapState.url} />
    </Map>
  </div>
);

我已经尝试过componentDidMount, componentDidUpdate, componentWillUnmount... 没有任何效果。

我的问题是，react-leaflet<MapContainer>并不以我动态设置的位置为中心。基本逻辑是，我有一个表单，在其中输入街道和门牌号，然后调用 Nominatim 并获取一些 JSON 格式数据，从中提取建筑物的纬度和经度。这些经纬度我传递给我的<MapContainer>，但它无论如何都没有回应。使用react-leaflet v2它工作得很好，但是在我更新到v3之后它就停止了。

每当我设置默认位置值时，MapContainer 都会以该位置为中心。但是，当我通过 Nominatim 调用动态传递另一个值时，它不起作用。

我在这里呼吁提名：

const getSearchData = async () => {
    const exampleReq = `https://nominatim.openstreetmap.org/search/${query}?format=json&building=*&addressdetails=1&limit=1&polygon_geojson=1`;
    const response = await fetch(exampleReq);
    const data = await response.json();
    // console.log(data);
    if (data === undefined || data.length === 0) {
        // array empty or does not exist
        console.log("data array is empty");
        alert("Given address unrecognized! Try again please.")
        setLatitude(DEFAULT_LATITUDE);
        setLongitude(DEFAULT_LONGITUDE);
    }else{
        setLatitude(data[0].lat);
        setLongitude(data[0].lon);
    }
};

这是我的表单的提交：

<form className={style.searchForm} onSubmit={e => {
                e.preventDefault();
                setQuery(street + …