如何解决在React传单中编辑单个多边形
所以我正在使用https://github.com/alex3165/react-leaflet-draw
当您单击地图外部的铅笔按钮时,我想使某些特定的多边形可编辑。现在有一个“编辑图层”按钮,但是自然可以使它们全部可编辑,我可以逐个多边形地进行编辑吗?
所以我想做这样的事情: map to edit polygons
我打开了一个问题https://github.com/alex3165/react-leaflet-draw/issues/79,但在那里没有很多成功
事情是通过refs我可以得到一个巨大的圆形物体:this is what I get when I console.log .drawControl._toolbars.edit._modes.edit.handler.options.featureGroup._layers[57]
解决方法
要考虑的一个选项是针对每个形状(特征)创建可编辑图层,而不是为特征的集合创建EditControl
控件:
<FeatureGroup>
<EditControl
position="topright"
/>
</FeatureGroup>
从GeoJSON的每个EditControl
创建feature
实例:
<FeatureGroup>
<EditControl
position="topright"
/>
</FeatureGroup>
...
<FeatureGroup>
<EditControl
position="topright"
/>
</FeatureGroup>
下面的示例演示了这种方法,其中:
- 一次只能编辑一个形状
- 在单击层时发生从一个可编辑层切换到另一层
示例:
function EditableGroup(props) {
const [selectedLayerIndex,setSelectedLayerIndex] = useState(0);
function handleLayerClick(e) {
setSelectedLayerIndex(e.target.feature.properties.editLayerId);
}
let dataLayer = new L.GeoJSON(props.data);
let layers = [];
let i = 0;
dataLayer.eachLayer((layer) => {
layer.feature.properties.editLayerId = i;
layers.push(layer);
i++;
});
return (
<div>
{layers.map((layer,i) => {
return (
<EditableLayer
key={i}
layer={layer}
showDrawControl={i === selectedLayerIndex}
onLayerClicked={handleLayerClick}
/>
);
})}
</div>
);
}
其中
function EditableLayer(props) {
const leaflet = useLeaflet();
const editLayerRef = React.useRef();
let drawControlRef = React.useRef();
let {map} = leaflet;
useEffect(() => {
if (!props.showDrawControl) {
map.removeControl(drawControlRef.current);
} else {
map.addControl(drawControlRef.current);
}
editLayerRef.current.leafletElement.clearLayers();
editLayerRef.current.leafletElement.addLayer(props.layer);
props.layer.on("click",function (e) {
props.onLayerClicked(e,drawControlRef.current);
});
},[props,map]);
function onMounted(ctl) {
drawControlRef.current = ctl;
}
return (
<div>
<FeatureGroup ref={editLayerRef}>
<EditControl
position="topright"
onMounted={onMounted}
{...props}
/>
</FeatureGroup>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。