Question

My server is statically serving several different PNG images of the same object, each taken with a different spectral filter (for example, just a red channel or just a blue channel). I'd like to show a slippy, false-colored map of that object. I do so by creating three separate images sources like so:

extent = [0, 0, ncols, nrows];
pixelProjection = new ol.proj.Projection({
    code: 'some-image',
    units: 'pixels',
    extent: extent
});

rsource = new ol.source.ImageStatic({
    url: "static/imgs/band_1.png",
    projection: pixelProjection,
    imageExtent: extent
});
gsource = new ol.source.ImageStatic({
    url: "static/imgs/band_2.png",
    projection: pixelProjection,
    imageExtent: extent
});
bsource = new ol.source.ImageStatic({
    url: "static/imgs/band_3.png",
    projection: pixelProjection,
    imageExtent: extent
});

Next, I use these sources as inputs to a raster source which can compose them:

rgbSources = [rsource, gsource, bsource];
raster = new ol.source.Raster({
    sources: rgbSources,
    operation: function(bands, data) {
        var rband = bands[0];
        var gband = bands[1];
        var bband = bands[2];

        var composed = [
            rband[0],
            gband[0],
            bband[0],
            255
        ];
        return composed;
    }
});

I then create a layer that uses this raster as its source:

colorLayer = new ol.layer.Image({
    source: raster
});

Lastly, I can create a map and add my raster layer to the map:

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        center:ol.extent.getCenter(extent),
        projection: pixelProjection,
        zoom: 1.5
    })
});
map.addLayer(colorLayer);

So far so good! This displays a colorized version of the image as expected. The problem arises when the user triggers a change to a color channel by inputting a new channel index to pull from. I handle a blue channel change like this:

var index = 4;  // actually gets passed in from user
bsource = new ol.source.ImageStatic({
    url: "static/imgs/band_" + index + ".png",
    projection: pixelProjection,
    imageExtent: extent
});
rgbSources[2] = bsource;   // this was in global scope from before
raster.sources = rgbSources;  // as was this

Expected behavior is that the map would immediately change colors, or at least it would change when I zoom in or pan but neither of those things happens. I am unable to get the new colors to appear at all. Am I updating the wrong thing? Perhaps the raster.sources field has an associated setter function that I am unable to find?

Answer 1

找到解决方案！看起来不允许直接设置栅格的源，但设置图层的源是。所以不幸的是，我必须创建一个新的光栅对象（完全是新的光源），但至少我不需要新的图层：

raster = new ol.source.Raster({
    sources: rgbSources,
    operation: composeBands
});
colorLayer.setSource(raster);

接受我自己的回答，但愿意接受别人的解决方案，如果这意味着我不需要创建新的来源。

Openlayers-3 Raster Layer not Changing when Sources Changed

1 个答案: