⇧ よくぞ調べましたな。
何て言うか、普通だったら、国が主導で作って然るべきのような気もしますが、どうしようもない国ですな...
Web上で高速に描画するアーキテクチャを知りたいんだが...
地理空間情報というものを知って、Web上でオブジェクトを表示したいってなった時に、
またここで注意していただきたいのは、たとえ 1,000～2,000 ポイントであればパフォーマンスに影響なく描画できるとしても、それは決して推奨される地図データの描画方法ではないという点です。冒頭でも紹介したように、グラフィックによる地図データの描画は、ユーザのアクションにグラフィックが対話的に反応することを目的としています。ユーザの操作対象となるグラフィックが一つの画面上に数千レコードも存在する設計は、ユーザ フレンドリーなアプリケーションの実装方法とは言えません。一般的な Web GIS アプリケーションでは、描画するグラフィックのレコード数は多くとも数百レコードにとどめるべきです。
大量のポイント フィーチャの分布状況を描画したいのであれば、ヒートマップ、クラスタリング、ダイナミック マップ サービスなどの多くの別の手段が存在します。
以上がgoogle maps APIで大量にマーカーを配置する場合の最適化方法でした。これやっているだけで50000件とかにしても全然重たくならないので件数が多い場合は是非試してみると良いと思います。
⇧ 描画する件数の考え方の違い云々は兎も角として、「クラスタリング」での描画を推奨してるっぽい。
Last month, the 4.14 version of the ArcGIS API for JavaScript (ArcGIS JS API) introduced point clustering in beta. Clustering is a method of merging nearby and overlapping features into a single symbol.
Clustering is configured on the featureReduction property of a FeatureLayer, CSVLayer, or GeoJSONLayer.
⇧ 上記サイト様によると、Web上で描画を実現する時に、レイヤーって考え方をするらしいですな。
GIS（Geographic information system）に知見のある企業とか
何やら、
Esri では、オープン ソース ソフトウェアのイベント、ライブラリ、ツール、アプリに対する技術面、および財政面での多大な貢献を継続的に行っています。 Esri の従業員はこれまで GitHub で 500 以上のオープン ソース プロジェクトを開発し、その大半が Apache 2.0 に基づいてライセンスされています。また、GDAL などのサードパーティ プロジェクトへの貢献、FOSS4G カンファレンスへの出席を定期的に行っています。
⇧ Esriって団体が、地理空間情報を扱うライブラリに秀でているってことなんかね？
ESRI（Environmental Systems Research Institute, Inc.）は、地理情報システム (GIS) のソフトウェア、データ、出版、提供を行なっている企業。米国のカリフォルニア州レッドランズ市に所在し、GIS関連では世界有数の企業である。
⇧ GISに強い企業さんでしたか。
GISはと言うと、
A geographic information system (GIS) consists of integrated computer hardware and software that store, manage, analyze, edit, output, and visualize geographic data. Much of this often happens within a spatial database, however, this is not essential to meet the definition of a GIS.
⇧ とのこと。
そして、
A GIS software program is a computer program to support the use of a geographic information system, providing the ability to create, store, manage, query, analyze, and visualize geographic data, that is, data representing phenomena for which location is important.
https://en.wikipedia.org/wiki/Geographic_information_system_software
The GIS software industry encompasses a broad range of commercial and open-source products that provide some or all of these capabilities within various information technology architectures.
https://en.wikipedia.org/wiki/Geographic_information_system_software
⇧GIS softwareの方の情報で、様々な種類のソフトウェアと、どの団体が市場のシェアが高いかとかをザックリ紹介していて、『ESRI（Environmental Systems Research Institute, Inc.）』の名前もありました。
Linkedinで、
⇧ 参照できる情報にも、『ESRI（Environmental Systems Research Institute, Inc.）』が出てきてますね。
JavaScriptにおけるGISライブラリの「クラスタリング」とは
機械学習とかで「クラスタリング」と言うと、特徴量を削減するって話になってくると思うんだけど、
In this post I will describe how you can use a third party clustering tool in your AGIS JavaScript API applications. Clustering is an excellent technique for visualizing lots of point data. We’ve all seen applications where there were so many points that they simply appear as one big blob. Clustering takes the individual points and groups them into clusters and then renders the cluster as one graphic.
https://geospatialtraining.com/clustering-with-the-arcgis-server-javascript-api/
⇧ JavaScriptのGISライブラリにおいても、考え方は同じ様な感じになるっぽい。
Zoom inで拡大した狭い範囲における描画は、
⇧ グループ化されていない状態の拠点が表示され、Zoom outで縮小した広い範囲での描画は、
⇧ グループ化された拠点を表示するようにしている。
推測になってしまうのだけど、
⇧ 上図のように、Ajaxのような仕組みでサーバー側に「クラスタリング」のための計算処理のリクエストが投げられ、計算処理が完了したらレスポンスが返され、レスポンスを元に再描画ってことをしてるんですかね？
ちなみに、
⇧ 機械学習とかで「クラスタリング」というと、「K Means」とかがメジャーっぽいですかね。
何やら、
⇧ JavaScriptでフルスクラッチで実装してらっしゃる方がおりますな。
「クラスタリング」されない時の表示の性能には限界があるんでは...
で、疑問に思ったのは、「クラスタリング」されない、というより、個々の拠点をグループ化せずに表示したいとなった場合に、「クラスタリング」の恩恵を受けられなくなると思うので、描画したい拠点の数が膨大な数になった時に、表示速度の問題が出てくるんでは？と疑問に思ったんだけど、そのあたりってどうなんだろうか？
Google Map APIだと、50000件の表示とかでも表示速度が気にならないって仰っておられる方がいましたけど、最大表示数については気にしなくても良いんかね？
仮に計算処理やデータ取得の処理が高速にできたとして、ブラウザでの描画に時間がかかる気がするんだけど...
何やら、
⇧ OffscreenCanvasを使えば、大量のオブジェクトを表示できそうではあるらしいけど、
The OffscreenCanvas interface provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering operations can also be run inside a worker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
⇧ OffscreenCanvas内でDOMを扱えない感じなんかね...
あと、「Web Worker」と「Service Worker」の違いなんかは、
⇧ 上記サイト様が参考になるかと。
まぁ、マルチスレッドで処理された内容を描画する際に、ブロッキングされて複数のスレッドの内容を順次でしか行えないのであるとすると、速度の向上に期待ができなさそうな気もするんだけど、どうなんだろうか？
フロントエンド側の知見が無いから、どうすれば、大量のDOMを高速に描画できるのかベストプラクティスが分からんですな...
う～む、毎度モヤモヤ感が半端ない...
今回はこのへんで。
