Le portail francophone de la géomatique

Leehan · Thu 05 March 2020 14:03

Bonjour,

Je débute avec OL5 et je tente de reprojeter OSM en 2154 en suivant la documentation du site d'OpenLayers https://openlayers.org/en/v5.3.0/doc/tu … tion.html, l'idée étant ensuite d'essayer de travailler avec l'API geportail.

package.json

Code:

{
  "name": "iliad_ol5.3.0",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "geoportal-extensions-openlayers": "^3.0.7",
    "ol": "^5.3.0",
    "proj4": "^2.5.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "description": ""
}

index.html

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <!--<link rel="stylesheet" href="style/GpPluginOpenLayers.css" type="text/css">-->
    <link rel="stylesheet" href="style/style.css" type="text/css">
    
    <!--<link rel="stylesheet" href="style/GpPluginOpenLayers-src.css" type="text/css">-->
  </head>
  <body>  
    <div id="map" tabindex="0">
        <div id="menu1">
            <table class="tab" id="table1">
            <tr>
                <td><button class="tablinks" id="Ope" onclick="menu(event, 'Ope')" title="Rechercher opération"> Ope?</button></td>
            </tr>
            <tr>
                <td><button class="tablinks" id="Inf" onclick="menu(event, 'Inf')" title="Afficher les informations des opérations">Inf</button></td>
            </tr>
            </table>
        </div>
        <!-- panneau recherche opération -->
        <div class="tabContent" id="OpeContent" style="visibility:hidden">
            <div class="titrePanneau" id="titrePanneauOpe">
                Recherche opération
            </div>
            <div class="soustitrePanneau" id="choixAttributLabel">
                Choix attribut
            </div>
            <form id="choixOpe" name="choixOpe">
                <select class="tooltip" id="listeNumOpe" name="champ" size="1" title="Choix du champ de données">
                    <option>
                        numope
                    </option>
                    <option>
                        code_tranche
                    </option>
                    <option>
                        numprescr
                    </option>
                    <option>
                        numoa
                    </option>
                </select>
            </form>
            <div class="soustitrePanneau" id="valeurR">
                Valeur recherchée
            </div><input class="" id="choixNumOpe" title="Valeur à rechercher" type="text" value=""> <button class="fonctionsSearchOpe" id="button2" onclick="chercherOpe()" type="button">chercher</button> <!-- message recherche inaboutie -->
        </div><!-- The Modal -->
        <div class="modal" id="myModal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <p id="message">La recherche n'a rien donné !</p>
            </div>
        </div>
        </div><!-- popups informations -->
        <div class="ol-popup" id="popup" style="visibility:hidden">
            <div class="ol-popup-closer" id="popup-closer"></div>
            <div id="popup-content"></div>
        </div>
        <div id="result" style="display:none"></div>
        <div id="legend" style="display:none"></div>
    </div>
    </div> <!--fin id map -->
    <script src="./index.js"></script>
  </body>
</html>

index.js

Code:

import {get as getProjection} from 'ol/proj';
import Map from 'ol/Map';
import 'ol/ol.css';
import OSM from 'ol/source/OSM';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import View from 'ol/View';
import * as Gp from 'geoportal-extensions-openlayers';

proj4.defs('EPSG:2154','+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3' + 
    '+x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
    register(proj4);
const franceProjection = getProjection('EPSG:2154');

var couches = [
    new TileLayer({
      source: new OSM()
    })
];

var map = new Map({
  target: 'map',
  layers: couches,
   view: new View({
    projection: 'EPSG:2154',
    center: [524326, 6700656],
    zoom: 10
    //center: [0, 0],
    //zoom: 5
  })
});

Ce dernier fichier ne renvoie rien : aucune dalle OSM n'est chargée. Aucun message d'erreur dans la console de debug.
Aucun souci pour afficher OSM dans sa projection native (3857) en revanche.
J'en déduis qu'un souci avec proj4 en est la cause mais suis incapable de résoudre ce problème.
A vot' bon coeur !
Merci

Cornet Jérémie · Fri 06 March 2020 00:34

Bonjour,
Un webservice tuilé ne peut s'afficher que dans une carte de même système de coordonnées.

Donc impossible d'afficher le fond OSM (tuilé en mercator) dans une carte en lambert.

NB : le geoportail propose des flux en mercator donc à moins de besoin spécifique, autant travailler en mercator !
https://openlayers.org/en/latest/examples/wmts-ign.html

Bonne journée

Leehan · Fri 06 March 2020 12:28

étrange car avec le package.json ci-dessous sans rien changer à index.js, ca fonctionne très bien.

Code:

{
  "name": "iliadv2",
  "version": "1.0.0",
  "description": "OpenLayers 6 et couches de Caviar",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "keywords": [],
  "author": "mathias cunault",
  "license": "ISC",
  "dependencies": {
    "geoportal-extensions-openlayers": "^3.0.7",
    "ol": "^6.2.1",
    "proj4": "^2.6.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

Si je suis re passé à OL 5.3.0 c'est pour être compatible avec le module geoportal.
Et dans le premier package.json, j'ai également essayé avec proj4 2.6.0

Leehan · Fri 06 March 2020 14:35

Après un gros ménage dans les dépendances et surtout celles liées au module proj, tout semble fonctionner.
Je ne suis pas certain que cela soit l'explication mais faute de mieux.
je ne touche plsu à rien avec cette config de base ;

Code:

"ol": "^5.3.0",
    "proj4": "^2.5.0"

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Thu 05 March 2020 14:03

Openlayers 5 problème reprojection de OSM

Code:

Code:

Code:

#2 Fri 06 March 2020 00:34

Re: Openlayers 5 problème reprojection de OSM

#3 Fri 06 March 2020 12:28

Re: Openlayers 5 problème reprojection de OSM

Code:

#4 Fri 06 March 2020 14:35

Re: Openlayers 5 problème reprojection de OSM

Code:

Pied de page des forums