我正在关注 Leaflet 的 Choropleth 教程
http://leafletjs.com/examples/choropleth.html 并使用 react-leaflet。我设法在没有对原始源代码进行任何修改的情况下设置了样式并且它可以工作。

highlightFeature(e) {
  var layer = e.target;

  layer.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
  });
}

该图层具有 setStyle 属性。现在要重置我有问题的样式。

我试图访问它

resetHighlight(e) { this.refs.geojson.resetStyle(e.target); }

同时拥有 GeoJson

    <GeoJson
        ref="geojson"
        data={this.state.data}
        style={this.getStyle.bind(this)}
        onEachFeature={this.onEachFeature.bind(this)}
      />

但它没有 resetStyle 属性

任何人都可以建议另一种在 react-leaflet 中重置样式的方法？

当用户在移动浏览器上拖动页面时,它就像滚动一样,但是当涉及到地图并且用户的手指在地图内时,传单的拖动事件被触发而滚动则不然.我们想要禁用单指拖动但是保持双指拖动,这样用户可以用2个手指拖动地图,同时用1个手指滚动页面.问题:上面有什么办法吗？

版本:

• react-router-dom 4.1.1
• react-router-redux 5.0.0-alpha.4
• 反应传单1.1.3
• 传单1.0.3

重现步骤

我创建了一张传单地图.我在其中添加了一些标记.这些标记有弹出窗口.在每个弹出窗口中,我想要一个<Link>

如果它有帮助这是我的路由配置:

ReactDOM.render(
  <Provider store={store}>
    <div>
      <AppContainer />
      <ConnectedRouter history={history}>
        <div>
          <MenuContainer />
          <Switch>
            <Route path='/:area/:sport/list' component={ListContainer} />
            <Route path='/:area/:sport/map' component={MapContainer} />
            <Route path='/:area/:sport/rasp' component={RaspContainer} />
            <Route path='/:shortcode/details' component={StationDetailsContainer} />
            <Redirect exact from='/' to='/wellington/paragliding/list' />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </ConnectedRouter>
    </div>
  </Provider>,
  document.getElementById('root')
)

预期的行为

当弹出窗口打开时,我可以看到我的链接并单击它.

实际行为

无法看到链接.它没有生成.

额外细节

在我的内部我<MapMode>使用<Map>传单.如果我<Link>在<Map>标签上方设置它就可以了.一旦我想在我的内部有一个链接<Map>,它就会以某种方式破坏.这是我的页面的React结构,<Popup>标签只包含null在Javascript中断:

这是一个非常复杂的问题,所以请随时向我提问.谢谢.

我尝试了我在网上找到的所有东西,Stackoverflow和Github,我仍然无法做到.

我想用自定义图标制作自定义标记,但是我的代码总是出现错误:'TypeError:options.icon.createIcon不是函数'

这是我的代码(文件夹路径没有错误,一切都在src/js或src/img中)

Icon.js

import L from 'leaflet';

const iconPerson = L.Icon.extend({
  options: {
    iconUrl: require('../img/marker-pin-person.svg'),
    iconRetinaUrl: require('../img/marker-pin-person.svg'),
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
  }
});

export { iconPerson };

MarkerPinPerson

import React from 'react';
import { Marker } from 'react-leaflet';
import {  iconPerson  } from './Icons';


export default class MarkerPinPerson extends React.Component {

  render() {

    return (
      <Marker
        position={this.props.markerPosition}
        icon={ iconPerson }
        >
      </Marker>
      );
  }
}

真的在寻求你的帮助!

如何将React-Leaftlet弹出框上的弹出框上的箭头指向标记,而不是框的右下角,如下图所示？

这是弹出窗口的代码:

<Popup>
  <span>
    <p>Foo</p>
  </span>
</Popup>

我正在使用存储库示例文件夹中的Popup.js代码react-leaflet.在该课程中,我没有看到设置偏移的选项.

即使只是删除向下箭头也可能足够好.

谢谢,

我试图在使用的地图上绘制一个椭圆react-leaflet,它内置了对圆形和矩形的支持.

为了达到这个目的,我使用代码leaflet从这里生成一个椭圆(非反应),我在下面修改并粘贴:

import * as L from 'leaflet';


L.SVG.include ({
    _updateEllipse: function (layer) {
        var // c = layer._point,
            rx = layer._radiusX,
            ry = layer._radiusY,
            phi = layer._tiltDeg,
            endPoint = layer._endPointParams;

        var d = 'M' + endPoint.x0 + ',' + endPoint.y0 +
            'A' + rx + ',' + ry + ',' + phi + ',' +
            endPoint.largeArc + ',' + endPoint.sweep + ',' +
            endPoint.x1 + ',' + endPoint.y1 + ' z';
        this._setPath(layer, d); …

所以我想做的是，我想在获得用户的纬度和经度后更改地图的中心，下面的代码将使问题更清楚：

<LeafletMap
  center={this.state.UserCurrentPosition}
  zoom={17}
  maxZoom={20}
  attributionControl={true}
  zoomControl={false}
  doubleClickZoom={true}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
>
  <TileLayer url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'/>
  <Marker 
    position={this.state.UserCurrentPosition} 
    icon={L.divIcon({
      className: 'user-marker',
      html: `<div  class='icon icon-location'><span class="circle"></span></div>`,
      iconSize: [40, 40],
      iconAnchor: [24, 24]
    })}>
  </Marker>
</LeafletMap>

以下是我想要做的：

componentDidMount() {
  navigator.geolocation.getCurrentPosition(this.showPosition);
}

showPosition = (position) => {
  this.setState({ UserCurrentPosition: [position.coords.latitude, position.coords.longitude] })
}

因此，在我使用setState更改用户的当前位置后，标记的位置会更新，但地图的位置不会更新，所以我想知道我是否做错了什么，或者如何完成。

问题

我在我的 React 项目中使用leaflet v1.7.1和react-leaflet v3.0.5 。

当我尝试React Router 的“Setup”文档页面中的设置示例时，标记图标变成了损坏的图像，如下图红色圆圈所示：

从 React Router 的文档来看，标记应该是这样的：

经检查，保存标记图像的标签src的属性应为。然而，经过检查， my的属性看起来是乱码：<img>https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png<img>src

复制

我创建了一个新的沙箱，其中包含我的代码：

或者，按照以下步骤复制问题：

1. npx create-react-app leaflet-test

2. cd leaflet-test/

3. npm i leaflet react-leaflet

4. 在代码编辑器中打开项目。转到App.js并使用以下代码：

   import React from "react";
   import "./App.css";
   import "leaflet/dist/leaflet.css";
   import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
   
   const styles = {
     mapRoot: {
       height: 400,
     },
   };
   
   export default function App() {
     return (
       <MapContainer
         style={styles.mapRoot}
         center={[51.505, -0.09]} …

   Run Code Online (Sandbox Code Playgroud)

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

 <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',
  // …