気になる JavaScript のコードを触ってみた AMD modules での コード集。ES modules でのコードは、Vite（ヴィート）を使ったものを、vite js app, vite-popup-jsapp で公開しています。
[src] - コードの格納先
-
経度緯度から1次～4次のメッシュコードの計算を行い、結果を確認できるサンプルアプリ : ソース
本サンプルは、マップ上でクリックした地点の経度、緯度の情報から1次～4次のメッシュコードを計算し、ポップアップに計算結果の1次～4次のメッシュコードを表示します。
また、計算結果の確認用に、既存のフィーチャレイヤーから該当の4次メッシュをコードでクエリし、結果をマップ上にグラフィックとテキストのシンボルとして表示と、Web Speech API で喋らせる機能もついています。
-
XYZ タイル のLODs(z), Tile Columuns(x), Tile Rows(y) の座標をマップで対話的に確認できるサンプルアプリ : ソース
WebGL でタイルを表示する実験的なTiling support for custom WebGL layer views のサンプルを拡張し、タイル座標確認ページ のようにXYZ タイルの番号や、Web メルカトルと経度緯度でのタイルの四隅の座標を一覧に表示します。また、マップ上でクリックした地点のXYZ タイルの番号や、Web メルカトルと経度緯度での座標をポップアップで表示します。
本サンプルは、以下のサンプルやWeb ページの情報を組み合わせて作成したサンプルアプリケーションです。
- Tiling support for custom WebGL layer views
Web メルカトルで使われている XYZ タイルの格子をBaseLayerViewGL2D クラスを拡張してWebGL で描画する実験的なサンプル。今回のアプリはこのサンプルをもとに、他の機能を追加して作成しています。 - FeatureTable widget with popup interaction
FeatureTable widget を使用したテーブル表示のサンプル。今回はUI のスタイル定義 とtableContainer の表示/非表示の切り替え部分を利用しています。 - Mercator
このサイトは、Web メルカトルと経度緯度 への変換の計算式が書かれているので、Arcade式を使った計算や他言語での計算の場合に利用可能です。今回のアプリでのWeb メルカトルから経度緯度への変換は "esri/geometry/support/webMercatorUtils" で変換して、結果をテーブルに出力しています。 - Watch for changes
イベントのリッスンと、プロパティの変更を監視する方法を示したサンプル。今回はプロパティの変更の監視と、マップクリックのイベント等の機能を追加するために参考にしました。 - Intro to widgets using BasemapToggle
BasemapToggle wigdet を使った背景地図の切り替えのサンプル。デフォルトの"satellite" と"地理院タイル(標準地図)" の切り替え操作の機能を追加するために参考にしました。 - Slippy map tilenames
このサイトは、/z/x/y タイルのタイル番号や経度緯度の各種言語での計算式が掲載されています。
- Tiling support for custom WebGL layer views
-
ArcGIS API for JavaScript 3.x 系でFeuatuerLayer の描画パフォーマンス表示 : ソース
ArcGIS API for JavaScript 3.31 で、FeuatuerLayer の描画パフォーマンスを表示するサンプルアプリ。
-
ArcGIS API for JavaScript 4.x 系でFeuatuerLayer の描画パフォーマンス表示 - API 4.14 : ソース
ArcGIS API for JavaScript 4.14 で、FeuatuerLayer の描画パフォーマンスを表示するサンプルアプリ。
※ 4.x 系は現在主軸の開発APIで、バージョンアップごとにパフォーマンス改善にも注力されている。4.13 -> 4.14でも GPUやWebGLのパフォーマンスが改善。
-
ArcGIS API for JavaScript 4.x 系でFeuatuerLayer の描画パフォーマンス表示 - API 4.22 : ソース
ArcGIS API for JavaScript 4.22 までのバージョンアップの過程で、更にパフォーマンス改善。
-
英語表記のベクタータイルのベースマップとギャラリーを利用するサンプルアプリ : ソース
ArcGIS API for JavaScript 4.x で、日本語表記/英語表記のベクター タイルベースマップとベースマップギャラリーを利用する２つのサンプルアプリ。
-
地理院タイル等もベースマップギャラリーから利用するサンプルアプリ : ソース
ArcGIS API for JavaScript 4.x で、Custom BasemapGallery として、地理院タイル等もベースマップギャラリーで利用するサンプルアプリ。
-
World Street Map の Roads と Buildings を ベースマップを切り替えながら、スワイプや透過を変更して利用するサンプルアプリ : ソース
ArcGIS API for JavaScript 4.x で、ベクタータイルの利点を活用し、World Street Map の Roads と Buildings のみのスタイルを利用し、Satellite や地理院タイルとスワイプして確認できるサンプルアプリ。
-
地理院地図Vector風の標準地図 を ベースマップを切り替えながら、スワイプや透過を変更して利用するサンプルアプリ : ソース
ArcGIS API for JavaScript 4.18 から Expression式 などAPIで非対応だったベクタータイルのスタイルに対応したため、地理院地図Vectorの標準地図 と、Satellite や地理院タイルとスワイプして確認できるサンプルアプリ。遊びでレイヤーの透過率を1%ずつ変更して、アハ体験ができる機能も追加してみました。
-
開発者向けブログ「レイヤーを拡張して「Tile Map Service」のサービスを表示 」のソースコード
サンプルとして、今昔マップ on the Web のTile Map Service を表示。
-
ArcGIS Maps SDK for JavaScript 4.29 にバージョンアップし、歴史的農業環境閲覧システム で読み込みしている 迅速測図 の Tile Map Service を表示するように変更したサンプルアプリ ： ソース 。
- API リファレンスにある最も簡単なworker を使ったアプリ, worker を使ったAPI Version 4.25 へ書き換えしたバッファー作成アプリ
"esri/core/workers" (Web Worker) を利用してバックグラウンドのスレッドでの処理を最初にやってみたもの。workers の API リファレンス や、Esri スペインの2017年のweb-worker のデモアプリ をAPI Version 4.25 で動作するように改良した。
- client-side graphics から FeatureLayer を作成・更新するサンプルアプリ : ソース
API Version 4.11 からはGeoJSONLayer が追加されたので、GeoJSON を簡単にレイヤーとして追加することができますが、API Version 4.6 のときの「Create a FeatureLayer with client-side graphics」のサンプルをもとに、地震の観測情報を、FeatureLayer のsource を入替によって更新を実現しているサンプルです。API Version も 4.25 へ更新してあります。
また、2023/02/09 にgraphics の作成処理を"esri/core/workers" (Web Worker) を利用してバックグラウンドのスレッドで行うように改良しました。
- テーブルでクリックしたセルの値を、グラフィックとして文字の描画 と Web Speech API で喋らせるアプリ : ソース マウス操作時の選択したセルの列によって、英語と日本語を喋り分けます。※このアプリでは地図は特に意味ありません。
-
ArcGIS API for JavaScript 4.x と 3.x の両方のライブラリを Map と Scene の連携
以下の blog の動画内のコードを拡張:
http://odoe.net/blog/void-your-arcgis-api-for-javascript-warranty/