OpenLayers + Tauri 2 最小GISサンプルを作ってみた【 r001】

OpenLayersをTauri 2のWebViewで表示し、TypeScriptからRustコマンドを呼び出す最小GISサンプルです。

実装内容

• OpenLayers 10.10.0
• Tauri 2
• TypeScript + Vite
• OpenStreetMap背景地図
• 地図上でPoint追加
• EPSG:3857表示座標からEPSG:4326へ変換して保存
• invoke() による TypeScript → Rust 呼び出し
• Rust側でJSON保存・読込
• 保存済み地点をOpenLayersへ復元
• 地点一覧から対象地点へズーム

参考のために、ZIPファイルを置いておきますので、ダウンロードして活用してください。

データの流れ

OpenLayers
   │ Point作成
   │ EPSG:3857
   ↓
toLonLat()
   │ EPSG:4326
   ↓
ProjectData
   │
   │ invoke("save_project")
   ↓
Tauri IPC
   ↓
Rust
   ↓
sample_project.json

Windows 11で必要なもの

Tauri 2のWindows開発には、少なくとも次を準備します。

1. Node.js
2. Rust MSVC toolchain
3. Microsoft C++ Build Tools（Desktop development with C++）
4. WebView2 Runtime

Windows 11ではWebView2 Runtimeは通常すでに導入されています。

Rust

PowerShellでRustupを導入したあと、確認します。

rustc --version
cargo --version

起動

プロジェクト直下で実行します。

npm install
npm run tauri dev

Tauriのデスクトップウィンドウが開きます。

通常のブラウザだけでフロントエンドを確認する場合は次です。

npm run dev

ただしブラウザ表示ではTauri IPCがないため、「Rustで保存」「Rustから読込」は動きません。

操作

1. 地点を追加 を押す
2. 地図をクリックする
3. 必要な数だけ地点を置く
4. 追加を終了 を押す
5. Rustで保存 を押す
6. 地点を全削除 を押す
7. Rustから読込 を押す

保存データはアプリ専用データディレクトリへ sample_project.json として作成されます。保存後、画面左下のステータスに実際の保存パスが表示されます。

保存JSON

{
  "name": "OpenLayers Tauri Sample",
  "crs": "EPSG:4326",
  "points": [
    {
      "id": 1,
      "lon": 139.7671,
      "lat": 35.6812,
      "label": "Point 1"
    }
  ]
}

ビルド

npm run tauri build

TauriがWindows用の実行ファイル・インストーラーを生成します。

ソース確認

Linux/WSL側では、依存関係を入れなくても基本ファイルの整合性を確認できます。

./scripts/check_source.sh

依存関係を導入できる環境ではフロントエンドを確認します。

npm install
npm run check

Rust toolchainがある環境ではさらに次を実行します。

cd src-tauri
cargo check

主要ファイル

openlayers_tauri_sample_r001/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── index.html
├── src/
│   ├── main.ts
│   ├── style.css
│   └── types.ts
├── src-tauri/
│   ├── Cargo.toml
│   ├── build.rs
│   ├── tauri.conf.json
│   ├── capabilities/
│   │   └── default.json
│   └── src/
│       ├── main.rs
│       └── lib.rs
└── scripts/
    └── check_source.sh

次に拡張しやすい部分

このサンプルの ProjectPoint を、河川中心線・横断面・2D Area・メッシュへ置き換えることで、OpenLayersベースの入力編集アプリへ広げられます。Rust側にはValidator、Project I/O、Exporter、Solver起動を追加できます。

PowerShellスクリプトで起動する

Windows側で前提ツールを確認し、フロントエンド検査後にTauriを起動するスクリプトも入れています。

powershell -ExecutionPolicy Bypass -File .\scripts\start_windows.ps1

インストーラーまで作る場合は次です。

powershell -ExecutionPolicy Bypass -File .\scripts\build_windows.ps1

---

参考リンク

Tauri

• Tauri 公式サイト
  Tauri の公式サイト。リリース情報や各種ドキュメントへの入口として利用できます。

• Tauri 2 Documentation
  Tauri 2 の公式ドキュメントです。開発環境、設定、IPC、プラグイン、配布方法などを確認できます。

• Tauri - Prerequisites
  Tauri の開発に必要な前提環境についての公式資料です。Windows では Microsoft C++ Build Tools と WebView2 が必要です。

• Tauri - Create a Project
  create-tauri-app を利用したプロジェクト作成方法がまとめられています。
  npm create tauri-app@latest や npm run tauri dev の基本的な流れも確認できます。

• Tauri - Calling Rust from the Frontend
  TypeScript / JavaScript から invoke() を使って Rust の #[tauri::command] を呼び出す方法です。
  r001 の save_project、load_project などの実装に直接関係します。

• Tauri - Calling the Frontend from Rust
  Rust 側からフロントエンドへ Event や Channel を使って通知する方法です。
  今後、Solver の計算進捗を画面へ通知する場合などに利用できます。

• Tauri - Configuration
  src-tauri/tauri.conf.json の公式リファレンスです。
  ウィンドウ、ビルド、Bundle、アプリ識別子などの設定を確認できます。

• Tauri - Capabilities
  Tauri 2 の Capability 設定についての公式資料です。
  Window / WebView ごとに利用可能な権限を制御するときに使用します。

• Tauri - Permissions
  Tauri 2 の Permission の仕組みについて説明されています。
  ファイル操作や各種 Plugin を追加する際には確認しておきたい項目です。

• Tauri - Path API
  アプリ専用データディレクトリなど、OS ごとの標準パスを扱う API の資料です。
  r001 のように Project JSON をローカルへ保存するアプリを拡張するときに参考になります。

• Tauri - Windows Installer
  Windows 向けの .msi や NSIS Setup を作成する方法です。
  npm run tauri build で配布用アプリを作成するときに利用します。

---

OpenLayers

• OpenLayers 公式サイト
  OpenLayers の公式サイトです。

• OpenLayers Quick Start
  OpenLayers の最小構成を確認できます。Map、View、Layer、Source の基本を把握するのに便利です。

• OpenLayers API Documentation
  OpenLayers の API リファレンスです。
  Map、View、VectorLayer、VectorSource、Draw などの仕様を確認できます。

• OpenLayers Examples
  OpenLayers の公式サンプル集です。
  Draw、Modify、Snap、GeoJSON、VectorTile など、GIS 編集機能を追加するときの参考になります。

• OpenLayers - Draw Interaction
  地図上で Point、LineString、Polygon などを作成する Draw Interaction の API です。
  r001 の地点追加処理に関係します。

• OpenLayers - Projection API
  座標変換を行う fromLonLat()、toLonLat()、transform() などの API です。
  r001 では EPSG:3857 と EPSG:4326 の変換に使用しています。

---

Vite / TypeScript

• Vite 公式ドキュメント
  Tauri の Web フロントエンドを開発・ビルドする Vite の公式ドキュメントです。

• TypeScript Documentation
  TypeScript の公式ドキュメントです。

• TypeScript Handbook
  型、関数、Interface、Module など TypeScript の基本仕様を確認できます。

---

Rust

• Rust 公式サイト
  Rust の公式サイトです。

• Install Rust
  rustup を利用した Rust のインストール方法です。

• The Rust Programming Language
  Rust の公式入門書です。所有権、構造体、Enum、Error Handling などを体系的に確認できます。

• Rust Standard Library
  Rust 標準ライブラリの API リファレンスです。
  ファイル操作や Path 操作を実装するときにも使用します。

• Serde
  Rust で JSON などの Serialize / Deserialize を行うために広く利用されているライブラリです。
  r001 では TypeScript から受け取った Project データの JSON 保存・読込に関係します。

---

Windows / WebView2

• Microsoft C++ Build Tools
  Windows で Tauri / Rust を MSVC を使ってビルドするために必要な Build Tools です。

• Microsoft Edge WebView2
  Tauri が Windows 上で Web UI を表示するために利用する WebView2 の公式ページです。

• Visual Studio Code
  Tauri、Rust、TypeScript をまとめて編集する開発環境として利用できます。

---

OpenStreetMap

• OpenStreetMap
  r001 では OpenLayers の背景地図として OpenStreetMap を利用しています。

• OpenStreetMap - Copyright and License
  OpenStreetMap データを利用するときの著作権・ライセンス・クレジット表記について確認できます。

• OpenStreetMap Foundation - Tile Usage Policy
  tile.openstreetmap.org の標準タイルを利用するときの利用条件です。
  公開アプリや大量アクセスを行うアプリでは特に確認が必要です。

---

国土地理院（地理院タイル）

• 地理院地図
  国土地理院が提供するWeb地図です。標準地図、淡色地図、空中写真などを確認できます。

• 地理院タイル一覧
  OpenLayers などから利用できる地理院タイルの公式一覧です。
  タイルURL、ズームレベル、提供範囲、データソース、利用上の注意を確認できます。

---