Shapefile Viewer

Shapefile を地図上に表示し、フィーチャーをエリアごとに分類できる Web アプリケーションです。

機能

• Shapefile (.shp, .dbf, .shx) の読み込みと表示
• 複数レイヤーの管理 (表示/非表示、色変更、並び替え)
• プロパティによるフィルタリング
• エリアプロジェクトの作成と管理
• フィーチャーのエリア分類
• 都道府県単位での地図ナビゲーション

使い方

1. Shapefile の読み込み

1. サイドバーの「レイヤー」タブを選択
2. 「レイヤーを追加」ボタンをクリック
3. Shapefile を選択 (.shp, .dbf, .shx ファイルをまとめて選択)

注意: 属性データを表示するには .dbf ファイルも一緒に選択してください。

2. レイヤーの操作

操作	方法
表示/非表示	目のアイコンをクリック
色の変更	カラーパレットから選択
並び替え	上下の矢印ボタン
フィルター	フィルターアイコンでプロパティ値を選択
削除	ゴミ箱アイコン

3. 都道府県ナビゲーション

サイドバー上部のセレクターで都道府県を選択すると、その地域に地図が移動します。選択した都道府県は次回起動時も記憶されます。

4. エリア分類

フィーチャーをエリアごとにグループ化できます。

プロジェクトの作成

1. 「エリア」タブを選択
2. 「新規プロジェクト」をクリック
3. プロジェクト名を入力

エリアの追加

1. 「エリアを追加」ボタンをクリック
2. エリア名を入力
3. 必要に応じてサブエリアを追加 (親エリアの「+」ボタン)

フィーチャーの割り当て

方法 1: 地図上でクリック

1. エリアを選択 (クリックで選択状態に)
2. 地図上のフィーチャーをクリックして追加/削除

方法 2: 一括追加

1. エリアを選択
2. 「フィーチャーを追加」セクションでフィルター条件を設定
3. 「追加」ボタンをクリック

5. プロジェクトの保存と読み込み

操作	方法
保存	「ダウンロード」ボタンで JSON ファイルとして保存
読み込み	「開く」ボタンで JSON ファイルを選択

保存される JSON にはエリア情報とフィーチャー名称が含まれます。

開発

セットアップ

npm install

開発サーバー

npm run dev

ビルド

npm run build

プレビュー

npm run preview

技術スタック

• React 19
• TypeScript
• Vite
• Leaflet / react-leaflet
• Tailwind CSS
• shapefile (ブラウザでの Shapefile パース)