Openlayers ja Maanmittauslaitoksen WMS kartat

Communities Suomi (Finland)
1

Osaisiko joku auttaa, kun yritän näyttää Maanmittauslaitoksen WMS karttoja Openlayers:in kautta, niin kartta näyttää omituiselta, jotenkin venyneeltä, malli alhaalla. WMS palvelimen tiedot näkyvät tästä linkistä. Tämä asia ei varsinaisesti koske Openstreetmap:sia mutta en oikein tiedä mistä muualtakaan kysyisi apua.


Itse Openlayers HTML näyttää tältä:


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 24.93;
        var lat = 60.17;
        var zoom = 12;
        var map, layer;

        function init(){
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.WMS( "MML",
                    "http://tiles.kartat.kapsi.fi/peruskartta?", {layers: 'peruskartta'} );
            map.addLayer(layer);

            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
        }
    </script>
  </head>
  <body onload="init()">

    <div id="map" class="smallmap"></div>

  </body>
</html>
2

Karttasi käyttää nyt oletusprojektiota joka on WGS84, mutta se täytyisi saada käyttämään esimerkiksi sitä samaa EPSG:3067:aa, jossa MML:n aineistot ja palvelut luonnostaan ovat. Minä en osaa OpenLayer-sovellusten tekemistä, mutta tässä on erään valmiin sovelluksen koodista pätkä, toivottavasti se auttaa eteenpäin.

var mapOptions = {
resolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0, 256.0, 128.0, 64.0, 32.0, 16.0, 8.0, 4.0, 2.0, 1.0, 0.5, 0.25],
projection: new OpenLayers.Projection(‘EPSG:3067’),
maxExtent: new OpenLayers.Bounds(-548576.0,6291456.0,1548576.0,8388608.0),
units: “meters”,
controls: []

Jaa, tuo palvelin tukee vain näitä projektioita:
EPSG:4326
EPSG:900913
EPSG:3857

3857 tarkoittaa samaa kuin 900913; käytä virallista 3857-koodia, tuon jälkimmäisen voisi jo unohtaa. Extents-ja resolutions-arvot täytyy sovittaa Suomen tilanteeseen. Nämä on otettu Geoserverin demosovelluksesta ja ne kattavat koko maailman
var mapOptions = {
resolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338, 0.07464553542435169, 0.037322767712175846, 0.018661383856087923, 0.009330691928043961, 0.004665345964021981],
projection: new OpenLayers.Projection(‘EPSG:3857’),
maxExtent: new OpenLayers.Bounds(-2.003750834E7,-2.003750834E7,2.003750834E7,2.003750834E7),
units: “meters”,

Koska tuo Kapsi-palvelin on tavallinen WMS, niin kannattaa todennäköisesti laittaa OpenLayers käyttämään SingleTile-systeemiä
http://openlayers.org/dev/examples/single-tile.html
http://openlayers.org/dev/examples/single-tile.js

Kapsi-palvelimen ylläpitäjä voisi harkita EPSG:3067-tuen lisäämistä tuettujen projektioiden listalle.
Samoin tämän rivin lisäämistä mapfilen WEB-METADATA -osioon
“wms_bbox_extended” “true”
Ja noista neljästä peruskarttatasosta kannattaisi ehkä rakentaa mittakaavariippuvainen GROUP

3

En vaan saa toimimaan vaikka mitä olen koittanut.

Jos vain pystyt/viitsit laittaa vähän lisää jeesiä niin olisin kiitollinen. En oikein ymmärrä miten nuo resolutions, bounds ja projection pitäisi laittaa.

4

Kuten sanoin, minä en osaa tätä itse. Tämä näyttää kuitenkin soveltamiskelpoiselta

http://openlayers.org/dev/examples/web-mercator.html
http://openlayers.org/dev/examples/web-mercator.js

Kokeile hieman muutettuna
projection: new OpenLayers.Projection(“EPSG:3857”),

ja säädä kartan keskusta jonnekin Suomeen
map.setCenter(new OpenLayers.LonLat(-10723197, 4500612), 3);

Suomen ulottuvuudet tuossa järjestelmässä ovan karkeasti
bbox(1971214.6240841479,8192383.186281693,4139048.7209790954,1.11467180683306E7)

ja joku vaan piste jossain Oulun korkeudella on 3015476 9560497

5

Minäkään väitä OpenLayersiä osaavani käyttää mutta tällä koodilla näyttää ainakin kotikaupunki ihan somalta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml" xmlns:fb="www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
  <head>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src='http://openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type="text/javascript">
  var lon= 28.88;
  var lat= 61.86;
  var zoom= 13;
  var lonLat;
  var map;

  function init() {
    map = new OpenLayers.Map("map", {
      maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
      maxResolution:156543.0399,
      units:'meters',
      projection: new OpenLayers.Projection("EPSG:900913"),
      displayProjection: new OpenLayers.Projection("EPSG:4326")
    }  );
    layer = new OpenLayers.Layer.WMS( "MML",
                    "http://tiles.kartat.kapsi.fi/peruskartta?", {layers: 'peruskartta'} );
    map.addLayer(layer);

    lonLat = new OpenLayers.LonLat(lon, lat).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    map.setCenter (lonLat, zoom);
  }
</script>

  </head>
<body onload="init()">
<div>
<div style="width: 1700px; height:500px; border-style:solid; border-width:1px; border-color:lightgrey;" id="map">
</div>
 </body>
</html>
6

Lisää vaihtoehtoja, Mapserver luo tällaisia OpenLayer-demoja:
A) EPSG:900913

<html>
<head>
  <title>MapServer Simple Viewer</title>
    <script type="text/javascript" src="http://www.mapserver.org/lib/OpenLayers-ms60.js"></script>
    </head>
    <body>
      <div style="width:459; height:353" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map',
                                     {maxExtent: new OpenLayers.Bounds(151137.910765,8006219.900850,4172287.089235,11096710.099150),
                                      maxResolution: 8779.801700});
        var mslayer = new OpenLayers.Layer.WMS('MapServer Simple Viewer',
                                   'http://188.64.1.61/cgi-bin/osm-mapserver_i?',
                                   {layers: 'borders',
                                   bbox: '151137.910765,8006219.900850,4172287.089235,11096710.099150',
                                   width: 459, height: 353, version: '1.1.1'},                                   {singleTile: "true", ratio:1, projection: 'EPSG:900913'});
;
        map.addLayer(mslayer);
        map.zoomToMaxExtent();
      </script>
</body>
</html>

B) EPSG:3067

<html>
<head>
  <title>MapServer Simple Viewer</title>
    <script type="text/javascript" src="http://www.mapserver.org/lib/OpenLayers-ms60.js"></script>
    </head>
    <body>
      <div style="width:459; height:353" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map',
                                     {maxExtent: new OpenLayers.Bounds(-609732.089235,6539744.900850,997757.089235,7775195.099150),
                                      maxResolution: 3509.801700});
        var mslayer = new OpenLayers.Layer.WMS('MapServer Simple Viewer',
                                   'http://188.64.1.61/cgi-bin/osm-mapserver_i?',
                                   {layers: 'borders',
                                   bbox: '-609732.089235,6539744.900850,997757.089235,7775195.099150',
                                   width: 459, height: 353, version: '1.1.1'},                                   {singleTile: "true", ratio:1, projection: 'EPSG:3067'});
;
        map.addLayer(mslayer);
        map.zoomToMaxExtent();
      </script>
</body>
</html>