Annonce
#1 Thu 05 March 2020 14:03
- Leehan
- Participant actif
- Lieu: tours
- Date d'inscription: 10 Jun 2009
- Messages: 52
Openlayers 5 problème reprojection de OSM
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">×</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
Hors ligne
#2 Fri 06 March 2020 00:34
- Cornet Jérémie
- Participant assidu
- Lieu: Nouméa
- Date d'inscription: 6 Apr 2008
- Messages: 229
Re: Openlayers 5 problème reprojection de OSM
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
Hors ligne
#3 Fri 06 March 2020 12:28
- Leehan
- Participant actif
- Lieu: tours
- Date d'inscription: 10 Jun 2009
- Messages: 52
Re: Openlayers 5 problème reprojection de OSM
é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
Hors ligne
#4 Fri 06 March 2020 14:35
- Leehan
- Participant actif
- Lieu: tours
- Date d'inscription: 10 Jun 2009
- Messages: 52
Re: Openlayers 5 problème reprojection de OSM
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"Hors ligne
