[GeoImage] image.getState is not a function (when using ol in angular)

[8byr0]

Good morning, It seems that the following issue has not been reported at all.

I tried to implement the following code in an angular(4) application http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html

But it always results in an error when trying to launch the browser.

First of all, my imports:

`

import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerVector from 'ol/layer/vector';
import OlLayerTile from 'ol/layer/Tile';
import OlSourceOSM from 'ol/source/OSM';
import OlLayerImage from 'ol/layer/image';
import OlSourceImageVector from 'ol/source/imagevector';
import OlSourceImageStatic from 'ol/source/ImageStatic';
import OlProjection from 'ol/proj/projection';
import OlSourceVector from 'ol/source/vector';
import OlBaseImage from 'ol/imagebase';
import OlImage from 'ol/image';

import OlSourceGeoImage from 'ol-ext/source/GeoImage';
import OlAttribution from 'ol/attribution';
import OlOverlay from 'ol/overlay';`

Please find the code I used below : (this part properly works) `

// OSM tiles as background
    var OSMBackground = new OlLayerTile({
        source: new OlSourceOSM()
    });
// Custom extend used to position my factoryBackgroundLayer image
    var newExtent = OlProj.transformExtent(
        [2.385083, 48.817463, 2.386024, 48.817694],
        "EPSG:4326", "EPSG:3857"
    );

    var factoryBackgroundLayer = new OlLayerImage({
        source: new OlSourceImageStatic({
            url: 'http://viglino.github.io/ol-ext/examples/data/IGNF_PVA_1-0__1976-03-24_pt.jpg',
            // projection: projection,
            // imageExtent: extent
            projection: 'EPSG:27700',
            imageExtent: newExtent
        })
    });

    var map = new OlMap({
        layers: [OSMBackground
            , factoryBackgroundLayer

        ],
        target: 'map',
        view: new OlView({
            center: OlProj.fromLonLat([2.585487, 48.817561]),
            zoom: 20, // Set to 20 is better
        })
    });`

And then I attempted to display a georeferenced image : `

x = 274764.75;
y = 6243935.64;
sx = 0.589;
sy = 0.597;
xmin = 0;
ymin = 0;
xmax = 5526;
ymax = 5000;
rotate = 7.44;
opacity = 0.7;

var geoSource = new OlSourceGeoImage(
        {
            url: 'http://viglino.github.io/ol-ext/examples/data/IGNF_PVA_1-0__1976-03-24_pt.jpg',
            imageCenter: [this.x, this.y],
            imageScale: [this.sx, this.sy],
            imageCrop: [this.xmin, this.ymin, this.xmax, this.ymax],
            imageRotate: this.rotate * Math.PI / 180,
            projection: 'EPSG:27700',
        });

    var geoimg = new OlLayerImage(
        {
            state: "ready",

            opacity: 0.7,
            source: geoSource,
            imageExtent: newExtent
        });

    this.map.addLayer(geoimg);

`

It always resulted in the same issue :

ERROR TypeError: image.getState is not a function at _ol_renderer_canvasImageLayer._ol_rendererLayer.loadImage (layer.js:114) at _ol_renderer_canvasImageLayer.prepareFrame (imagelayer.js:160) at _ol_renderer_canvasMap.renderFrame (map.js:183) at _olMap._olPluggableMap.renderFrame_ (pluggablemap.js:1180) at _olMap.eval (pluggablemap.js:87) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at ZoneTask.invokeTask (zone.js:496)

So regarding this report I tried to use a ol.source.Image object instead of url but not more successful.

Have you already been noticing this kind of issue ? I apologize if it's not really an issue.

Best regards,

Hugues

PS: I've also tried SnapGuides lines example and it went properly well so your API integration sounds good !

[Viglino]

Hi, I've found an issue with the GeoImage source: the getImage() function overwrite the Image source function. Just change it to getGeoImage() solves the problem. I've pushed a new commit on master branch. If you're using npm just replace the source/GeoImage.js in the node module with the one of the git. It will be included in the next version. Thanks for the feedback!

[8byr0]

Great, it works very well ! Thanks for your work, your library is awesome !

[azurehari]

Hi, I am facing same issue. I am using CDN "https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js". Is that issue is updated in Hosted CDN?