SOFTWARE OVERVIEW

GSI MAP
CLIPPER 国土地理院 地図切り抜きツール

HTML + CSS + JAVASCRIPT SINGLE FILE APPLICATION NO BACKEND REQUIRED
// 01 — OVERVIEW

国土地理院が公開する地図タイルデータを使用し、 日本全国の都道府県・市・区の単位で地図を行政境界に沿って正確に切り抜き、 画像として保存できるブラウザ完結型ツールです。

外部サーバーへのデータ送信は一切行わず、 すべての処理をブラウザ内のCanvas APIで完結。 Leaflet.js を用いたインタラクティブな地図操作と、 Overpass API による行政境界ポリゴンの動的取得を組み合わせ、 Web Mercator 投影に基づく歪みのない高精度な切り抜きを実現しています。

POLYGON MASK · ACTIVE
35.5430°N
139.5790°E
// 02

主な機能

FEATURE 01
🔍
地域検索
都道府県47件・全国主要市区町村160件以上を内蔵データとして収録。名称の部分一致でリアルタイムに候補を絞り込み、ワンクリックで地図を自動移動。
OFFLINE
FEATURE 02
🗺️
6種類の地図レイヤー
標準地図・淡色地図・英語表記・航空写真・陰影起伏図・白地図の6種を切り替えて使用可能。すべて国土地理院公式タイルを使用。
GSI TILES
FEATURE 03
✂️
行政境界切り抜き
Overpass API (OpenStreetMap) から行政境界ポリゴンを取得し、Canvas API の clip path でマスク処理。矩形切り抜きも選択可能。
POLYGON CLIP
FEATURE 04
📐
Web Mercator 正確投影
地図タイルと同一の Web Mercator 投影式を使用してピクセル座標を算出。縦横比・ポリゴン位置の歪みを排除した精度の高い切り抜きを実現。
MATH
FEATURE 05
⚙️
柔軟な出力オプション
解像度 1024〜4096px・PNG/JPEG/WebP 形式・ズームレベル 8〜16・余白サイズをそれぞれ設定可能。用途に合わせた最適な出力が可能。
EXPORT
FEATURE 06
💾
ブラウザ完結で保存
生成した画像はブラウザ内でそのままダウンロード。外部サーバーへのアップロードや通信は不要。データの流出リスクなし。
PRIVACY
// 03

使い方

1
地域を検索
都道府県・市・区名を入力してリストから選択
2
設定を調整
地図レイヤー・解像度・ズームレベル・保存形式を選択
3
切り抜く
「地図を切り抜く」ボタンで境界ポリゴン取得〜レンダリングを自動実行
4
保存
「画像を保存」でローカルに即ダウンロード
// 04

技術仕様

LEAFLET.JS v1.9.4
インタラクティブ地図の表示・操作。GeoJSON ポリゴンのオーバーレイ表示と fitBounds による自動ズームに使用。
HTML5 CANVAS API
タイル画像の合成・ポリゴンクリップ・テキスト描画をすべてブラウザ内で処理。toDataURL() で画像エクスポート。
WEB MERCATOR 投影
緯度経度→ピクセル座標変換に正弦逆関数 (arcsin/log) を使った Mercator 式を適用。地図タイルと完全一致する座標系を実現。
OVERPASS API
OSM の行政境界 relation を way geometry ごと取得し、リング結合アルゴリズムで GeoJSON Polygon/MultiPolygon に変換。
// 05

データソース

GSI TILES
国土地理院 地理院タイル — 標準地図・淡色・英語表記・航空写真・陰影起伏・白地図の6種
PRIMARY
OVERPASS API
OpenStreetMap Overpass API — 行政境界ポリゴン (boundary=administrative) の取得
BOUNDARY
NII GEOSHAPE
国立情報学研究所 地理空間情報 — 市区町村 GeoJSON (フォールバック)
FALLBACK
INTERNAL DB
内蔵データ — 都道府県47件・主要市区160件以上のバウンディングボックス(オフライン動作)
OFFLINE
// 06

スペック一覧

PARAMETER VALUE / DESCRIPTION
動作環境 モダンブラウザ (Chrome / Firefox / Safari / Edge 最新版)。サーバー不要・シングルHTMLファイル
出力解像度 1024 / 2048 / 3000 / 4096 px(長辺基準・縦横比自動保持)
出力形式 PNG(無劣化)/ JPEG(軽量)/ WebP(次世代フォーマット)
地図ズームレベル 8〜16(数値が大きいほど高精細・タイル枚数増加)
切り抜き方式 行政境界ポリゴン(Canvas clip path)/ 矩形バウンディングボックスを選択可能
対応地域 日本全国。都道府県・政令指定都市・一般市・東京23区・横浜18区・川崎7区 他
タイル上限 1回の切り抜きにつき最大400タイル(超過時は警告表示・ズーム調整を促す)
余白オプション なし / 10% / 20% / 30%(バウンディングボックスを拡張)
プライバシー タイル・境界データの取得のみ外部通信。ユーザーの操作データ・生成画像は一切送信しない
ライセンス 地理院タイル使用条件に準拠。出力画像への帰属表示(© 国土地理院)を自動付与