React Leaflet 问题：如何正确配置 ReactLeaflet 矢量形状 pathOptions？

如何解决React Leaflet 问题：如何正确配置 ReactLeaflet 矢量形状 pathOptions？

我将矢量形状引入到我的 React Leaflet 项目中，但我无法应用 pathOptions。 Pathoptions 似乎不适用于矢量形状。

我正在尝试复制工作正常的文档示例... https://react-leaflet.js.org/docs/example-panes/

...但将完全相同的代码结构应用于沙箱不起作用： https://codesandbox.io/s/react-leaflet-pathoptions-not-working-n3env?file=/src/index.js

代码提取

  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"
          />
          <Pane name="orange-circle" style={{ zIndex: 500 }}>
            {/* note that pathoptions are being ignored */}
            <Circle
              center={this.state.center}
              radius={1000}
              pathOptions={{fillOpacity: 1,color: "orange"}}
            />
          </Pane>
        </Map>
      </div>
    );
  }
}

结果：未应用 pathOptions。

对于我可能遗漏的任何帮助或建议，或者工作沙箱，我们都非常感谢。

解决方法

pathOptions 在新的 MapContainer 组件内的 react-leaflet 3 中实现。

react-leaflet 3.1 - pathOptions w/ MapContainer 注意 react-leaflet 3.1.0 的依赖变化

使用 react-leaflet 2.8 的一种解决方法是将选项声明为一个对象，然后将其传播到组件中以将每个选项作为其自己的 prop 传递。

react-leaflet 2.8 - pathOptions work-around

---

const { Map,TileLayer,Pane,Path,Circle } = window.ReactLeaflet;

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

  render() {
  
  const pathOptions= {fillOpacity: 1,color: "orange"};
  
    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"
          />
          <Pane name="orange-circle" style={{ zIndex: 500 }}>
            {/* note that pathoptions are being ignored */}
            <Circle
              center={this.state.center}
              radius={1000}
             {...pathOptions}
            />
          </Pane>
        </Map>
      </div>
    );
  }
}

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

.leaflet-container {
  height: 100vh;
  width: 100vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.8.0/react-leaflet.min.js"></script>


<div id="root"></div>