地図・GIS2026年

点検・防災情報を統合するGIS管理パッケージ

自社パッケージ

GISで作成した点検ポイント・パトロールルート・災害エリアなどのデータをWeb地図で閲覧・共有し、現場からの速報登録も行える地理情報管理パッケージです。正式データはGISで整備し、Webは閲覧と簡易登録を担う役割分担を想定しています。

点検・防災情報を統合するGIS管理パッケージ

実績情報

OVERVIEW
クライアント
自社パッケージインフラ管理者や自治体向けに、四葉システムが自社で開発しているGIS系パッケージ製品。
業界
防災 / 官公庁・自治体 / 建設・工事
対応時期
2026年
担当範囲
企画/制作
対応環境
Web / スマートフォン（ブラウザ）

課題・解決・効果

CASE STUDY

  1. 課題

    CHALLENGE
    • GISで作成した点検・防災データを、GISを持たない職員や関係者と共有しにくかった
    • 現場で見つけた異常や災害状況を、位置付きで素早く報告する手段がなかった
    • 点検・パトロール・災害の情報が別々に管理され、地図上で重ねて確認できなかった

  2. 解決

    SOLUTION
    • LeafletとNext.jsで、点検・ルート・災害エリアのレイヤを重ねて表示する地図画面を構築
    • 地図クリックでポイント・ライン・ポリゴンを描いて登録できる速報入力機能を実装
    • GeoJSONのインポート・エクスポート画面を用意し、GISとのデータ受け渡しを可能にした

  3. 効果

    RESULT
    • GISのデータをブラウザだけで閲覧でき、関係者間の情報共有がしやすくなった
    • 現場から位置付きの速報を登録でき、状況把握の初動を早められるようになった
    • 点検・防災情報を一つの地図に重ねて確認できるようになった

主な機能

FEATURES
  • 全レイヤを重ねたダッシュボード地図とレイヤ切替
  • マーカー・図形クリックによる詳細ポップアップ
  • 点検ポイントの一覧と地図クリックでの登録
  • パトロールルートのライン作成と距離の自動計算
  • 災害エリアのポリゴン描画と災害報告カード表示
  • GeoJSONファイルのインポート（プレビュー付き）
  • 追加データのGeoJSONエクスポート

技術スタック

TECHNOLOGY
対応環境
  • Web
  • スマートフォン（ブラウザ）
開発言語
  • TypeScript
フロントエンド
  • Next.js 16
  • React 19
  • Tailwind CSS 4
  • React Leaflet 5
インフラ・実行環境
  • Cloudflare Workers (OpenNext)
主なライブラリ
  • Leaflet
  • React Leaflet
外部連携
  • GeoJSON入出力
  • OpenStreetMapタイル

技術的なポイント

ENGINEERING

システム構成Next.js（App Router）とReact LeafletによるフロントエンドをOpenNextでCloudflare Workersに配置。データはGeoJSONで受け渡し、Web上の追加分はブラウザに保存する。

  1. 1親グループ・子レイヤの2階層でレイヤ表示を制御し、多数のレイヤを一括または個別に切り替えられるようにした。
  2. 2ルートの距離はハバーサイン公式で区間ごとに算出・合算し、地図上の描画と同時に自動計算する。
  3. 3Web上の追加分はlocalStorageに保持して元データと分離し、GeoJSONとして書き出してGISに取り込める流れとした。
  4. 4インポート時は確認モーダルで地図プレビューを表示し、追記前にジオメトリと件数を確認できるようにしている。

同様のシステム開発をご検討の方へ

要件が固まっていない段階でも構いません。課題やご予算に合わせて最適な進め方をご提案します。

お問い合わせ・ご相談

関連する実績

RELATED WORKS
インフラ点検・防災のGIS管理システム
地図・GIS2026年

インフラ点検・防災のGIS管理システム

自社開発（デモ）

道路・河川などのインフラ管理者や防災担当者を想定し、点検ポイント・パトロールルート・災害報告を地図上で登録・確認できるGIS管理システムのデモ。地図と一覧を連動させ、現場の状況をひと目で把握できるようにしています。

  • TypeScript
  • Next.js
  • React
  • Cloudflare
  • Leaflet
詳しく見る
現場写真の地図連携アルバムシステム
地図・GIS2026年

現場写真の地図連携アルバムシステム

自社開発（デモ）

工事・建設現場で撮影した写真を、撮影位置と結び付けて地図上に表示し、現場ごとのアルバムで整理・共有するWebシステムのデモです。現場担当者が写真の位置関係や撮影者・日時をひと目で確認できるようにし、写真整理の手間を減らすことを狙っています。

  • TypeScript
  • Next.js
  • React
  • Cloudflare
  • Leaflet
詳しく見る
鉄道路線図エディタと点検値の可視化ツール
地図・GIS2025〜2026年

鉄道路線図エディタと点検値の可視化ツール

鉄道系建設コンサルタント

鉄道の軌道データ（GeoJSON）から路線図を自動生成してブラウザ上で編集し、点検結果の値を区間ごとに重ねて可視化するツール。結果はExcelやQGIS用データとして出力できる。

  • TypeScript
  • Next.js
  • React
詳しく見る
開発実績の一覧へ戻る