Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Mooc adress

MOOC Adresse du 4 au 29 novembre 2019

Formation en ligne à destination des élus et techniciens des communes et EPCI
Formation gratuite sur la plateforme FUN
Inscriptions

#1 Fri 05 January 2018 17:14

durbaog
Membre
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

 

Pied de page des forums

Powered by FluxBB

Partagez  |