Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#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
ENDCode:
<!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
![[img]https://image.noelshack.com/minis/2018/01/5/1515168179-france-salut-png.png[/img]](https://www.noelshack.com/2018-01-5-1515168179-france-salut-png.png){kind=link}
![[img]https://image.noelshack.com/minis/2018/01/5/1515168250-decalage.png[/img]](https://www.noelshack.com/2018-01-5-1515168250-decalage.png){kind=link}