オープンレイヤーのベクターソースローダーを使用する

ベクターソースの 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はトリガーされません。
今は明らかです。最初の数回の範囲には次のものが含まれているため、ズームレベルを増やし続けると、ベクターソースは範囲が読み込まれた範囲を超えない限り、そのローダーを呼び出しません。