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

| Name | Type | Description | | --------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | options | object | params. | | url | string | Image URL. Required if file is not provided. Not recommended for use with large file as it takes time to download. | | file | blob | File blob. Required if url is not provided. | | rotate | number | Image rotation angle. Set in radians. | | maxPixel | number | Maximum size of canvas to hold. | | maxWidth | number | Maximum width of canvas to hold. | | maxHeight | number | Maximum height of canvas to hold. | | tileSize | number | module:ol/size~Size | Inner TileGrid's tile size. Default is 256. | | wrapX | boolean | WrapX. Defaults is true. |

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

| Name | Type | Description | | --------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | options | object | params. | | urls | string[] | Image URLs. Required if files are not provided. Not recommended for use with large files as it takes time to download. | | files | blob[] | File blobs. Required if urls are not provided. | | sources | SourceConfig[] | REQUIRED. Source configures. | | mode | RenderMode | render mode. rgb, single, or ndi. Default is rgb. | | cmap | string | colormap name. Ignored if mode is rgb. | | maxPixel | number | Maximum size of canvas to hold. | | maxWidth | number | Maximum width of canvas to hold. | | maxHeight | number | Maximum height of canvas to hold. | | tileSize | number|module:ol/size~Size | Inner TileGrid's tile size. Default is 256. | | wrapX | boolean | WrapX. Defaults is true. |

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

SourceConfig

| Name | Type | Description | | ------ | ------ | ----------------------------------------------------------------------- | | index | number | REQUIRED. Index of files or urls. | | band | number | REQUIRED. Band numbers to be read from (where the first band is 1). | | nodata | number | Values to discard (overriding any nodata values in the metadata). | | min | number | The minimum source data value (overriding minimum value of data type). | | max | number | The maximum source data value (overriding maximum value of data type). |

RenderMode

| Name | Description | | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | | rgb | Display in RGB color(or True color). sources are required 3. sources[0] is red, sources[1] is green, sources[2] is blue. | | single | Display in monochrome. sources are required 1. | | ndi | Display in The normalized difference index. sources are required 2. Calculated (sources[0] - sources[1]) / (sources[0] + sources[1]). |

Refs

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