ol-processed-source v2.0.0

ol-processed-source

Alternative to ol.source. Depends on OpenLayers(+v8.2.0), geotiff.js.

example pages

Attention

The source continues to hold the image internally as a canvas element.
Note that loading large images consumes large memory.
To display a large number of layers at the same time, it is recommended to use the official methods.

An upper limit can be set for a canvas size.
If a size of loaded image is larger than maxSize, an image is scaled down. So, that maximum resolution to be worse.

Other than that, displaying tiles also consumes memory.

Also, the performance of Reader.render is not optimal.

Common Process

1. Load image.
2. Resize to fit the aspect ratio of extents.
3. Resize to fit upper limit of canvas size.
4. If short side is smaller than tileSize, it will be enlarged to fit tileSize.
5. Saved as a canvas element.
6. Cut out from canvas to each tile.

ImageStatic

Alternative to ol.source.ImageStatic.

• Support KML-like rotation.
• It can also be displayed in a projection system other than the one specified by source. (Official ol.source.ImageStatic fail in some cases.)
• Area beyond +-180 degrees latitude can also be displayed when wrapX is true.

Sample

const imageSource = new ImageStatic({
    projection: "EPSG:27700",
    url: "https://~",
    imageExtent: [0, 0, 700000, 1300000],
    rotate: (45 / 180) * Math.PI,
    maxPixel: 1000*1000,
    crossOrigin: "anonymous",
    wrapX: true,
});
if (imageSource.getState() === "ready") {
    const layer = new TileLayer({
        source,
    });
    map.addLayer(layer);
} else {
    const sourceListener = () => {
        const sourceState = imageSource.getState();
        if (sourceState !== "loading") {
            imageSource.removeEventListener("change", sourceListener);
            if (sourceState === "ready") {
                const layer = new TileLayer({
                    source,
                });
                map.addLayer(layer);
            }
        }
    };
    imageSource.addEventListener("change", sourceListener);
}

// When no longer needed.
imageSource.release();

Props

For other props, refer to TileGrid's Options. However, some props are ignored.

GeoTIFF

Alternative to ol.source.GetTIFF.

• Support rotated GeoTIFF. (The official ol.source.GetTIFF ignore rotation.)
• Area beyond +-180 degrees latitude can also be displayed when wrapX is true.

If you don't need any of the above feature, you should use the official ol.source.GetTIFF.

Sample

const imageSource = new GeoTIFF({
    files: [fileblob1, fileblob2],
    mode: "ndi",
    maxPixel: 1000*1000,
    cmap: "jet",
    wrapX: true,
    sources: [
        {
            index: 0, // fileblob1
            min: 0,
            max: 2**16 - 1,
            band: 1,
            nodata: 0,
        },
        {
            index: 1, // fileblob2
            min: 0,
            max: 2**16 - 1,
            band: 3,
            nodata: -9999,
        }
    ]
});
if (imageSource.getState() === "ready") {
    const layer = new TileLayer({
        source,
    });
    map.addLayer(layer);
} else {
    const sourceListener = () => {
        const sourceState = imageSource.getState();
        if (sourceState !== "loading") {
            imageSource.removeEventListener("change", sourceListener);
            if (sourceState === "ready") {
                const layer = new TileLayer({
                    source,
                });
                map.addLayer(layer);
            }
        }
    };
    imageSource.addEventListener("change", sourceListener);
}


// When no longer needed.
imageSource.release();

Props

For other props, refer to TileGrid's Options. However, some props are ignored.

SourceConfig

RenderMode

Refs

• docs/image.md
• docs/geotiff.md