openlayersのベクトルソースローダーを使用します。

ベクトルソースのurlオプションは、ベクトルデータを読み込むための最初の選択肢ですが、特別な後処理や読み込み戦略が必要な場合には機能しません。

https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html

読み込み戦略#

まず、openlayers の読み込み戦略について学びましょう。openlayers には 3 つの標準的な読み込み戦略があります。

all: リクエストで全てのフィーチャを読み込みます。
bbox: 現在のビューの範囲と解像度に基づいてフィーチャを読み込みます。
tile: タイルグリッドに基づいてフィーチャを読み込みます。allまたはbboxとの違いは、TileGridをパラメータとして受け取ることです。
明らかに、bboxがローダーに最も適しています。なぜなら、allの戦略を受け入れると、urlオプションは正常に動作するからです。

誤解#

次のようなフィーチャを想定してみましょう。データはズームレベルに基づいており、ズームが変更されると、現在のズームレベルのデータを再リクエストする必要があります。

...
loader:function(extent,resolution,projection){
	console.log("解像度",resolution,"でデータを読み込んでいます");
	getData(resoluton).then(response=>{
		let features = source.getFormat().readFeatures(response);
		source.clear();
		source.addFeatures(features);
	})
}
...

デモコードでは、ビューのズームが変更されたときにローダーがトリガーされ、以前のフィーチャがクリアされ、新しいズームで新しいフィーチャが読み込まれることを期待していますが、ホイールをスクロールするとそのようなことは起こりません。
ログメッセージによると、loaderは最初の数回しかトリガーされず、ズームレベル（解像度）を継続的に増やしても、loaderはもはやトリガーされません。
しかし、なぜでしょうか？
範囲はloaderの主なコントローラーであり、loader(extent...)が呼び出されると、範囲はソースの読み込まれた範囲に追加されます（Vector.js のコードを参照）。したがって、解像度が変更されたが新しい範囲が読み込まれた範囲内にある場合、loaderはトリガーされません。
今は明確です。最初の数回の範囲には以下が含まれているため、ズームレベルを継続的に増やしても、ベクトルソースは読み込まれた範囲を超えない限り、ローダーを呼び出しません。