地図・GIS2026年

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

自社開発（デモ）

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

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

実績情報

OVERVIEW
クライアント
自社開発（デモ）四葉システム開発が提案・紹介用に開発したデモアプリケーション。
業界
防災 / 建設・工事 / 官公庁・自治体
対応時期
2026年
担当範囲
企画/制作
対応環境
Web

課題・解決・効果

CASE STUDY

  1. 課題

    CHALLENGE
    • 点検結果や災害報告が表計算や紙で管理され、場所と状況を結び付けて把握しにくい
    • パトロールのルートや点検箇所を関係者と共有する手段が限られている
    • GISの導入前に、地図上での登録・確認の操作感を確かめたい

  2. 解決

    SOLUTION
    • Next.jsとLeafletで、点検・パトロール・災害情報を地図上で扱うGIS管理画面を開発
    • 地図をクリックして位置や範囲を入力し、一覧と地図の選択を連動させる操作を実装
    • レイヤごとにGeoJSONを取込・出力できるデータ管理画面を用意

  3. 効果

    RESULT
    • 要対応の点検箇所や重大な災害を、地図と一覧ですぐに確認できるようになった
    • 既存のGeoJSONデータを取り込んで、手持ちのデータで操作を試せるようになった
    • 地理院地図・航空写真などの背景を切り替え、現場の状況を確かめやすくなった

主な機能

FEATURES
  • 要対応の点検・災害を集約したダッシュボード
  • 点検ポイントの登録と状態（危険・注意など）の管理
  • パトロールルートの登録と距離の算出
  • 災害範囲・深刻度・影響世帯数の登録
  • 地図と一覧の選択連動と凡例・レイヤ切替
  • 背景地図（淡色・標準・写真）の切替
  • レイヤごとのGeoJSON取込・出力

技術スタック

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

技術的なポイント

ENGINEERING

システム構成Next.js（App Router）とReact LeafletによるフロントエンドをOpenNextでCloudflare Workersに配置。初期データはGeoJSONファイルから読み込み、追加分はブラウザのlocalStorageに保存する。

  1. 1点・線・面のGeoJSONをレイヤごとに管理し、取込時に図形の種類を検証して誤ったデータを防止
  2. 2ルートの総延長を球面上の距離計算（ハバーサイン式）で算出
  3. 3データを目立たせるため既定の背景を淡色地図にし、標準地図は透過して重ねる表示を工夫
  4. 4登録中は地図そのものを入力欄として使い、位置や範囲をクリックで指定できるようにした

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

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

お問い合わせ・ご相談

関連する実績

RELATED WORKS
現場写真の地図連携アルバムシステム
地図・GIS2026年

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

自社開発（デモ）

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

  • TypeScript
  • Next.js
  • React
  • Cloudflare
  • Leaflet
詳しく見る
点検・防災情報を統合するGIS管理パッケージ
地図・GIS2026年

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

自社パッケージ

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

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

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

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

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

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