1

I tried all the day to zoom by default on my polygon 'geofield'. I'm using geoserver to store my data, I can display the map but the centre is in the middle of nowhere (I want it to be in the middle of the geofield). I tried something like this:

map.zoomToExtent(geofield.getDataExtent());

but it doesn't work! I also tried with a button like this:

var zoomToExtentControl = new ol.control.ZoomToExtent({ extent: [-11243808.051695308, 4406397.202710291,-4561377.290892059,6852382.107835932]});

it works when I clicked on it but when I try to replace the coordinates by geofield.geometry.getBounds() the map doesn't display.

Here you can see the full code:

    <!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>
  <script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
  <title>OpenLayers 3 example</title>
</head>
<body>
  <h2>Weeds map test</h2>
  <div id="map" class="map"></div>
  <script type="text/javascript">
var zoomToExtentControl = new ol.control.ZoomToExtent({
        extent: geofield.geometry.getBounds());
      });

    var map = new ol.Map({
      target: 'map',
      layers: [
      new ol.layer.Tile({
        title: 'Global Imagery',
        source: new ol.source.TileWMS({
          url: 'http://demo.opengeo.org/geoserver/wms',
          params: {LAYERS: 'nasa:bluemarble', VERSION: '1.1.1'}
        })
      }),
      new ol.layer.Tile({
        title: 'geofield',
        source: new ol.source.TileWMS({
          url: 'http://localhost:8080/geoserver/robot/wms',
          params: {LAYERS: 'robot:geofield', VERSION: '1.1.1'}
        })
      }),
      new ol.layer.Tile({
        title: 'weeds',
        source: new ol.source.TileWMS({
          url: 'http://localhost:8080/geoserver/robot/wms',
          params: {LAYERS: 'robot:weeds', VERSION: '1.1.1'}
        })
      }),

      ],
      controls: ol.control.defaults().extend([
        new ol.control.ScaleLine()]),
      view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 5
      })
    });

            map.addControl(zoomToExtentControl);

      </script>
    </body>
    </html>

Another thing; if you have a wms link for the world map (not satellite view) I'll need it!

Matt
  • 1,672
  • 16
  • 24
gabriel chauviere
  • 87
  • 1
  • 1
  • 10

1 Answers1

1

Create your layers as variables outside the map to make them accessible: 

var geofield = new ol.layer.Tile({
  title: 'geofield',
  source: new ol.source.TileWMS({
    url: 'http://localhost:8080/geoserver/robot/wms',
    params: {LAYERS: 'robot:geofield', VERSION: '1.1.1'}
  })
});

In your map definition use your layer variables:

var map = new ol.Map({
  target: 'map',
  layers: [geofield, ...], // use your layers defined before...
  controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 5
  })
});

Then you can use getExtent() function on your layer (see API). Note that your function getDataExtent does not exist...

EDIT: Use this function to zoom to your extent: 

var zoomToGeofield = function(){
    var layerExtent = geofield.getExtent();
    map.getView().fit(layerExtent, map.getSize()); 
}
Lars
  • 2,197
  • 2
  • 18
  • 33
  • Thank you! I change those things and I let you know if ti's works :) – gabriel chauviere Sep 08 '16 at 08:29
  • I tryed to pout the map.zoomToExtent(geofield.getExtent()); at the end just before the </script> and the console sent me the error TypeError: map.zoomToExtent is not a function then I tried console.log(geofield.getExtent()); just to see what output it is and I have an undefined – gabriel chauviere Sep 08 '16 at 09:31
  • In OL3 you need to use view.fit instead of map.zoomToExtent - http://openlayers.org/en/latest/apidoc/ol.View.html#fit – Ian Turton Sep 08 '16 at 09:42
  • Thank you I used zoomToGeofield It's a big progress! But now I have a new error ´AssertionError: Assertion failed. See http://openlayers.org/en/v3.18.2/doc/errors/#24 for details.´ witch means Invalid extent or geometry provided as geometry I think it's a problem of reference – gabriel chauviere Sep 08 '16 at 10:08
  • What is the result of geofield.getExtent()? – Lars Sep 08 '16 at 10:12
  • with console.log(geofield.getExtent()); I have undefined and with just geofield.getExtent(); there is no error – gabriel chauviere Sep 08 '16 at 10:22
  • Maybe I have to set a baseLayer – gabriel chauviere Sep 08 '16 at 10:31
  • Sorry, I have no idea why the extent is undefined. Is your polygon static? Then you could create a polygon (ol.geom.Polygon ) and use the getExtent() function (http://openlayers.org/en/latest/apidoc/ol.geom.Polygon.html#getExtent). Or is your service available as WFS too (WFS example: http://openlayers.org/en/v3.6.0/examples/vector-wfs.html)? Then you might be able to use getExtent() on ol.source.vector (http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#getExtent) – Lars Sep 08 '16 at 11:56
  • Ok thanks for the tip, I didn't really get what does the doc says " method is not available when the source is configured with useSpatialIndex set to false." fot getExtent() My polygon isn't static so I can't fix solid values for the extent but I think there is a way to use a wfs via geoServer (my datas comes from postGis) – gabriel chauviere Sep 08 '16 at 13:18
  • ok I found what I need here – gabriel chauviere Sep 08 '16 at 14:17
  • I tried to get the geofield feature by loading it by geoJson via wfs request var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: function(extent, resolution, projection) { return 'http://localhost:8080/geoserver/robot/ows?service=WFS' + '&version=1.0.0&request=GetFeature&typeName=robot:geofield&' + 'outputFormat=application%2Fjson'; }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ })) });

    But it doesn't work. I have the folloing error message

     – gabriel chauviere Sep 09 '16 at 07:46
  • Reason: CORS header 'Access-Control-Allow-Origin' missing – gabriel chauviere Sep 09 '16 at 08:37