TypeError: projection1.getUnits is not a function proj.js:399:33 using dist/OlWindy.js with npm

[woodbri]

Hi, this is an awesome project! Thanks.

I'm using:

import OlWindy from 'wind-layer/dist/OlWindy.js';

var windy = new OlWindy(windData, {
    layerName: 'Wind Animation',
    title: 'Wind Animation',
    projection: 'EPSG:4326',
    devicePixelRatio: window.devicePixelRatio,
    map: map,
    colorScale: [
        "rgb(36,104, 180)",
        "rgb(60,157, 194)",
        "rgb(128,205,193 )",
        "rgb(151,218,168 )",
        "rgb(198,231,181)",
        "rgb(238,247,217)",
        "rgb(255,238,159)",
        "rgb(252,217,125)",
        "rgb(255,182,100)",
        "rgb(252,150,75)",
        "rgb(250,112,52)",
        "rgb(245,64,32)",
        "rgb(237,45,28)",
        "rgb(220,24,32)",
        "rgb(180,0,35)"
    ],
    minVelocity: 0,
    maxVelocity: 10,
    velocityScale: 0.05,
    particleAge: 90,
    lineWidth: 1,
    particleMultiplier: 0.01,
});

// control to toggle windy on/off
function toggleWindy() {
    if ($(this).prop('checked')) {
        if (windData) {
            windy.removeLayer();
            windy.setData(windData);
            windy.appendTo(map);
        }
    }
    else {
        windy.clearWind();
        windy.removeLayer();
    }
}

$('input[name=animatewinds]').prop('checked', false);
$('input[name=animatewinds]').on('click', toggleWindy);

And windData is your out.json.

The problem appears to be that projection1 = 'EPSG:3857' instead of a projection object.
In Image.js:153, this is sourceProjection which comes from L149, const sourceProjection = this.getProjection()

This happens when I toggle on the animation using the above code.

TypeError: projection1.getUnits is not a function proj.js:399:33
    equivalent proj.js:399
    getImage Image.js:153
    prepareFrame ImageLayer.js:146
    renderFrame Map.js:157
    renderFrame_ PluggableMap.js:1226
    animationDelay_ PluggableMap.js:193
    <anonymous> self-hosted:876

[woodbri]

I changed to use the esm version but with the same results. But I think I resolved this issue by making the following changes:

In wind-layer/dist/OlWindy.esm.js:11 by changing it to:

import { get as getProj, transformExtent } from 'ol/proj';

and changing L844 to be:

this.getSource().projection_ = getProj(this._getProjectionCode());

Now I don't get the above error, but when I turn on the animation, it runs while tiles are loading, but stops when all the tiles have loaded. If zoom or pan and new tiles are loaded the animation starts and runs as long as tiles are loading.

Any help would be greatly appreciated.

[woodbri]

One additional piece of info is that I get please create new instance messages in the console log, which I just noticed are generated from OlWindy.setData() function, so I'm guessing I'm not using the API correctly. What is the correct way to turn on/off/clear the Windy layer, and what steps to I need to take to reload new data.

[sakitam-fdd]

@woodbri

1. Can you provide the openlayers version you are using? As far as I know, there's something about projection for openlayers v6.
2. setData method must after appendTo method,When you just want to clear the layer, you can use the clearWind
   method, setData method for reload new data. Use removeLayer only when you really want to remove layers

function toggleWindy() {
    if ($(this).prop('checked')) {
        if (windData) {
            windy.appendTo(map);
            windy.setData(windData);
        }
    }
    else {
        windy.clearWind();
    }
}

[woodbri]

  "dependencies": {
    "chart.js": "^2.9.3",
    "core-js": "^3.6.3",
    "jquery": "^3.4.1",
    "jquery-modal": "^0.9.2",
    "ol": "^5.3.3",
    "ol-layerswitcher": "github:woodbri/ol-layerswitcher#addcontrol",
    "ol-popup": "^4.0.0",
    "sidebar-v2": "github:umbe1987/sidebar-v2#ol5-sidebar",
    "wind-layer": "^0.1.1"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }

[woodbri]

OK, changing toggleWindy the way you have it improves things, now when I toggle it on the first time, the wind starts and runs as expected but I still get the please create new instance warning in the console. When I toggle it off it starts, but the next time I toggle it back on again it displays the wind but it is not animated and I get this uncaught exception error:

uncaught exception: AssertionError: Assertion failed. 
See https://openlayers.org/en/v5.3.3/doc/errors/#58 for details.
Collection.js:281:14
    assertUnique_ Collection.js:281
    push Collection.js:202
    addLayer PluggableMap.js:502
    setData index.js:76
    toggleWindy index.js:427
    jQuery 2

EDIT: I fixed this by moving the appendTo() out of the on/off control and placing it after the windy layer definition. So it looks to be working with only the change in defining the projection object.