なぜ#
openlayers の API ドキュメントは非常に優れていますが、使用するのは一言では言い表せません。
一般的な API の調べ方には以下の 2 つがあります：
- 検索エンジン 👉 openlayers + キーワード 👉 指定リンクを開く
- API ドキュメントページを開く 👉 キーワードを検索 👉 検索結果から指定結果に到達
OL Search 1#
OL Search はブラウザ拡張機能です（現在は Edge アドオンのみ2）。ブラウザのアドレスバーから openlayers API を迅速に検索できます。手順は以下の通りです：
- control+L または cmd+L で検索バーに入ります。
olキーワードを入力し、tab または space で OL Search に入ります。- 目的の API（メソッド、メンバー変数、トリガーなど）のキーワードを入力し、指定リンクを選択して直接アクセスします。
実装#
主に 3 つのステップに分かれます：
API ドキュメントの解析#
https://openlayers.org/en/latest/apidoc/navigation.tmpl.html
ドキュメントのナビゲーションバー部分には、上記のアドレスからの HTML が埋め込まれています。
ここには本来 2 つの考え方がありました。
1 つは、openlayers 自身の api buildスクリプトを修正して、上記の HTML 内容と一致する JSON 形式の API ドキュメント情報を生成することです。
しかし、以下の 2 点を考慮しました：
- 後のメンテナンスの問題。この方法では、各マイナーバージョンの更新ごとにプラグインを再更新する必要があります。
- プラグインのサイズが大きくなる。
もう 1 つは、上記の HTML のナビゲーション情報ファイルを直接解析することですが、ここで問題が発生しました。ブラウザのプラグイン内のbackground.jsではDOMParserオブジェクトにアクセスできないため、最初は曲線的に解決しようとし、popup（拡張アイコンをクリックして表示される小さなウィンドウ）を通じてデータを読み込む方法を取りました。この方法の欠点は明らかで、ユーザーがプラグインをインストールした後、直接使用できず、拡張アイコンをクリックしてインデックスファイルの初期化を待つ必要があることです。その後、純粋なjavascriptの DOM 解析ライブラリを見つけて、この問題を解決しました。
ファジー検索#
最初はハード検索を採用しましたが、自分自身が使っても満足できませんでした。なぜなら、タイピング中に偶発的なタイプミスが避けられないからです。したがって、ファジー検索は必須です。
ここではmdn-searchのアプローチを参考にし、fuse.jsを導入しました。また、複数のキーワードの強化も行いました。
例えば、readFeaturesというメソッドを検索する際、EsriJSON、KML、WKTなどのさまざまな形式にreadFeaturesメソッドが存在しますが、デフォルトの検索結果であるWKTは後ろにあります。もしWKTのreadFeaturesを探している場合、体験に影響を与えます。
fuse.jsのsearch.$orを使用して、複数のキーワードの複合検索を実現しました。
これにより、readFeatures wktと入力するだけで、WKTを含む結果を最初の候補にすることができます。
デフォルトの推奨を排除#
アドレスバーのomniboxの内容変更イベントを監視するコールバック関数内で、ブラウザはデフォルトで入力した内容を指すデフォルトの推奨を提供します。デフォルトの動作はFile not foundです。
この部分のアイデアはrust-search-extensionから来ており、ユーザーの入力内容と検索結果を組み合わせて、デフォルトの推奨を元々の 2 番目の結果（実際の検索結果の第一順位）に設定します。その後、ユーザーがエンターを押した後、その選択肢がデフォルトの提案であるかどうかを判断し、そうであれば、実際の検索結果の第一順位のアドレスを指すようにします。
最後に#
このツールが openlayers API ドキュメントを重度に使用する皆さんに役立つことを願っています。