Zaczynam korzystać z ulotek-respondentów i natknąłem się na pytanie: W mojej aplikacji użytkownik wypełnia formularz, który następnie żąda usługi odpoczynku, która zwraca GeoJSON, który jest następnie dodawany jako nowa warstwa na mojej mapie. Moje pytanie: Jak zaimplementować dynamicznie dodawanie warstw w ulotce reagowania?Arkusz z reakcją dodaje warstwy dynamicznie
Dziękuję.
Mam podobny problem. Chciałbym wyczyścić i utworzyć warstwy znaczników dynamicznie. Myślę, że możesz to zrobić, odwołując się do rzeczywistego widoku mapy ref.
<Map ref={Map => this.map = Map}>
później można następnie wykorzystać this.map z normalnych funkcji ulotki. Innym rozwiązaniem mogłoby być utworzenie warstwy w JSX sam sposób utworzyć znaczniki:
{this.props.markers.map((i,index) => { return ( <Marker key={i} position={i}> <Popup> <span>Great marker!</span> </Popup> </Marker>); })}
Najlepszym rozwiązaniem jest stworzenie GeoJSON warstwy otoki dla reagują-ulotka. Istnieje podobna implementacja warstwy GeoJSON z klastrowaniem dostępnym w plugins section. Następnie powinieneś dodać tę warstwę do komponentu mapy i zmienić jej dane, gdy zajdzie taka potrzeba. Nie ma więc potrzeby dynamicznego dodawania warstwy, ale dynamicznie zmieniaj dla niej dane. Sprawdź przykład GeoJSON ulotki, aby uzyskać pomysł http://leafletjs.com/examples/geojson/.
Podejście zadziała, jeśli masz jedną warstwę ze zmieniającymi się danymi. Ale jeśli masz różne zestawy danych, musisz dodać warstwę GeoJSON dla każdego z nich.
<Map ...>
{this.props.datasets.map((ds, ix) => {
return (<GeoJSONOverlay data={ds} key={ix} />);
})}
</Map>