[GIS] OpenLayers 4 adding a georeferenced image

openlayers

I'm trying to add a georeferenced image layer to my map object. I'm using Node, with the v4.2.0 Openlayers module.

My code to add the georefenced image is as follows. Within the layers array of the map object (there is another OSM WMS background layer):

new ol.layer.Image({ source: new ol.source.ImageStatic({ attributions: '© some note', url: __dirname + '/image.tiff', projection: 'EPSG:3857', imageExtend: [486303.9778100852272473, 800886.4222691040486097, 486822.4427326705190353, 6801434.6447209259495139] }) })

Using the ol-debug.js library I get the following error:

Uncaught TypeError: Cannot read property '2' of undefined at Object.ol.extent.intersects > at ol.source.ImageStatic.getImageInternal > at ol.source.ImageStatic.ol.source.Image.getImage > at ol.renderer.canvas.ImageLayer.prepareFrame > at ol.renderer.canvas.Map.renderFrame > at ol.Map.renderFrame_ > at ol.Map.<anonymous>.

What could be wrong here?
Meanwhile I have used a workaround by creating a tiled XYZ image which works, but I would still like to know what is going wrong here.

Best Answer

Unfortunately, I don't believe it's possible to display GeoTiff raster files with OpenLayers directly. What you will need to do is to transform the GeoTiff to PNG, GIF, or JPEG format. I've used GDAL for that for years now. BTW, there's a typo in your code...should be imageExtent instead. Code snippet that I've used in one of my projects:

source: new ol.source.ImageStatic({
    url: "images/conus/mercator/maxt_2016020200.png",
    imageSize: [3328, 2048],
    imageExtent: [-15028131.257, 1878516.407,-6887893.493, 6887893.493],
    projection: ovProj

}),

Another option would be to use OL's ImageWMS as an image source with GeoServer or MapServer. The data source for either of those would be your GeoTiff and you would get back a single, untiled image in those formats which you can style using either of those WMSs.

Related Solutions

[GIS] OpenLayers3 and GeoJSON data with null features

First of all, please don't use OpenLayers 3.9 and ol.source.TileVector. That has many issues. Use a recent version and ol.source.VectorTile, like in your first snippet.

If your GeoJSON has "features": null, then it is is invalid. From the GeoJSON spec:

An object of type "FeatureCollection" must have a member with the name "features". The value corresponding to "features" is an array. Each element in the array is a feature object as defined above.

So if a tile has no features, the GeoJSON for the tile should contain "features": [] instead.

If you do not have access to the server that provides the tiles, you can work around the issue on the client side:

new ol.source.VectorTile({
  format: new ol.format.GeoJSON(),
  tileGrid: ol.tilegrid.createXYZ(),
  url: "http://abcd.com/cities/{z}/{x}/{y}.geojson"
  tileLoadFunction: function(tile, url) {
    tile.setLoader(function() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.onload = function() {
        var json = JSON.parse(xhr.responseText);
        if (json.features === null) {
          json.features = [];
        }
        var features = tile.getFormat().readFeatures(json, {featureProjection: map.getView().getProjection()});
        tile.setFeatures(features);
      }
      xhr.send();
    })
  }
})

OpenLayers 3 – Avoiding CORS Errors

Unfortunate, what you are experiencing, is expected behavior, and not a Bug.

Once you add an Image from an external domain, or cross-domain, and use it on the canvas, the canvas becomes "tainted" and the browser will not allow you to pull data out of it.

The only solution for this is two step:

Proper headers need to be sent by the server, which is sending you the images
The crossOrigin attribute on the image itself in the JavaScript. In OpenLayers, you can do this by using crossOrigin: 'anonymous' in the layer settings. For example:

    var wms_layer=new ol.layer.Tile({
      extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.TileWMS({
        url: 'http://demo.boundlessgeo.com/geoserver/wms',
        params: {'LAYERS': 'topp:states', 'TILED': true},
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
      })
    });

Now I know that you do not have control over the server, so you cannot do the first step.

In-case the server allows it, you could have a proxy on your own server, which serves these tiles, and the whole issue will be side-stepped.

Best Answer

Related Solutions

[GIS] OpenLayers3 and GeoJSON data with null features

OpenLayers 3 – Avoiding CORS Errors

Related Question