0

I've an OpenLayers map in html that use WMS layers from a MapServer (in a docker) and the layer come from PostGIS.

When I'm on the map and drag the map, after two or three seconds the map goes back to the left

enter image description here

and the weirdest thing : Even if I zoom in, the scalebar change but my map still a the same scale

enter image description here

When I use the openlayers template for mapserver (something like http://127.0.0.1/?map=/etc/mapserver/mapfile.map&layer=rail&mode=browse&template=openlayers), I've no problem to drag and zoom in.

enter image description here

I've this problem with PostGIS layer and also spatialite layer (so I guess for all types of wms)

Any Ideas ? Codes below

EDIT1 when I drag the scale is already changing, I think it's a projection problem but I can't find where

<meta charset="UTF-8">
<!Doctype html>
<html>
    <head>
        <title>
            map
        </title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
            <style>
                .map{
                height: 400px;
                width: 50%;
                }
            </style>
    </head>
    <body>
        <h2>My Map</h2>
        <div id="map" class="map"></div>

    <script type="text/javascript">
        var projection = new ol.proj.Projection({
            code: 'EPSG:31370',
            units: 'm'
        });

        var couche_wms= new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    url:'http://127.0.0.1/?map=/etc/mapserver/mapfile.map',
                    params:{

                        'LAYERS':'reg + rail',
                        'MODE':'map',
                        'TRANSPARENT' : 'true',
                        'FORMAT': 'image/png',
                        'tiled': 'true'
                    },
                serverType: 'mapserver',
                extent: [140000, 160000, 160000, 180000]
            })
        })

        var map = new ol.Map({
        renderer: 'webgl',
        controls: ol.control.defaults().extend([

            new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(0),
            className:'custom-mouse-position',
            undefinedHTML:'&nbsp;'
            }),

            new ol.control.ScaleLine()
            ]),
        layers :[couche_wms],
        target: 'map',

        view: new ol.View({
        projection: projection,
        zoom: 2,
        center: [150000,170000],

        })

        });
    </script>
    </body>
</html>

Here is my Mapfile

MAP
    IMAGETYPE      PNG
    EXTENT         140000 160000 160000 180000
    SIZE           600 600
    DEBUG          ON
    PROJECTION
        "init=EPSG:31370"
        END

WEB
        METADATA
        "wms_title"     "WMS Server Demonstration"
        "wms_onlineresource" "http://127.0.0.1/?map=/etc/mapserver/mapfile.map"
        "wms_srs"       "EPSG:31370"
        "wms_enable_request" "*"
        END
END

LAYER
    NAME StreetSurface
    TYPE POLYGON
    CONNECTIONTYPE ogr
    CONNECTION "UrbAdmSpatialite.sqlite"
    DATA "select geometry from urb_a_ss"
    STATUS ON
    CLASS
        NAME "street_surfaces"
        STYLE
            COLOR 95 196 95
        END
    END
END

LAYER
    NAME reg
    TYPE LINE
    CONNECTIONTYPE POSTGIS
    CONNECTION "connectionstring"
    DATA "geom from region using unique id using srid=31370"
    STATUS ON

    CLASS
        NAME "Test"
        STYLE
            COLOR 0 0 0
        END
    END
END

LAYER
    NAME bu
    TYPE POLYGON
    CONNECTIONTYPE POSTGIS
    CONNECTION "connectionstring"
    DATA "geom from bu using unique id using srid=31370"
    STATUS ON

    CLASS
        NAME "Test"
        STYLE
            COLOR 0 0 0
        END
    END
END


LAYER
    NAME rail
    TYPE LINE
    CONNECTIONTYPE POSTGIS
    CONNECTION "connectionstring"
    DATA "geom from rail using unique id using srid=31370"
    STATUS ON

    CLASS
        NAME "Test"
        STYLE
            COLOR 194 118 222
        END
    END
END

END

  • 1
    To determine whether it's OpenLayers or MapServer, check the coordinates in the network requests. – CL. Nov 3 '20 at 10:10
  • Here is what I get from Network request but I don't understand : GET http://127.0.0.1/?map=/etc/mapserver/mapfile.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=reg&CRS=EPSG:31370&STYLES=&WIDTH=944&HEIGHT=400&BBOX=149668.125,169859.375,150331.875,170140.625 – Svhooren Nov 3 '20 at 10:27
  • Found my error thanks to the network requests ! Thank you @CL. – Svhooren Nov 3 '20 at 11:09
0

I found my error, I don't need the mode=map and transparent=true in the variable couche_wms".

It should look like this :

        var couche_wms= new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    url:'http://127.0.0.1/?map=/etc/mapserver/mapfile.map',
                    params:{

                        'LAYERS':'reg + rail',
                        'FORMAT': 'image/png',
                    },
                serverType: 'mapserver',
            })
        })

And I also put the extent in map not in the variable couche_wms, so var map look like this:

        var map = new ol.Map({
        renderer: 'webgl',
        controls: ol.control.defaults().extend([

            new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(0),
            className:'custom-mouse-position',
            undefinedHTML:'&nbsp;'
            }),

            new ol.control.ScaleLine()
            ]),
        layers :[couche_wms],
        target: 'map',

        view: new ol.View({
        projection: projection,
        zoom: 2,
        center: [150000,170000],
        extent: [140000, 160000, 160000, 180000],

        })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.