OpenLayers

Webブラウザに地図データを表示するJavaScriptライブラリ
レイヤーを開くことで、レイヤー、ベクトルデータ、タグ、その他の外部データなどを地図で表すことができます.
リンク
https://openlayers.org/

fit()

マップを特定の領域に移動する機能
ただし、座標値が分かれば、

let bbox = [123, 23 , 164, 21]
map.getView().fit(bbox,{option})

option

fitの使用をより素晴らしいオプションにする

size

ボックスのピクセルサイズを範囲に合わせて設定します.

padding

塗りつぶし値の設定

minResolution & maxZoom

最小解像度と最大スケールの設定

duration

フィットしています.移動中にアニメーションのようにすばやく移動します.

callback

到着後に実行される関数

FitとsetCenterの違い

fit画面にboundaryBoxを表示する機能
枠線を画面中央に移動
この機能を実行しながら複数のオプションを指定できます.
setCenterは座標を緯度線として移動する
移動のみ

エラー

最初の移動ボタンを押して、2番目の移動ボタンを押して、再び1番目の移動ボタンを押すと、地図上のVectorLayerは描画されません.

初めての試み。fit to setCenter

ボタンをfitに設定するとsetCenterに変更されますが、同じ問題が発生します.

2回目の試み。setZoomとsetRevolution

vectoy layerは、描画がなくても平行移動、スケール、終了が再描画されるため、setZoomまたはsetRevolutionで値が変更されますが、同じエラーが発生することを知っています.

3回目の試み。setExtent

マウスでズーム、パンするときは、ベクトルレイヤのextent値が変更されていることを確認します.
setExtentでvectorlayerのext値を再設定しましたが、移動位置の正確な座標値を知るのは難しいです(getExtent、calculateExtentを使用していますが、若干の誤差があります).

4回目の試みマウントとポリシー

地図移動時の値の変化を検索してみました.
Vector Layerでloaderとstrategyをカスタマイズできます.
リンク
https://gis.stackexchange.com/questions/322681/openlayers-refresh-vector-source-with-bbox-strategy-after-map-moved
リンク
https://openlayers.org/en/v4.6.5/apidoc/ol.source.Vector.html
リンク
https://openlayers.org/en/latest/apidoc/module-ol_loadingstrategy.html#.bbox
これに基づいて、ポリシーのextension値とloadのextension値が異なる場合、vectoy layerを再拡張します.
ただし、同じvector layerは複数回レンダリングされます.

最後に

4回目の試みで再生の問題が見つかった
コンソールで撮影した結果
ポリシーはloaderによって実行され、実行されます.
ロードが完了すると、再実行されることがわかります.
したがって、ポリシーは、loader終了時のextension値を比較することによって、ベクトルレイヤがレンダリングされる現象を解決する.

に感銘を与える

もちろん、これは完璧な解決策ではないかもしれません.
しかし、これらのソリューションはopenlayersがどのように動作しているかを理解しました.
再構築によってより良いソリューションが見つかった場合、ブログの記録を再度行います.