#1 Fri 05 January 2018 17:14
- durbaog
- Juste Inscrit !
- Date d'inscription: 29 Nov 2017
- Messages: 3
[OpenLayers] Décalage de couche avec extent coupé
[OpenLayers] Décalage de couche avec extent coupé
Boujour à tous,
Je suis désolé de vous (re)déranger mais ça fait depuis des semaines que je cherche la solution a ce problème sans trouver la solution je suis désespéré.
Je voudrai afficher un shp depuis PostGIS sur un fond mondial de type OSM.
La couche shp est en Lambert 93 (EPSG: 2154) le fond lui est en EPSG: 3857.
J’ai l’extent exact de la couche grâce à la commande PostGIS :
‘SELECT ST_Extent(geom) as boxtent FROM couche;’
La couche dans MapServer se présente comme ceci :
[img]https://image.noelshack.com/minis/2018/01/5/1515168179-france-salut-png.png[/img]
Dans le fichier javascript j’utilise la bibliothèque PROJ4 pour convertir l’extent de la couche en EPSG:3857.
Je définit donc l’extent de la couche et la converti ensuite avec la commande:
ol.proj.transformExtent(extent, 'EPSG:2154', 'EPSG:3857')
Le problème c’est que la couche est coupé au nord et déborde au sud photo ci-dessous.
[img]https://image.noelshack.com/minis/2018/01/5/1515168250-decalage.png[/img]
Malgrès toute mes tentavives pour rectifier le problème la couche reste décalé. J’avais déjà posé la question sur Stack over flow mais à ce jour, aucune réponse.
Si vous pouviez m’aider à resoudre cela vous en serai très reconnaissant
Cordialement,
Durbaog,
Ci-joint le MapFile et le code Javascript,
Code:
MAP NAME "france" SIZE 430 340 MAXSIZE 4096 EXTENT 99226 6049647 1242375 7110524 UNITS METERS STATUS ON DEBUG ON IMAGECOLOR 255 255 255 TRANSPARENT off WEB TEMPLATE "template.html" IMAGEPATH "C:/ms4w/apps/mapserv-demo/tmp" IMAGEURL "tmp/" METADATA "wms_title" "wms_demo" "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?" "wms_srs" "ESPG:2154 ESPG:3857" "wms_enable_request" "*" END END PROJECTION "init=epsg:2154" END OUTPUTFORMAT NAME png DRIVER "GD/PNG" MIMETYPE "image/png" IMAGEMODE PC256 EXTENSION "png" END LAYER NAME "france" STATUS default TYPE POLYGON CONNECTIONTYPE POSTGIS CONNECTION "host=127.0.0.1 port=5432 dbname=france user=postgres password=postgres" DATA "geom from fra_lamb" METADATA "wms_title" "france_qgis" "wms_format" "image/PNG" END CLASS NAME "france" OUTLINECOLOR 0 134 130 COLOR 140 176 99 END END END
Code:
<!DOCTYPE html> <html> <head> <title>Prototype</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="An OL3 layerswitcher." /> <meta name="keywords" content="ol3, layer, layerswitcher, control,jQuery" /> <!-- jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- Open Layers --> <link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css" /> <script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script> <!-- Proj4 --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script> </head> <body> <!-- Map div --> <p ><div id="map" style="width:1200px; height:500px; border: 3px solid SlateGray;"></div></p> <div class="external layerSwitcher"></div> <script type="text/javascript"> 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"); var projec = ol.proj.get('EPSG:2154'); var france_extent = [99226, 6049647,1242375, 7110524]; france_extent = ol.proj.transformExtent(france_extent, ol.proj.get('EPSG:2154'), ol.proj.get('EPSG:3857')); // Open Street Map var baseLayers = new ol.layer.Tile( { title: "Open Street Map", baseLayer: true, source: new ol.source.OSM() }); // Overlay from PostGIS var fra = new ol.layer.Image({ title: "France", extent: france_extent, source: new ol.source.ImageWMS({ url: 'http://localhost/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/france_salut.map&mode=map', params: {'LAYERS': 'france_2154_google', 'FORMAT': 'image/PNG', 'mode': 'map'}, projection: projec, transparent: true, singleTile: true, ratio: 1, serverType: 'mapserver' }), opacity: 0.5 }); var view = new ol.View({center:ol.proj.transform([808160.928282, 6483221.391416],'EPSG:2154','EPSG:3857'),zoom:4}); // The map var map = new ol.Map ({ target: 'map', view: view, layers: [ baseLayers, fra] }); </script> </body> </html>
Hors ligne