Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

#1 Tue 04 January 2022 20:55

vistel237
Participant occasionnel
Lieu: France
Date d'inscription: 23 Apr 2020
Messages: 19

Get feature info react-leaflet

bonjour a vous,

j'essaye de mettre en place une application webmaping avec react-js en utilisant le Framework react-leaflet j'affiche bien la map et des données provenant de geoserver en local via le wfs et maintenant, j'aimerais mettre un évènement onclick sur la couche de geoserver qui afficherait une popup avec les information du point en question voici mon code et le résultat qu'il retourne:

Code:

 import React from 'react'
import { MapContainer, TileLayer, WMSTileLayer} from "react-leaflet";

export default function Map() {
    const position = [4.05, 9.7];
    const url = "http://127.0.0.1:8080/geoserver/yaounde/wms?service=WMS";
    
    
    return (
    <MapContainer className='Map' center={position} zoom={13} scrollWheelZoom={true}>
        <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        
        <WMSTileLayer
            url={url}
            version='1.1.0'
            opacity={1}
            transparent
            layers="yaounde:adresse_dla"
            format="image/png"
        />
        
    </MapContainer>
    )
}

résultat: [img][/img]

j'ai déjà regarder du coter de la fonction GeoJson de react-leaflet, sans succès

besoin d'aide s'il vous plait

Dernière modification par vistel237 (Thu 06 January 2022 12:51)

Hors ligne

 

Pied de page des forums

Powered by FluxBB