Удалите слой, прежде чем создавать новый с помощью ответной-листовки-рисования в листовке - PullRequest
Новая
       62

Удалите слой, прежде чем создавать новый с помощью ответной-листовки-рисования в листовке

0 голосов
/ 07 апреля 2020

Моя цель здесь - разрешить использование только одного многоугольника на карте. Мой подход заключается в сохранении нового слоя во время метода onCreated в var или массиве и в методе onDrawStart, чтобы получить и удалить его, поэтому, как только пользователь пытается нарисовать другую фигуру, предыдущий удаляется, но это не так. работает, есть какие-нибудь предложения, как сделать это возможным? 

onCreated = (e) => {
  coordinates = e.layer._bounds;
  layer.push(e.layer);
}

onDrawStart = (e) => {
  layer.forEach((ele) => {
    ele.remove()
  });
}

Может быть, есть какой-нибудь способ получить доступ к onDelete и получить доступ к встроенному удалить все ??

1 Ответ

1 голос
/ 09 апреля 2020

Этого можно добиться, проверив количество сохраненных нарисованных слоев с помощью featureGroupRef. Если число больше единицы, тогда удалите предыдущий сохраненный слой и оставьте только последний. Вот код: 

const [editableFG, setEditableFG] = useState(null);

const onCreated = e => {
    console.log(e);
    console.log(editableFG);

    // here you have all the stored layers
    const drawnItems = editableFG.leafletElement._layers;
    console.log(drawnItems);
    // if the number of layers is bigger than 1 then delete the first
    if (Object.keys(drawnItems).length > 1) {
        Object.keys(drawnItems).forEach((layerid, index) => {
            if (index > 0) return;
            const layer = drawnItems[layerid];
            editableFG.leafletElement.removeLayer(layer);
        });
        console.log(drawnItems); // here you will get only the last one
    }
};

const onFeatureGroupReady = reactFGref => {
    // store the featureGroup ref for future access to content
    setEditableFG(reactFGref);
};

return (
    <Map
        center={[37.8189, -122.4786]}
        zoom={13}
        style={{ height: '100vh' }}>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <FeatureGroup
            ref={featureGroupRef => {
                onFeatureGroupReady(featureGroupRef);
            }}>
            <EditControl position="topright" onCreated={onCreated} />
        </FeatureGroup>
    </Map>
);

Демо

...