search

IGNF / geoportal-extensions

French Geoportal Extensions for well-known javascript mapping libraries (Leaflet and OpenLayers)
https://ignf.github.io/geoportal-extensions/
Other
63 stars 33 forks source link

ERROR layer id #373

Closed renaudgweb closed 1 year ago

renaudgweb commented 1 year ago

Bonjour,

J'obtiens une erreur :

ERROR layer id (layer name: GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-OACI / service: WMTS) was not found !?

dans la console (j'utilise leaflet)

La carte GEOGRAPHICALGRIDSYSTEMS.MAPS quand à elle s'affiche correctement, mais les autres :

GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-OACI GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.L93

Ne s'affichent plus, j'ai 196 et 46 à la place des noms de carte actuellement.

De même, je n'ai plus accès au isochrones, profils alti', etc...

Merci

elias75015 commented 1 year ago

Bonjour,

quelle version des extensions pour Leaflet utilisez-vous ?

Des informations pertinentes peuvent être trouvées sur ce post.

Avec la version 2.4.0-beta3 des extensions pour Leaflet, je ne rencontre aucun des problèmes décrits avec ce code (en ayant préalablement généré mon fichier de configuration comme indiqué dans le post linké au-dessus) :

        <script>

            var createMap = function () {
              // Création de la map
              var layer = L.geoportalLayer.WMTS({
                layer : "ORTHOIMAGERY.ORTHOPHOTOS"
              });
              var layerScan25 = L.geoportalLayer.WMTS({
                layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR"
              });
              var layerOACI = L.geoportalLayer.WMTS({
                layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-OACI"
              });

              var map  = L.map('map', {
                zoom : 10,
                center : L.latLng(48, 2)
              });

              layerScan25.addTo(map);
              layerOACI.addTo(map);

              var iso = L.geoportalControl.Isocurve();
              map.addControl(iso);
              var layerSwitcher = L.geoportalControl.LayerSwitcher();
              map.addControl(layerSwitcher);
              var route = L.geoportalControl.Route();
              map.addControl(route);
              var measureProfil = L.geoportalControl.ElevationPath();
              map.addControl(measureProfil);
            };

            Gp.Services.getConfig({
                customConfigFile: "chemin/vers/customConfig_private.json",
                timeOut: 20000,
                onSuccess: createMap,
                onFailure: function (e) {
                    console.error(e);
                }
            });

        </script>

Si vos problèmes persistent, n'hésitez pas à partager le code permettant d'initialiser votre carte et/ou un lien de démo vers votre application.

renaudgweb commented 1 year ago

Bonjour,

Merci pour votre réponse.

J'utilise la version 2.3.4 de Gp

c'est une appli de test, mon code est celui ci :

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <!-- Plugin Mapbox fullscreen pour Leaflet -->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
    <!-- Plugin Mapbox Location pour Leaflet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
    <!-- Extension Géoportail pour Leaflet -->
    <script src="leaflet/GpPluginLeaflet.js"></script>
    <link rel="stylesheet" href="leaflet/GpPluginLeaflet.css" />
    <script src="leaflet/GpPluginLeaflet-src.js"></script>
    <link rel="stylesheet" href="leaflet/GpPluginLeaflet-src.css" />
    <script src="leaflet/GpPluginLeaflet-map.js"></script>
    <link rel="stylesheet" href="leaflet/GpPluginLeaflet-map.css" />
    <style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100vw;
    }
    .leaflet-control-attribution {
        display: none;
    }
    </style>
    <body>
        <div id="map"></div>
    </body>
    <script>
    function go() {
        var map = L.map('map', {
            zoom : 11,
            center : L.latLng(45, 4)
        });

        map.addControl(new L.Control.Fullscreen());

        var lc = L.control.locate({
        position: 'topleft',
        locateOptions: {
            enableHighAccuracy: true
        },
        strings: {
            title: "Geolocation"
        }
        }).addTo(map);

        var lyrOSM = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png?', {
          // leafletParams
            opacity: 0,
            detectRetina: "True"
        });
        var lyrMaps = L.geoportalLayer.WMTS({
            layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS",
        }, {
            opacity: 1,
            detectRetina: "True"
        });
        var lyrOACI = L.geoportalLayer.WMTS({
            layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-OACI",
        }, {
            opacity: 0,
            detectRetina: "True"
        });
        var lyrSCAN25 = L.geoportalLayer.WMTS({
            layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR",
        }, {
            opacity: 0,
            detectRetina: "True"
        });
        var lyrSCAN25L93 = L.geoportalLayer.WMTS({
            layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.L93",
        }, {
            opacity: 0,
            detectRetina: "True"
        });
        var lyrCADASTRE = L.geoportalLayer.WMTS({
            layer : "CADASTRALPARCELS.PARCELLAIRE_EXPRESS",
        }, {
            opacity: 0,
            detectRetina: "True"
        });
        map.addLayer(lyrCADASTRE);
        map.addLayer(lyrSCAN25L93);
        map.addLayer(lyrSCAN25);
        map.addLayer(lyrOSM);
        map.addLayer(lyrOACI);
        map.addLayer(lyrMaps);

        var layerSwitcher = L.geoportalControl.LayerSwitcher({
            layers : [{
                layer : lyrOSM,
                config : {
                    title : "OSM",
                    description : "Open Street Maps"
                }
            }]
        });
         map.addControl(layerSwitcher);

        // création et ajout du controle recherche
        var searchCtrl = L.geoportalControl.SearchEngine({
        });
        map.addControl(searchCtrl);

        // création et ajout du controle Adresse ou lieu en un point de la carte
        var revCtrl = L.geoportalControl.ReverseGeocode({
        });
        map.addControl(revCtrl);

        // création et ajout du controle d'itineraire
        var routeCtrl = L.geoportalControl.Route({
        });
        map.addControl(routeCtrl);

        // création et ajout du controle d'isochrones / isodistances
        var isoCtrl = L.geoportalControl.Isocurve({
        });
        map.addControl(isoCtrl);

        // création et ajout du controle Altitude en un point de la carte
        var mousePosition = L.geoportalControl.MousePosition({
        editCoordinates: true
        });
        map.addControl(mousePosition);

        // création et ajout du controle Profil altimétrique le long d’un traçé
        var ep = L.geoportalControl.ElevationPath({
        });
        map.addControl(ep);
    }
    Gp.Services.getConfig({
        customConfigFile: "path/to/customConfig.json",
        apiKey : "APIKEY",
        onSuccess: go,
        onFailure: (e) => {console.log(e)}
    });
    </script>
</html>

Actuellement j'obtiens des 401 :

GET https://data.geopf.fr/private/wmts?gp-leaflet-ext=2.3.4&service=WMTS&request=GetTile&version=1.0.0&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS&style=normal&tilematrixset=PM&format=image/jpeg&opacity=1&detectRetina=True&tilematrix=11&tilerow=734&tilecol=1045
...

ainsi que ces avertissements :

Erreur dans les liens source : Error: request failed with status 401
URL de la ressource : https://monurl.com/leaflet/GpPluginLeaflet-src.js
URL du lien source : leaflet.draw-src.map
wrong event specified: touchleave 3 [DomEvent.Pointer.js:36:10](https://unpkg.com/leaflet@1.9.4/src/dom/DomEvent.Pointer.js)
WARNING CONFIG_FAILED : params not found ?!

Merci par avance de votre temps

elias75015 commented 1 year ago

Il vous faut utiliser la version 2.4.0-beta3 pour pouvoir afficher les couches à accès restreint.

Je vous invite à suivre la procédure détaillée pour les extensions Leaflet dans ce post.

Il vous faudra retirer :

apiKey : "APIKEY",

tel que : 

Gp.Services.getConfig({
        customConfigFile: "path/to/customConfig.json",
        onSuccess: go,
        onFailure: (e) => {console.log(e)}
    });
renaudgweb commented 1 year ago

Un grand merci cela refonctionne correctement ! Très bon week-end ! Encore merci