[英]How to toggle a rectangle grid using react-leaflet's LayerControl?
I want to show or hide a grid of rectangles (the overlay) over a map (the base layer).我想在地图(基础层)上显示或隐藏矩形网格(叠加层)。
I'm using the react Leaflet layers control : doc我正在使用 react Leaflet 图层控件: doc
Problem : My grid shows all the time even if I uncheck the check box问题:即使取消选中复选框,我的网格也一直显示
My grid :我的网格:
class Grid extends MapControl {
createLeafletElement(props) {
const {
leaflet: { map },
} = props;
const minLng = -4.89;
const minLat = 41.29;
const maxLng = 9.65;
const maxLat = 51.22
const nbColumn = 10;
const nbRow = 10;
const rectWidth = maxLng - minLng;
const rectHeight = maxLat - minLat;
const incrLat = rectHeight / nbColumn;
const incrLng = rectWidth / nbRow;
let column = 0;
let lngTemp = minLng;
let latTemp = minLat;
let rect;
const arrRect = [];
while (column < nbColumn) {
let row = 0;
latTemp = minLat;
while (row < nbRow) {
const cellBounds = [[latTemp, lngTemp], [latTemp + incrLat, lngTemp + incrLng]];
rect = L.rectangle(cellBounds, {color: "#1EA0AA", weight: 1}).addTo(map);
arrRect.push(rect);
latTemp += incrLat;
row += 1;
}
lngTemp += incrLng;
column += 1;
}
return rect;
}
}
In my leaflet component :在我的传单组件中:
class Leaflet extends Component {
...
render() {
return (
<Map
<LayersControl>
<LayersControl.BaseLayer name="Open Street Map" checked="true">
<TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
url={this.state.url}
/>
</LayersControl.BaseLayer>
<LayersControl.Overlay name="Grid1">
<LayerGroup>
<Grid />
</LayerGroup>
</LayersControl.Overlay>
</LayersControl>
I did not manage to load your grid so I provide another simpler grid example.我没有设法加载您的网格,因此我提供了另一个更简单的网格示例。
To control the Grid's visibility you need to use react-leaflet
's updateLeafletElement
method to trigger prop changes on your custom react-leaflet component.要控制网格的可见性,您需要使用react-leaflet
的updateLeafletElement
方法来触发自定义 react-leaflet 组件上的 prop 更改。 Pass a showGrid prop to be able to control Grid's visibility.传递一个 showGrid 道具来控制 Grid 的可见性。
updateLeafletElement(fromProps, toProps) {
const { map } = this.props.leaflet;
if (toProps.showGrid !== fromProps.showGrid) {
toProps.showGrid
? this.leafletElement.addTo(map)
: this.leafletElement.removeFrom(map);
}
}
then in your map component listen to leaflet's overlayadd & overlayremove to be able to toggle a local flag which will control the visibility of the grid using an effect:然后在您的地图组件中收听传单的 overlayadd 和 overlayremove 以能够切换本地标志,该标志将使用效果控制网格的可见性:
useEffect(() => {
const map = mapRef.current.leafletElement;
map.on("overlayadd", (e) => {
if (e.name === "Grid1") setShowGrid(true);
});
map.on("overlayremove", (e) => {
if (e.name === "Grid1") setShowGrid(false);
});
}, []);
<LayersControl.Overlay
checked={showGrid}
name="Grid1"
>
<LayerGroup>
<Grid showGrid={showGrid} />
</LayerGroup>
</LayersControl.Overlay>
Edit : The App component as class based component it will look like this:编辑:作为基于类的组件的 App 组件将如下所示:
export default class AppWithNoHooks extends Component {
state = {
showGrid: false
};
mapRef = createRef();
componentDidMount() {
const map = this.mapRef.current.leafletElement;
map.on("overlayadd", (e) => {
if (e.name === "Grid1") this.setState({ showGrid: true });
});
map.on("overlayremove", (e) => {
if (e.name === "Grid1") this.setState({ showGrid: false });
});
}
...
I don't get the error you mentioned.我不明白你提到的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.