search

IGNF / geoportal-extensions

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

ERROR layer id #373

Closed renaudgweb closed 11 months ago

renaudgweb commented 11 months 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 11 months 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 11 months 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 11 months 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 11 months ago

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