javascript - 如何使用 react-leaflet 的 LayerControl 切换矩形网格?
问题描述
我想在地图(基础层)上显示或隐藏矩形网格(覆盖)。
我正在使用 react Leaflet 图层控件:doc
问题:即使我取消选中复选框,我的网格也会一直显示
我的网格:
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;
}
}
在我的传单组件中:
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>
解决方案
我没有设法加载您的网格,所以我提供了另一个更简单的网格示例。
要控制 Grid 的可见性,您需要使用react-leaflet
'updateLeafletElement
方法来触发自定义 react-leaflet 组件上的 prop 更改。传递一个 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);
}
}
然后在您的地图组件中收听传单的覆盖添加和覆盖删除,以便能够切换本地标志,该标志将使用效果控制网格的可见性:
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>
编辑: 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 });
});
}
...
我没有得到你提到的错误。
推荐阅读
- pyqt5 - 当我在 MainWindow pyqt5 中时,如何防止小部件中的 QPushButton.clicked 执行?
- visual-studio-code - 如何删除 VSCode 中不必要的缩进指南?
- linux - 粘贴文本时防止添加额外的空行
- flutter - 在 Flutter 中显示两个 Firestore 时间戳值之间的差异
- python - pytest-mock:在没有夹具和导入的情况下模拟不起作用是全局的
- ios - 如何设计一个设置模型来一般地获取所有 UserDefaults 键的 + 设置值
- discord - Discord py,如何使用角色metnion删除权限
- php - Laravel 路由:如何动态使用路由
- php - 在 WooCommerce 中创建订单之前触发的最后一个钩子是什么?
- xmlhttprequest - xhr 使用 Windows 身份验证服务